@taprootio/espalier 2.12.1 → 2.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -5,6 +5,23 @@ here. This file ships in the published npm package. It is a curated public
5
5
  record and intentionally does not mirror the private `taproot-controls`
6
6
  development history.
7
7
 
8
+ ## 2.13.0 — Default page workspace widths
9
+
10
+ - Add `--esp-page-preview-default-width` and
11
+ `--esp-page-flyout-default-width` as independent, min/max-clamped automatic
12
+ allocation targets without changing the legacy fixed-width aliases or the
13
+ established allocation when the new tokens are unset.
14
+ - Shrink defaulted help and preview widths toward their independent minimums,
15
+ in help-before-preview order, before reclaiming the main well. Apply the same
16
+ behavior to preview-only and help-only layouts while retaining the existing
17
+ minimum-fit preview hiding and help overlay ladder.
18
+ - Keep pointer and keyboard resize preferences authoritative over configured
19
+ defaults, with the existing responsive clamping, hiding, overlay recovery,
20
+ restoration, and independent min/max resize travel.
21
+ - Document the new API and add unit and browser coverage for default bounds,
22
+ contraction, one-pane allocation, preference precedence, responsive
23
+ restoration, legacy aliases, and the unset-token fallback.
24
+
8
25
  ## 2.12.1 — URL help flyout fixes
9
26
 
10
27
  - Change contextual help flyouts to the normalized document title when “View
@@ -40116,6 +40116,10 @@
40116
40116
  "description": "Minimum preview width. Defaults to `22.5rem` (360px, a reasonable mobile-device surface).",
40117
40117
  "name": "--esp-page-preview-min-width"
40118
40118
  },
40119
+ {
40120
+ "description": "Initial automatic preview target, clamped between the preview minimum and maximum. When unset, the established preview-first flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target.",
40121
+ "name": "--esp-page-preview-default-width"
40122
+ },
40119
40123
  {
40120
40124
  "description": "Maximum preview width. Defaults to `48rem`. Preview receives flexible trailing space before help grows.",
40121
40125
  "name": "--esp-page-preview-max-width"
@@ -40124,6 +40128,10 @@
40124
40128
  "description": "Minimum in-grid help width. Defaults to `20rem`.",
40125
40129
  "name": "--esp-page-flyout-min-width"
40126
40130
  },
40131
+ {
40132
+ "description": "Initial automatic in-grid help target, clamped between the help minimum and maximum. When unset, the established flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target.",
40133
+ "name": "--esp-page-flyout-default-width"
40134
+ },
40127
40135
  {
40128
40136
  "description": "Maximum help width and overlay drawer cap before the `85vw` viewport cap. Defaults to `30rem`.",
40129
40137
  "name": "--esp-page-flyout-max-width"
@@ -40277,11 +40285,11 @@
40277
40285
  "name": "right"
40278
40286
  },
40279
40287
  {
40280
- "description": "Persistent preview content placed after the main surface and before help. It grows from `--esp-page-preview-min-width` to `--esp-page-preview-max-width`, starts at viewport top, and gives its content an independent `100dvh` vertical scroller. At either scroll boundary, wheel and trackpad motion chains back to the main document. Unlike flyout content, preview content is never replaced by the flyout request bus.",
40288
+ "description": "Persistent preview content placed after the main surface and before help. It grows from `--esp-page-preview-min-width` to `--esp-page-preview-max-width`, starting at `--esp-page-preview-default-width` when that token is set. It starts at viewport top and gives its content an independent `100dvh` vertical scroller. At either scroll boundary, wheel and trackpad motion chains back to the main document. Unlike flyout content, preview content is never replaced by the flyout request bus.",
40281
40289
  "name": "preview"
40282
40290
  },
40283
40291
  {
40284
- "description": "A transient `esp-flyout` panel that lives on the canvas after preview. Closed it costs no width; open it grows from `--esp-page-flyout-min-width` to `--esp-page-flyout-max-width` after preview receives flexible space, then docks as a width-competing right sidebar when no gutter exists, and becomes an overlay drawer on small viewports. The persistent `right` aside and the transient flyout are complementary, not alternatives. A flyout opened with an `anchor` aligns to that trigger and stays in the same document scroll flow. When a preview is visible, its caret and non-interactive dotted bridge cross the preview back to the anchor, ending at a short thick marker on the preview/help seam.",
40292
+ "description": "A transient `esp-flyout` panel that lives on the canvas after preview. Closed it costs no width; open it grows from `--esp-page-flyout-min-width` to `--esp-page-flyout-max-width`, starting at `--esp-page-flyout-default-width` when that token is set. It receives remaining flexible space after preview when no default is set, then docks as a width-competing right sidebar when no gutter exists and becomes an overlay drawer on small viewports. The persistent `right` aside and the transient flyout are complementary, not alternatives. A flyout opened with an `anchor` aligns to that trigger and stays in the same document scroll flow. When a preview is visible, its caret and non-interactive dotted bridge cross the preview back to the anchor, ending at a short thick marker on the preview/help seam.",
40285
40293
  "name": "flyout"
40286
40294
  },
40287
40295
  {
@@ -40324,6 +40332,11 @@
40324
40332
  "name": "previewMinWidthProbe",
40325
40333
  "privacy": "private"
40326
40334
  },
40335
+ {
40336
+ "kind": "field",
40337
+ "name": "previewDefaultWidthProbe",
40338
+ "privacy": "private"
40339
+ },
40327
40340
  {
40328
40341
  "kind": "field",
40329
40342
  "name": "previewMaxWidthProbe",
@@ -40334,6 +40347,11 @@
40334
40347
  "name": "flyoutMinWidthProbe",
40335
40348
  "privacy": "private"
40336
40349
  },
40350
+ {
40351
+ "kind": "field",
40352
+ "name": "flyoutDefaultWidthProbe",
40353
+ "privacy": "private"
40354
+ },
40337
40355
  {
40338
40356
  "kind": "field",
40339
40357
  "name": "flyoutMaxWidthProbe",
@@ -40791,7 +40809,7 @@
40791
40809
  }
40792
40810
  },
40793
40811
  {
40794
- "name": "enforcePreference",
40812
+ "name": "enforceTarget",
40795
40813
  "default": "false"
40796
40814
  }
40797
40815
  ]
@@ -40937,6 +40955,30 @@
40937
40955
  }
40938
40956
  ]
40939
40957
  },
40958
+ {
40959
+ "kind": "method",
40960
+ "name": "optionalWidth",
40961
+ "privacy": "private",
40962
+ "return": {
40963
+ "type": {
40964
+ "text": "number | null"
40965
+ }
40966
+ },
40967
+ "parameters": [
40968
+ {
40969
+ "name": "propertyName",
40970
+ "type": {
40971
+ "text": "string"
40972
+ }
40973
+ },
40974
+ {
40975
+ "name": "probe",
40976
+ "type": {
40977
+ "text": "ReturnType<typeof createRef<HTMLDivElement>>"
40978
+ }
40979
+ }
40980
+ ]
40981
+ },
40940
40982
  {
40941
40983
  "kind": "method",
40942
40984
  "name": "allocateWorkspaceWidths",
@@ -40988,6 +41030,20 @@
40988
41030
  "type": {
40989
41031
  "text": "number"
40990
41032
  }
41033
+ },
41034
+ {
41035
+ "name": "previewDefaultWidth",
41036
+ "default": "null",
41037
+ "type": {
41038
+ "text": "number | null"
41039
+ }
41040
+ },
41041
+ {
41042
+ "name": "flyoutDefaultWidth",
41043
+ "default": "null",
41044
+ "type": {
41045
+ "text": "number | null"
41046
+ }
40991
41047
  }
40992
41048
  ]
40993
41049
  },
@@ -62,15 +62,19 @@ export interface PageWorkspaceResizeDetail {
62
62
  * @slot right - Content to place in the right aside.
63
63
  * @slot preview - Persistent preview content placed after the main surface and
64
64
  * before help. It grows from `--esp-page-preview-min-width` to
65
- * `--esp-page-preview-max-width`, starts at viewport top, and gives its content
66
- * an independent `100dvh` vertical scroller. At either scroll boundary, wheel
67
- * and trackpad motion chains back to the main document. Unlike flyout content,
68
- * preview content is never replaced by the flyout request bus.
65
+ * `--esp-page-preview-max-width`, starting at
66
+ * `--esp-page-preview-default-width` when that token is set. It starts at
67
+ * viewport top and gives its content an independent `100dvh` vertical scroller. At
68
+ * either scroll boundary, wheel and trackpad motion chains back to the main
69
+ * document. Unlike flyout content, preview content is never replaced by the
70
+ * flyout request bus.
69
71
  * @slot flyout - A transient `esp-flyout` panel that lives on the
70
72
  * canvas after preview. Closed it costs no width; open it grows from
71
- * `--esp-page-flyout-min-width` to `--esp-page-flyout-max-width` after preview
72
- * receives flexible space, then docks as a width-competing right sidebar when
73
- * no gutter exists, and becomes an overlay drawer on small viewports.
73
+ * `--esp-page-flyout-min-width` to `--esp-page-flyout-max-width`, starting at
74
+ * `--esp-page-flyout-default-width` when that token is set. It receives
75
+ * remaining flexible space after preview when no default is set, then docks as
76
+ * a width-competing right sidebar when no gutter exists and becomes an overlay
77
+ * drawer on small viewports.
74
78
  * The persistent `right` aside and the transient flyout are
75
79
  * complementary, not alternatives. A flyout opened with an `anchor`
76
80
  * aligns to that trigger and stays in the same document scroll flow. When a
@@ -193,10 +197,18 @@ export interface PageWorkspaceResizeDetail {
193
197
  * additive surface.
194
198
  * @cssprop --esp-page-preview-min-width - Minimum preview width. Defaults to
195
199
  * `22.5rem` (360px, a reasonable mobile-device surface).
200
+ * @cssprop --esp-page-preview-default-width - Initial automatic preview
201
+ * target, clamped between the preview minimum and maximum. When unset, the
202
+ * established preview-first flexible allocation remains in effect. A retained
203
+ * pointer or keyboard resize preference supersedes this target.
196
204
  * @cssprop --esp-page-preview-max-width - Maximum preview width. Defaults to
197
205
  * `48rem`. Preview receives flexible trailing space before help grows.
198
206
  * @cssprop --esp-page-flyout-min-width - Minimum in-grid help width. Defaults
199
207
  * to `20rem`.
208
+ * @cssprop --esp-page-flyout-default-width - Initial automatic in-grid help
209
+ * target, clamped between the help minimum and maximum. When unset, the
210
+ * established flexible allocation remains in effect. A retained pointer or
211
+ * keyboard resize preference supersedes this target.
200
212
  * @cssprop --esp-page-flyout-max-width - Maximum help width and overlay drawer
201
213
  * cap before the `85vw` viewport cap. Defaults to `30rem`.
202
214
  * @cssprop --esp-page-resize-step - Arrow-key resize step. Defaults to `1rem`.
@@ -1,5 +1,5 @@
1
- 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`
2
- <div part="wrapper" class="esp-page ${V({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
1
+ var x=function(_,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(_,e,t,i);else for(var o=_.length-1;o>=0;o--)(r=_[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 V,html as j,nothing as H}from"lit";import{customElement as U,property as z,state as T}from"lit/decorators.js";import{classMap as Y}from"lit/directives/class-map.js";import{createRef as R,ref as M}from"lit/directives/ref.js";import{EspalierElementBase as I}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as O}from"./bi-directional-sticky-controller.js";import{getEspBus as Q}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";const D='esp-footer, footer, [role~="contentinfo"]',X="(max-width: 50em)",c=1,Z=5,J=12,ee=48,te=16,ie=64,ae=250;let W=class extends I{constructor(){super(),this.dialogZone=R(),this.flyoutSlot=R(),this.footerSlot=R(),this.previewSlot=R(),this.previewSpace=R(),this.previewMinWidthProbe=R(),this.previewDefaultWidthProbe=R(),this.previewMaxWidthProbe=R(),this.flyoutMinWidthProbe=R(),this.flyoutDefaultWidthProbe=R(),this.flyoutMaxWidthProbe=R(),this.mainMinWidthProbe=R(),this.mainMaxWidthProbe=R(),this.resizeStepProbe=R(),this.resizeLargeStepProbe=R(),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 O(this,".esp-page-left > .sticky-wrapper"),new O(this,".esp-page-right > .sticky-wrapper"),new O(this,".esp-page-flyout > .sticky-wrapper"),new O(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,l=typeof o.mode=="string"?o.mode:r.getAttribute("mode");o.pageOverlayRequested&&(!i(r)||l!=="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)},ae)}suspendPreviewLayoutForWorkspaceResize(){this.previewSyncRaf!==null&&(cancelAnimationFrame(this.previewSyncRaf),this.previewSyncRaf=null),this.previewSyncGeneration+=1,this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1)}setPreviewLayoutState(e,t){this.previewVisible=e,this.previewReclaiming=e&&t,e||this.endWorkspaceResize()}setWorkspaceWidths(e,t,i=!1){const s=Math.max(0,e),a=Math.max(0,t);this.style.setProperty("--_esp-page-preview-used-width",`${s}px`),this.style.setProperty("--_esp-page-flyout-used-width",`${a}px`),this.toggleAttribute("data-workspace-targeted",i),this.allocatedPreviewWidth=s,this.allocatedFlyoutWidth=a}clampWidth(e,t,i){return Math.min(Math.max(e,t),Math.max(t,i))}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,l=t?this.clampWidth(this.preferredFlyoutWidth??a,Math.max(0,a),Math.max(a,r)):0;return o+l}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 l=this.parentElement??(o instanceof ShadowRoot?o.host:null);for(;l;){const g=getComputedStyle(l).overflowX;if(["auto","clip","hidden","scroll"].includes(g)){const d=l.getBoundingClientRect();t=Math.max(t,d.left),i=Math.min(i,d.right)}const h=l.getRootNode();l=l.parentElement??(h instanceof ShadowRoot?h.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}optionalWidth(e,t){return getComputedStyle(this).getPropertyValue(e).trim()===""?null:this.probeWidth(t)}allocateWorkspaceWidths(e,t,i,s,a,r,o,l=null,g=null){const h=Math.max(0,e),d=Math.max(0,s),p=Math.max(d,a),n=Math.max(0,r),w=Math.max(n,o),f=t?this.preferredPreviewWidth??(l===null?null:this.clampWidth(l,d,p)):null,v=i?this.preferredFlyoutWidth??(g===null?null:this.clampWidth(g,n,w)):null;let y=0,b=0;t&&i?(y=Math.min(p,Math.max(d,h-n)),b=Math.min(w,Math.max(n,h-y))):t?y=Math.min(p,Math.max(d,h)):i&&(b=Math.min(w,Math.max(n,h))),t&&f!==null&&(y=this.clampWidth(f,d,p),i&&v===null&&(b=this.clampWidth(h-y,n,w))),i&&v!==null&&(b=this.clampWidth(v,n,w),t&&f===null&&(y=this.clampWidth(h-b,d,p)));let k=y+b-h;if(k>0&&i){const u=Math.min(k,Math.max(0,b-n));b-=u,k-=u}return k>0&&t&&(y-=Math.min(k,Math.max(0,y-d))),{previewWidth:y,flyoutWidth:b}}workspaceResizeDirection(){return getComputedStyle(this).direction==="rtl"?-1:1}resizeStep(e){const t=this.probeWidth(e?this.resizeLargeStepProbe:this.resizeStepProbe);return t>0?t:e?ie:te}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),l=Math.max(0,t+e),g=o>0?Math.max(0,l-o):0,h=Math.max(s,g),d=Math.max(0,l+i-r);return{minimum:h,maximum:Math.max(h,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),l=r>0?Math.max(0,o-r):0,g=Math.max(i,l);return{minimum:g,maximum:Math.max(g,Math.min(s,o-a))}}applyWorkspaceResize(e,t,i,s,a,r,o,l){if(!this.separatorIsAvailable(e))return;const g=t*l;let h=e,d=s,p=a;if(e==="main-preview"){const n=this.mainPreviewResizeRange(s,r,o),w=s-g;d=this.clampWidth(w,n.minimum,n.maximum),this.preferredPreviewWidth=d;const f=Math.max(0,this.probeWidth(this.mainMinWidthProbe));o>0&&d>Math.max(0,r+s-f)+c&&this.requestPreviewNavigationCollapse();const v=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),y=Math.max(0,v-w),b=n.minimum<=v+c;if(y>0&&b&&a>0){const k=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),u=Math.max(k,this.probeWidth(this.flyoutMaxWidthProbe));p=this.clampWidth(a-y,k,u),this.preferredFlyoutWidth=p}else a>0&&(this.preferredFlyoutWidth??=a)}else if(this.previewVisible){const n=this.previewFlyoutResizeRange(s,a),w=s+g;d=this.clampWidth(w,n.minimum,n.maximum),p=s+a-d,this.preferredPreviewWidth=d;const f=Math.max(0,this.probeWidth(this.previewMinWidthProbe)),v=Math.max(0,f-w),y=n.minimum<=f+c;if(v>0&&y){const b=Math.max(0,this.probeWidth(this.flyoutMinWidthProbe)),k=Math.max(b,this.probeWidth(this.flyoutMaxWidthProbe)),u=Math.max(0,this.probeWidth(this.mainMinWidthProbe)),m=Math.max(0,r-u);p=this.clampWidth(p+Math.min(v,m),b,k)}this.preferredFlyoutWidth=p}else{h="main-flyout";const n=this.flyoutOnlyResizeRange(a,r);p=this.clampWidth(a-g,n.minimum,n.maximum),d=0,this.preferredFlyoutWidth=p}this.setWorkspaceWidths(d,p,!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:h,source:i,previewWidth:d,flyoutWidth:p}}))}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"),l=this.shadowRoot?.querySelector(".esp-page-preview"),g=this.shadowRoot?.querySelector(".esp-page-flyout");if(!o||!l||!g)return!1;const h=this.visiblePageInlineBounds(),d=o.getBoundingClientRect(),p=l.getBoundingClientRect(),n=g.getBoundingClientRect(),w=Math.max(t,i),f=Math.max(a,r),v=p.width+c>=t&&p.width<=w+c,y=!s||n.width+c>=a&&n.width<=f+c,b=p.left+c>=h.left&&p.right<=h.right+c&&(!s||n.left+c>=h.left&&n.right<=h.right+c),k=getComputedStyle(this).direction==="rtl"?d.left+c>=p.right&&(!s||p.left+c>=n.right):d.right<=p.left+c&&(!s||p.right<=n.left+c);return d.width+c>=e&&v&&y&&b&&k}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(),l=a.getBoundingClientRect(),g=Math.max(t,i),h=l.width+c>=t&&l.width<=g+c,d=l.left+c>=r.left&&l.right<=r.right+c,p=getComputedStyle(this).direction==="rtl"?o.left+c>=l.right:o.right<=l.left+c;return o.width+c>=e&&h&&d&&p}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,l=this.shadowRoot?.querySelector(".esp-page-right")?.getBoundingClientRect().width??0,h=(t&&this.getPreviewNavigationPair()!==null?0:o)+l+e+(t?i:0)+(s?a:0);return r+c>=h}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<J;r+=1){if(await new Promise(l=>requestAnimationFrame(()=>l())),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>=Z)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"),l=this.hasAttribute("flyout-open"),g=this.hasAttribute("data-preview-navigation-collapsed")?this.previewCollapsedSidebarWidth:0,h=this.probeWidth(this.previewMinWidthProbe),d=this.optionalWidth("--esp-page-preview-default-width",this.previewDefaultWidthProbe),p=this.probeWidth(this.previewMaxWidthProbe),n=this.probeWidth(this.flyoutMinWidthProbe),w=this.optionalWidth("--esp-page-flyout-default-width",this.flyoutDefaultWidthProbe),f=this.probeWidth(this.flyoutMaxWidthProbe),v=this.probeWidth(this.mainMinWidthProbe),y=this.openAutoFlyouts().some(S=>S.pageOverlayRequested===!0);if(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,0),y){const S=this.visiblePageInlineBounds().width,F=this.flyoutOverlayPromotionWidth===null||S>=this.flyoutOverlayPromotionWidth+ee;!r&&t&&this.flyoutOverlayRecoveryReady&&F&&this.workspaceMinimumsCanFit(v,a,h,!0,n)?await this.setPageFlyoutOverlay(!1):r&&await this.setPageFlyoutOverlay(!1);return}if(this.toggleAttribute("data-preview-navigation-collapsed",!1),await this.updateComplete,e!==this.previewSyncGeneration)return;const b=this.visibleSpaceWidth(),k=Math.max(0,b-g),u=a&&!r&&!o,m=l&&!r;if(v>0&&(!u||h>0)&&(!m||n>0)&&(u||m)&&!this.workspaceMinimumsCanFit(v,u,h,m,n)){m&&await this.promoteFlyoutToOverlay();return}const C=(u?h:0)+(m?n:0),A=this.workspaceUsesPreference(u,m),L=A||(u&&d!==null||m&&w!==null),$=this.preferredWorkspaceWidth(u,m,h,p,n,f),E=A?Math.max(C,$):C;let P=this.allocateWorkspaceWidths(k,u,m,h,p,n,f,d,w);if(this.setWorkspaceWidths(P.previewWidth,P.flyoutWidth,L),!u||h<=0){if(m){if(A){const S=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,F=Math.max(n,S+k-v);P=this.allocateWorkspaceWidths(F,!1,!0,h,p,n,f,d,w),this.setWorkspaceWidths(0,P.flyoutWidth,!0),await this.updateComplete}await this.promoteFlyoutIfClipped(e,v,n,f)}return}if(k+c>=E){s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,!1);const S=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(v,h,p,m,n,f),()=>this.workspaceCandidateIsMeasurable(!0,m));if(S===null)return;if(S){this.toggleAttribute("data-preview-validating",!1);return}this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,m?n:0),m&&await this.promoteFlyoutToOverlay();return}const K=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,B=A?this.preferredWorkspaceFitsWithNavigation(v,E,g):K+k+c>=v+E;if(i=B?!1:await this.setPreviewNavigationCollapse(this.previewCollapseSidebar),B&&await this.setPreviewNavigationCollapse(!1),e!==this.previewSyncGeneration)return;if(A){const S=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,F=Math.max(C,S+this.visibleSpaceWidth()-v);P=this.allocateWorkspaceWidths(F,!0,m,h,p,n,f,d,w),this.setWorkspaceWidths(P.previewWidth,P.flyoutWidth,!0)}if(s||this.toggleAttribute("data-preview-validating",!0),this.setPreviewLayoutState(!0,!0),await this.updateComplete,e!==this.previewSyncGeneration)return;const G=this.visibleSpaceWidth();P=this.allocateWorkspaceWidths(G,!0,m,h,p,n,f,d,w),this.setWorkspaceWidths(P.previewWidth,P.flyoutWidth,L);const q=await this.candidateFitsAfterLayoutSettles(e,()=>this.previewFitsWithinPage(v,h,p,m,n,f),()=>this.workspaceCandidateIsMeasurable(!0,m));if(q===null)return;q?this.toggleAttribute("data-preview-validating",!1):(this.setPreviewLayoutState(!1,!1),this.setWorkspaceWidths(0,m?n:0),i=!1,m&&await this.promoteFlyoutToOverlay())}finally{e===this.previewSyncGeneration&&!i&&await this.setPreviewNavigationCollapse(!1),e===this.previewSyncGeneration&&(this.toggleAttribute("data-preview-measuring",!1),this.toggleAttribute("data-preview-validating",!1),this.requestUpdate())}}setupPreviewLayoutObserver(){if(this.isConnected){if(!this.previewMediaQuery&&typeof window.matchMedia=="function"&&(this.previewMediaQuery=window.matchMedia(X),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.resizeStepProbe,this.resizeLargeStepProbe])t.value&&this.previewResizeObserver.observe(t.value)}this.schedulePreviewLayout(!0)}}footerElementProvidesLandmark(e){return e.matches(D)||e.querySelector(D)!==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"))&&Q().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)),l=this.shadowRoot?.querySelector(".esp-page-main")?.getBoundingClientRect().width??0,g=this.hasAttribute("flyout-open"),h=l+this.allocatedPreviewWidth,d=i.minimum<=s+c,p=g&&d?Math.max(0,this.allocatedFlyoutWidth-a):0,n=Math.max(o,h-i.maximum),w=Math.max(n,Math.max(o,h-i.minimum)+p);let f,v;if(this.previewVisible){const u=this.previewFlyoutResizeRange(),m=this.allocatedPreviewWidth+this.allocatedFlyoutWidth,C=u.minimum<=s+c?Math.max(0,l-o):0;f=Math.max(a,m-u.maximum),v=Math.max(f,Math.min(r,m-u.minimum+C))}else{const u=this.flyoutOnlyResizeRange();f=u.minimum,v=u.maximum}const y=this.previewVisible?"preview-flyout-resize-handle":"main-flyout-resize-handle",b=this.previewVisible?"Resize preview and help panes":"Resize help pane";return j`
2
+ <div part="wrapper" class="esp-page ${Y({"fixed-menus":e,"fixed-header":e,"sticky-header":t})}">
3
3
  <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
4
4
  <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
5
5
  <div part="surface" class="esp-page-surface" aria-hidden="true"></div>
@@ -23,7 +23,7 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
23
23
  <div class="sticky-wrapper">
24
24
  <slot
25
25
  name="flyout"
26
- ${R(this.flyoutSlot)}
26
+ ${M(this.flyoutSlot)}
27
27
  @slotchange=${()=>this.syncFlyoutState()}
28
28
  ></slot>
29
29
  </div>
@@ -31,49 +31,59 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
31
31
  <div
32
32
  class="esp-page-preview-width-probe esp-page-preview-min-width-probe"
33
33
  aria-hidden="true"
34
- ${R(this.previewMinWidthProbe)}
34
+ ${M(this.previewMinWidthProbe)}
35
+ ></div>
36
+ <div
37
+ class="esp-page-preview-default-width-probe"
38
+ aria-hidden="true"
39
+ ${M(this.previewDefaultWidthProbe)}
35
40
  ></div>
36
41
  <div
37
42
  class="esp-page-preview-max-width-probe"
38
43
  aria-hidden="true"
39
- ${R(this.previewMaxWidthProbe)}
44
+ ${M(this.previewMaxWidthProbe)}
40
45
  ></div>
41
46
  <div
42
47
  class="esp-page-flyout-min-width-probe"
43
48
  aria-hidden="true"
44
- ${R(this.flyoutMinWidthProbe)}
49
+ ${M(this.flyoutMinWidthProbe)}
50
+ ></div>
51
+ <div
52
+ class="esp-page-flyout-default-width-probe"
53
+ aria-hidden="true"
54
+ ${M(this.flyoutDefaultWidthProbe)}
45
55
  ></div>
46
56
  <div
47
57
  class="esp-page-flyout-max-width-probe"
48
58
  aria-hidden="true"
49
- ${R(this.flyoutMaxWidthProbe)}
59
+ ${M(this.flyoutMaxWidthProbe)}
50
60
  ></div>
51
61
  <div
52
62
  class="esp-page-preview-main-min-probe esp-page-main-min-width-probe"
53
63
  aria-hidden="true"
54
- ${R(this.mainMinWidthProbe)}
64
+ ${M(this.mainMinWidthProbe)}
55
65
  ></div>
56
66
  <div
57
67
  class="esp-page-main-max-width-probe"
58
68
  aria-hidden="true"
59
- ${R(this.mainMaxWidthProbe)}
69
+ ${M(this.mainMaxWidthProbe)}
60
70
  ></div>
61
71
  <div
62
72
  class="esp-page-resize-step-probe"
63
73
  aria-hidden="true"
64
- ${R(this.resizeStepProbe)}
74
+ ${M(this.resizeStepProbe)}
65
75
  ></div>
66
76
  <div
67
77
  class="esp-page-resize-large-step-probe"
68
78
  aria-hidden="true"
69
- ${R(this.resizeLargeStepProbe)}
79
+ ${M(this.resizeLargeStepProbe)}
70
80
  ></div>
71
- <div class="esp-page-preview-space" ${R(this.previewSpace)}>
81
+ <div class="esp-page-preview-space" ${M(this.previewSpace)}>
72
82
  <aside part="preview" class="esp-page-preview" aria-label=${this.previewLabel}>
73
83
  <div part="preview-content" class="sticky-wrapper">
74
84
  <slot
75
85
  name="preview"
76
- ${R(this.previewSlot)}
86
+ ${M(this.previewSlot)}
77
87
  @slotchange=${this.schedulePreviewLayout}
78
88
  ></slot>
79
89
  </div>
@@ -86,44 +96,44 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
86
96
  role="separator"
87
97
  aria-orientation="vertical"
88
98
  aria-label="Resize main pane"
89
- aria-valuemin=${Math.round(h)}
90
- aria-valuemax=${Math.round(u)}
91
- aria-valuenow=${Math.round(n)}
99
+ aria-valuemin=${Math.round(n)}
100
+ aria-valuemax=${Math.round(w)}
101
+ aria-valuenow=${Math.round(l)}
92
102
  tabindex="0"
93
- @pointerdown=${f=>this.onWorkspaceResizePointerDown("main-preview",f)}
103
+ @pointerdown=${u=>this.onWorkspaceResizePointerDown("main-preview",u)}
94
104
  @pointermove=${this.onWorkspaceResizePointerMove}
95
105
  @pointerup=${this.onWorkspaceResizePointerEnd}
96
106
  @pointercancel=${this.onWorkspaceResizePointerEnd}
97
107
  @lostpointercapture=${this.onWorkspaceResizePointerEnd}
98
- @keydown=${f=>this.onWorkspaceResizeKeyDown("main-preview",f)}
108
+ @keydown=${u=>this.onWorkspaceResizeKeyDown("main-preview",u)}
99
109
  @blur=${this.onWorkspaceResizeBlur}
100
110
  ></div>
101
111
  <div
102
- part=${W}
112
+ part=${y}
103
113
  class="esp-page-workspace-resize-handle esp-page-preview-flyout-resize-handle"
104
114
  role="separator"
105
115
  aria-orientation="vertical"
106
- aria-label=${y}
107
- aria-valuemin=${Math.round(g)}
108
- aria-valuemax=${Math.round(b)}
116
+ aria-label=${b}
117
+ aria-valuemin=${Math.round(f)}
118
+ aria-valuemax=${Math.round(v)}
109
119
  aria-valuenow=${Math.round(this.allocatedFlyoutWidth)}
110
120
  tabindex="0"
111
- @pointerdown=${f=>this.onWorkspaceResizePointerDown("preview-flyout",f)}
121
+ @pointerdown=${u=>this.onWorkspaceResizePointerDown("preview-flyout",u)}
112
122
  @pointermove=${this.onWorkspaceResizePointerMove}
113
123
  @pointerup=${this.onWorkspaceResizePointerEnd}
114
124
  @pointercancel=${this.onWorkspaceResizePointerEnd}
115
125
  @lostpointercapture=${this.onWorkspaceResizePointerEnd}
116
- @keydown=${f=>this.onWorkspaceResizeKeyDown("preview-flyout",f)}
126
+ @keydown=${u=>this.onWorkspaceResizeKeyDown("preview-flyout",u)}
117
127
  @blur=${this.onWorkspaceResizeBlur}
118
128
  ></div>
119
129
  </div>
120
- <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":G}>
121
- <slot name="footer" ${R(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
130
+ <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":H}>
131
+ <slot name="footer" ${M(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
122
132
  </div>
123
- <div id="dialog-drop-zone" ${R(this.dialogZone)}></div>
133
+ <div id="dialog-drop-zone" ${M(this.dialogZone)}></div>
124
134
  <esp-toaster></esp-toaster>
125
135
  </div>
126
- `}};w.styles=[...q.styles,D`
136
+ `}};W.styles=[...I.styles,V`
127
137
  :host {
128
138
  --_esp-page-resolved-max-width: var(
129
139
  --esp-page-main-max-width,
@@ -215,11 +225,11 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
215
225
  }
216
226
 
217
227
 
218
- :host([flyout-open][data-workspace-preferred]) {
228
+ :host([flyout-open][data-workspace-targeted]) {
219
229
  --_esp-page-flyout-min: var(--_esp-page-flyout-used-width);
220
230
  }
221
231
 
222
- :host([preview-reclaiming][data-workspace-preferred]) {
232
+ :host([preview-reclaiming][data-workspace-targeted]) {
223
233
  --_esp-page-preview-min: var(--_esp-page-preview-used-width);
224
234
  }
225
235
 
@@ -588,8 +598,10 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
588
598
 
589
599
 
590
600
  > .esp-page-preview-min-width-probe,
601
+ > .esp-page-preview-default-width-probe,
591
602
  > .esp-page-preview-max-width-probe,
592
603
  > .esp-page-flyout-min-width-probe,
604
+ > .esp-page-flyout-default-width-probe,
593
605
  > .esp-page-flyout-max-width-probe,
594
606
  > .esp-page-main-min-width-probe,
595
607
  > .esp-page-main-max-width-probe,
@@ -610,6 +622,10 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
610
622
  inline-size: var(--_esp-page-preview-resolved-max-width);
611
623
  }
612
624
 
625
+ > .esp-page-preview-default-width-probe {
626
+ inline-size: var(--esp-page-preview-default-width, 0px);
627
+ }
628
+
613
629
  > .esp-page-flyout-min-width-probe {
614
630
  inline-size: var(--_esp-page-flyout-resolved-min-width);
615
631
  }
@@ -618,6 +634,10 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
618
634
  inline-size: var(--_esp-page-flyout-resolved-max-width);
619
635
  }
620
636
 
637
+ > .esp-page-flyout-default-width-probe {
638
+ inline-size: var(--esp-page-flyout-default-width, 0px);
639
+ }
640
+
621
641
  > .esp-page-main-min-width-probe {
622
642
  inline-size: var(--_esp-page-main-min-width);
623
643
  }
@@ -784,4 +804,4 @@ var k=function(F,e,t,i){var s=arguments.length,a=s<3?e:i===null?i=Object.getOwnP
784
804
  transition: none;
785
805
  }
786
806
  }
787
- `],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};
807
+ `],x([T()],W.prototype,"footerWrapperIsLandmark",void 0),x([T()],W.prototype,"allocatedPreviewWidth",void 0),x([T()],W.prototype,"allocatedFlyoutWidth",void 0),x([z({reflect:!0})],W.prototype,"kind",void 0),x([z({reflect:!0})],W.prototype,"align",void 0),x([z({type:Boolean,reflect:!0})],W.prototype,"contained",void 0),x([z({attribute:"header-position",reflect:!0})],W.prototype,"headerPosition",void 0),x([z({attribute:"fixed-menus",type:Boolean,reflect:!0})],W.prototype,"fixedMenus",void 0),x([z({attribute:"preview-open",type:Boolean,reflect:!0})],W.prototype,"previewOpen",void 0),x([z({attribute:"preview-label",type:String,reflect:!0})],W.prototype,"previewLabel",void 0),x([z({attribute:"preview-collapse-sidebar",type:Boolean,reflect:!0})],W.prototype,"previewCollapseSidebar",void 0),x([z({attribute:"workspace-resizable",type:Boolean,reflect:!0})],W.prototype,"workspaceResizable",void 0),x([z({attribute:"preview-visible",type:Boolean,reflect:!0})],W.prototype,"previewVisible",void 0),x([z({attribute:"preview-reclaiming",type:Boolean,reflect:!0})],W.prototype,"previewReclaiming",void 0),W=x([U("esp-page")],W);export{W as EspalierPage};
@@ -1615,6 +1615,12 @@
1615
1615
  "component": "esp-page",
1616
1616
  "description": "Offset reserved for fixed headers. Defaults to `var(--esp-header-height)`."
1617
1617
  },
1618
+ {
1619
+ "name": "--esp-page-flyout-default-width",
1620
+ "category": "component",
1621
+ "component": "esp-page",
1622
+ "description": "Initial automatic in-grid help target, clamped between the help minimum and maximum. When unset, the established flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target."
1623
+ },
1618
1624
  {
1619
1625
  "name": "--esp-page-flyout-max-width",
1620
1626
  "category": "component",
@@ -1675,6 +1681,12 @@
1675
1681
  "component": "esp-page",
1676
1682
  "description": "Leading tear-off edge between main and preview. Defaults to `1px dotted var(--esp-color-border)`."
1677
1683
  },
1684
+ {
1685
+ "name": "--esp-page-preview-default-width",
1686
+ "category": "component",
1687
+ "component": "esp-page",
1688
+ "description": "Initial automatic preview target, clamped between the preview minimum and maximum. When unset, the established preview-first flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target."
1689
+ },
1678
1690
  {
1679
1691
  "name": "--esp-page-preview-max-width",
1680
1692
  "category": "component",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taprootio/espalier",
3
- "version": "2.12.1",
3
+ "version": "2.13.0",
4
4
  "packageManager": "bun@1.3.12",
5
5
  "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
6
6
  "customElements": "custom-elements.json",