@taprootio/espalier 2.12.0 → 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,32 @@ 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
+
25
+ ## 2.12.1 — URL help flyout fixes
26
+
27
+ - Change contextual help flyouts to the normalized document title when “View
28
+ full document” expands the topic, while retaining the field anchor and
29
+ scrolling the requested section into view.
30
+ - Avoid repeating a matching leading document `h1` inside embedded
31
+ full-document help, and start each new unanchored document request at the top
32
+ of the flyout's own scroll surface.
33
+
8
34
  ## 2.12.0 — Resizable page workspaces
9
35
 
10
36
  - Add opt-in `esp-page workspace-resizable` separators for Main → Preview and
@@ -27630,6 +27630,30 @@
27630
27630
  }
27631
27631
  ]
27632
27632
  },
27633
+ {
27634
+ "kind": "method",
27635
+ "name": "resetFlyoutScroll",
27636
+ "privacy": "private",
27637
+ "return": {
27638
+ "type": {
27639
+ "text": "void"
27640
+ }
27641
+ },
27642
+ "parameters": [
27643
+ {
27644
+ "name": "flyout",
27645
+ "type": {
27646
+ "text": "EspalierFlyout"
27647
+ }
27648
+ },
27649
+ {
27650
+ "name": "content",
27651
+ "type": {
27652
+ "text": "HTMLElement | null"
27653
+ }
27654
+ }
27655
+ ]
27656
+ },
27633
27657
  {
27634
27658
  "kind": "method",
27635
27659
  "name": "publishState",
@@ -40092,6 +40116,10 @@
40092
40116
  "description": "Minimum preview width. Defaults to `22.5rem` (360px, a reasonable mobile-device surface).",
40093
40117
  "name": "--esp-page-preview-min-width"
40094
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
+ },
40095
40123
  {
40096
40124
  "description": "Maximum preview width. Defaults to `48rem`. Preview receives flexible trailing space before help grows.",
40097
40125
  "name": "--esp-page-preview-max-width"
@@ -40100,6 +40128,10 @@
40100
40128
  "description": "Minimum in-grid help width. Defaults to `20rem`.",
40101
40129
  "name": "--esp-page-flyout-min-width"
40102
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
+ },
40103
40135
  {
40104
40136
  "description": "Maximum help width and overlay drawer cap before the `85vw` viewport cap. Defaults to `30rem`.",
40105
40137
  "name": "--esp-page-flyout-max-width"
@@ -40253,11 +40285,11 @@
40253
40285
  "name": "right"
40254
40286
  },
40255
40287
  {
40256
- "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.",
40257
40289
  "name": "preview"
40258
40290
  },
40259
40291
  {
40260
- "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.",
40261
40293
  "name": "flyout"
40262
40294
  },
40263
40295
  {
@@ -40300,6 +40332,11 @@
40300
40332
  "name": "previewMinWidthProbe",
40301
40333
  "privacy": "private"
40302
40334
  },
40335
+ {
40336
+ "kind": "field",
40337
+ "name": "previewDefaultWidthProbe",
40338
+ "privacy": "private"
40339
+ },
40303
40340
  {
40304
40341
  "kind": "field",
40305
40342
  "name": "previewMaxWidthProbe",
@@ -40310,6 +40347,11 @@
40310
40347
  "name": "flyoutMinWidthProbe",
40311
40348
  "privacy": "private"
40312
40349
  },
40350
+ {
40351
+ "kind": "field",
40352
+ "name": "flyoutDefaultWidthProbe",
40353
+ "privacy": "private"
40354
+ },
40313
40355
  {
40314
40356
  "kind": "field",
40315
40357
  "name": "flyoutMaxWidthProbe",
@@ -40767,7 +40809,7 @@
40767
40809
  }
40768
40810
  },
40769
40811
  {
40770
- "name": "enforcePreference",
40812
+ "name": "enforceTarget",
40771
40813
  "default": "false"
40772
40814
  }
40773
40815
  ]
@@ -40913,6 +40955,30 @@
40913
40955
  }
40914
40956
  ]
40915
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
+ },
40916
40982
  {
40917
40983
  "kind": "method",
40918
40984
  "name": "allocateWorkspaceWidths",
@@ -40964,6 +41030,20 @@
40964
41030
  "type": {
40965
41031
  "text": "number"
40966
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
+ }
40967
41047
  }
40968
41048
  ]
40969
41049
  },
@@ -1,5 +1,5 @@
1
- var d=function(r,e,t,n){var o=arguments.length,s=o<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,i;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(r,e,t,n);else for(var a=r.length-1;a>=0;a--)(i=r[a])&&(s=(o<3?i(s):o>3?i(e,t,s):i(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as p,nothing as b}from"lit";import{customElement as f}from"lit/decorators.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";import{getEspBus as c}from"../shared/bus-events.js";import{publishFlyoutRequest as m}from"../shared/flyout-events.js";import{openHelpInNewTab as h}from"../shared/help-events.js";import{createHelpDocumentView as C,createHelpStatusView as u,normalizeHelpDocument as R}from"./help-document.js";let l=class extends v{constructor(){super(...arguments),this.cache=new Map,this.warnedMissingAnchors=new Set,this.activeRequest=null,this.activeController=null,this.activeContent=null,this.contentObserver=new MutationObserver(()=>{this.activeContent&&!this.activeContent.isConnected&&this.endActiveRequest()}),this.requestSequence=0,this.subscribed=!1,this.boundRequest=e=>{this.handleRequest(e)},this.boundCloseRequest=e=>{let t;try{t=new URL(e.src,document.baseURI).href}catch{return}if(!this.activeRequest||t!==this.activeRequest.src||(e.anchor??"")!==(this.activeRequest.anchor??""))return;const n=this.activeContent?.parentElement;n?.localName==="esp-flyout"&&n.close("programmatic")},this.boundFlyoutClosed=e=>{const t=e.target;!(t instanceof Element)||!this.activeContent||t.contains(this.activeContent)&&this.endActiveRequest()}}connectedCallback(){super.connectedCallback(),this.subscribed||(c().subscribe("request-help",this.boundRequest),c().subscribe("close-help",this.boundCloseRequest),this.subscribed=!0),document.addEventListener("flyout-closed",this.boundFlyoutClosed)}disconnectedCallback(){this.subscribed&&(c().unsubscribe("request-help",this.boundRequest),c().unsubscribe("close-help",this.boundCloseRequest),this.subscribed=!1),document.removeEventListener("flyout-closed",this.boundFlyoutClosed),this.endActiveRequest(),super.disconnectedCallback()}render(){return b}async handleRequest(e){const t=++this.requestSequence;this.activeController?.abort();const n=new AbortController;if(this.activeController=n,this.activeRequest=e,this.publishState(e,!0),this.showInFlyout(e,{heading:e.title??"Help",content:u({message:"Loading help\u2026"})})===0){this.endActiveRequest(),h(e);return}try{const s=this.cache.get(e.src)??await this.fetchDocument(e,n);if(t!==this.requestSequence||n.signal.aborted)return;if(!this.activeContent?.isConnected){this.endActiveRequest();return}this.cache.set(e.src,s);const i=C(s,e.anchor);this.warnForMissingAnchor(e,i.anchorFound),this.showInFlyout(e,{heading:e.title??i.topicTitle??s.title??"Help",content:i.element,fullHeight:i.fullDocument})}catch(s){if(t!==this.requestSequence||n.signal.aborted||w(s))return;if(!this.activeContent?.isConnected){this.endActiveRequest();return}this.showInFlyout(e,{heading:e.title??"Help unavailable",content:u({message:"Help could not be loaded.",actionLabel:"Open help document",onAction:()=>h(e)})})}finally{t===this.requestSequence&&(this.activeController=null)}}async fetchDocument(e,t){const n=await fetch(e.src,{signal:t.signal});if(!n.ok)throw new Error(`Help request failed with HTTP ${n.status}.`);return R(await n.text(),n.url||e.src)}showInFlyout(e,t){this.contentObserver.disconnect(),this.activeContent=t.content instanceof HTMLElement?t.content:null;const n=m({...t,anchor:e.placementTarget??e.trigger,returnFocusTo:e.trigger}),o=this.activeContent?.parentElement;return n&&o&&this.contentObserver.observe(o,{childList:!0}),n?1:0}publishState(e,t){c().publish("help-state-changed",{src:e.src,...e.anchor?{anchor:e.anchor}:{},open:t})}publishClosedState(){this.activeRequest&&(this.publishState(this.activeRequest,!1),this.activeRequest=null)}endActiveRequest(){(this.activeRequest||this.activeController)&&++this.requestSequence,this.activeController?.abort(),this.activeController=null,this.contentObserver.disconnect(),this.activeContent=null,this.publishClosedState()}warnForMissingAnchor(e,t){if(!e.anchor||t)return;const n=`${e.src}#${e.anchor}`;this.warnedMissingAnchors.has(n)||(this.warnedMissingAnchors.add(n),console.warn(`Help anchor "${e.anchor}" was not found in ${e.src}; showing the full document.`))}};l.styles=[p`
1
+ var p=function(r,e,t,n){var i=arguments.length,s=i<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(r,e,t,n);else for(var c=r.length-1;c>=0;c--)(o=r[c])&&(s=(i<3?o(s):i>3?o(e,t,s):o(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s};import{css as f,nothing as b}from"lit";import{customElement as v}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{getEspBus as l}from"../shared/bus-events.js";import{publishFlyoutRequest as C}from"../shared/flyout-events.js";import{openHelpInNewTab as u}from"../shared/help-events.js";import{createHelpDocumentView as R,createHelpStatusView as d,normalizeHelpDocument as w}from"./help-document.js";let a=class extends m{constructor(){super(...arguments),this.cache=new Map,this.warnedMissingAnchors=new Set,this.activeRequest=null,this.activeController=null,this.activeContent=null,this.contentObserver=new MutationObserver(()=>{this.activeContent&&!this.activeContent.isConnected&&this.endActiveRequest()}),this.requestSequence=0,this.subscribed=!1,this.boundRequest=e=>{this.handleRequest(e)},this.boundCloseRequest=e=>{let t;try{t=new URL(e.src,document.baseURI).href}catch{return}if(!this.activeRequest||t!==this.activeRequest.src||(e.anchor??"")!==(this.activeRequest.anchor??""))return;const n=this.activeContent?.parentElement;n?.localName==="esp-flyout"&&n.close("programmatic")},this.boundFlyoutClosed=e=>{const t=e.target;!(t instanceof Element)||!this.activeContent||t.contains(this.activeContent)&&this.endActiveRequest()}}connectedCallback(){super.connectedCallback(),this.subscribed||(l().subscribe("request-help",this.boundRequest),l().subscribe("close-help",this.boundCloseRequest),this.subscribed=!0),document.addEventListener("flyout-closed",this.boundFlyoutClosed)}disconnectedCallback(){this.subscribed&&(l().unsubscribe("request-help",this.boundRequest),l().unsubscribe("close-help",this.boundCloseRequest),this.subscribed=!1),document.removeEventListener("flyout-closed",this.boundFlyoutClosed),this.endActiveRequest(),super.disconnectedCallback()}render(){return b}async handleRequest(e){const t=++this.requestSequence;this.activeController?.abort();const n=new AbortController;if(this.activeController=n,this.activeRequest=e,this.publishState(e,!0),this.showInFlyout(e,{heading:e.title??"Help",content:d({message:"Loading help\u2026"})})===0){this.endActiveRequest(),u(e);return}try{const s=this.cache.get(e.src)??await this.fetchDocument(e,n);if(t!==this.requestSequence||n.signal.aborted)return;if(!this.activeContent?.isConnected){this.endActiveRequest();return}this.cache.set(e.src,s);const o=R(s,e.anchor,{onFullDocument:c=>{const h=c.parentElement;h?.localName==="esp-flyout"&&(h.heading=s.title??"Help")}});this.warnForMissingAnchor(e,o.anchorFound),this.showInFlyout(e,{heading:e.title??o.topicTitle??s.title??"Help",content:o.element,fullHeight:o.fullDocument})}catch(s){if(t!==this.requestSequence||n.signal.aborted||g(s))return;if(!this.activeContent?.isConnected){this.endActiveRequest();return}this.showInFlyout(e,{heading:e.title??"Help unavailable",content:d({message:"Help could not be loaded.",actionLabel:"Open help document",onAction:()=>u(e)})})}finally{t===this.requestSequence&&(this.activeController=null)}}async fetchDocument(e,t){const n=await fetch(e.src,{signal:t.signal});if(!n.ok)throw new Error(`Help request failed with HTTP ${n.status}.`);return w(await n.text(),n.url||e.src)}showInFlyout(e,t){this.contentObserver.disconnect(),this.activeContent=t.content instanceof HTMLElement?t.content:null;const n=C({...t,anchor:e.placementTarget??e.trigger,returnFocusTo:e.trigger}),i=this.activeContent?.parentElement;return n&&i&&(!e.anchor&&i.localName==="esp-flyout"&&this.resetFlyoutScroll(i,this.activeContent),this.contentObserver.observe(i,{childList:!0})),n?1:0}resetFlyoutScroll(e,t){const n=()=>{if(this.activeContent!==t)return;const i=e.shadowRoot?.querySelector('[part="content"]')??null;i&&(i.scrollTop=0)};n(),e.updateComplete.then(n)}publishState(e,t){l().publish("help-state-changed",{src:e.src,...e.anchor?{anchor:e.anchor}:{},open:t})}publishClosedState(){this.activeRequest&&(this.publishState(this.activeRequest,!1),this.activeRequest=null)}endActiveRequest(){(this.activeRequest||this.activeController)&&++this.requestSequence,this.activeController?.abort(),this.activeController=null,this.contentObserver.disconnect(),this.activeContent=null,this.publishClosedState()}warnForMissingAnchor(e,t){if(!e.anchor||t)return;const n=`${e.src}#${e.anchor}`;this.warnedMissingAnchors.has(n)||(this.warnedMissingAnchors.add(n),console.warn(`Help anchor "${e.anchor}" was not found in ${e.src}; showing the full document.`))}};a.styles=[f`
2
2
  :host {
3
3
  display: none;
4
4
  }
5
- `],l=d([f("esp-help-provider")],l);function w(r){return r instanceof DOMException&&r.name==="AbortError"}export{l as EspalierHelpProvider};
5
+ `],a=p([v("esp-help-provider")],a);function g(r){return r instanceof DOMException&&r.name==="AbortError"}export{a as EspalierHelpProvider};
@@ -1,4 +1,4 @@
1
- import"../button/esp-button.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as w}from"../shared/flyout-events.js";import{decodeFragment as E}from"../shared/help-events.js";const v=new Set(["A","ABBR","B","BLOCKQUOTE","BR","CODE","DD","DEL","DETAILS","DL","DT","EM","FIGCAPTION","FIGURE","H1","H2","H3","H4","H5","H6","HR","I","IMG","KBD","LI","MARK","OL","P","PRE","Q","S","SAMP","SMALL","STRONG","SUB","SUMMARY","SUP","TABLE","TBODY","TD","TFOOT","TH","THEAD","TR","U","UL","VAR"]),N=new Set(["SCRIPT","STYLE","TEMPLATE","NOSCRIPT"]),y={A:["href"],DETAILS:["open"],IMG:["src","alt","width","height"],LI:["value"],OL:["start","reversed"],TD:["colspan","rowspan"],TH:["colspan","rowspan","scope"]},g=`
1
+ import"../button/esp-button.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as D}from"../shared/flyout-events.js";import{decodeFragment as T}from"../shared/help-events.js";const y=new Set(["A","ABBR","B","BLOCKQUOTE","BR","CODE","DD","DEL","DETAILS","DL","DT","EM","FIGCAPTION","FIGURE","H1","H2","H3","H4","H5","H6","HR","I","IMG","KBD","LI","MARK","OL","P","PRE","Q","S","SAMP","SMALL","STRONG","SUB","SUMMARY","SUP","TABLE","TBODY","TD","TFOOT","TH","THEAD","TR","U","UL","VAR"]),C=new Set(["SCRIPT","STYLE","TEMPLATE","NOSCRIPT","TITLE"]),H={A:["href"],DETAILS:["open"],IMG:["src","alt","width","height"],LI:["value"],OL:["start","reversed"],TD:["colspan","rowspan"],TH:["colspan","rowspan","scope"]},g=`
2
2
  :host {
3
3
  color: var(--esp-color-text);
4
4
  display: block;
@@ -49,4 +49,4 @@ import"../button/esp-button.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as w}fro
49
49
  [part="actions"] {
50
50
  margin-block-start: var(--esp-size-padding);
51
51
  }
52
- `;function P(e,t={}){const n=t.helpUrl?.trim()??"",o=n?"":H(e),r=n||o;if(!r)return null;let c;try{c=new URL(r,e.ownerDocument.baseURI)}catch{return null}const i=E(c.hash);c.hash="";const a=m(t.anchor,t.fallbackAnchor),s=n?m(i,a):m(a,i),u=new URL(c.href);return s&&(u.hash=s),{src:c.href,...s?{anchor:s}:{},href:u.href}}function k(e,t){const n=new URL(t,document.baseURI);n.hash="";const o=new DOMParser().parseFromString(e,"text/html"),r=o.querySelector("title")?.textContent?.trim()||void 0,c=document.createDocumentFragment();for(const i of[...o.body.childNodes])b(i,c,n.href);return{src:n.href,...r?{title:r}:{},body:c}}function D(e,t){const n=t?.trim()??"";if(!n)return{content:e.body.cloneNode(!0),anchorFound:!0,sectioned:!1};const o=T(e.body,n);if(!o)return{content:e.body.cloneNode(!0),anchorFound:!1,sectioned:!1};const r=A(o);if(!r||!o.parentNode)return{content:e.body.cloneNode(!0),anchorFound:!0,sectioned:!1};const c=document.createDocumentFragment();let i=o.nextSibling;for(;i;){if(i instanceof Element){const a=A(i);if(a&&a<=r)break}c.append(i.cloneNode(!0)),i=i.nextSibling}return{content:c,anchorFound:!0,sectioned:!0,heading:o.textContent?.trim()||void 0}}function B(e,t){const n=t?.trim()||void 0,o=D(e,n),r=document.createElement("section");r.dataset.espHelpDocument="";const c=r.attachShadow({mode:"open"}),i=document.createElement("style");i.textContent=g;const a=document.createElement("div");a.setAttribute("part","content");const s=document.createElement("div");s.setAttribute("part","actions");const u=d=>{a.replaceChildren(e.body.cloneNode(!0)),l?.setAttribute("disabled",""),l?.setAttribute("label","Full document"),r.dispatchEvent(new CustomEvent(w,{bubbles:!0,composed:!0})),d&&queueMicrotask(()=>S(a,d))};let l=null;return o.sectioned?(a.append(o.content),l=document.createElement("esp-button"),l.setAttribute("label","View full document"),l.setAttribute("collapsed",""),l.setAttribute("incognito",""),l.addEventListener("clicked",()=>u(n)),s.append(l)):a.append(o.content),a.addEventListener("click",d=>{const f=d.composedPath().find(L=>L instanceof HTMLAnchorElement)?.getAttribute("href")??"";if(!f)return;if(!f.startsWith("#")){d.preventDefault(),window.open(f,"_blank","noopener,noreferrer");return}d.preventDefault();const p=E(f);p&&(o.sectioned?u(p):S(a,p))}),c.append(i,a,s),{element:r,anchorFound:o.anchorFound,fullDocument:!o.sectioned,...o.heading?{topicTitle:o.heading}:{}}}function M(e){const t=document.createElement("section");t.dataset.espHelpStatus="";const n=t.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=g;const r=document.createElement("p");if(r.setAttribute("part","message"),r.textContent=e.message,n.append(o,r),e.actionLabel&&e.onAction){const c=document.createElement("div");c.setAttribute("part","actions");const i=document.createElement("esp-button");i.setAttribute("label",e.actionLabel),i.setAttribute("collapsed",""),i.addEventListener("clicked",e.onAction),c.append(i),n.append(c)}return t}function H(e){let t=e;const n=new Set;for(;t&&!n.has(t);){n.add(t);const o=t.getAttribute("help-src")?.trim()??"";if(o)return o;t=h(t)}return""}function h(e){if(e.assignedSlot)return e.assignedSlot;if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}function m(...e){for(const t of e){const n=t?.trim()??"";if(n)return n}}function b(e,t,n){if(e.nodeType===Node.TEXT_NODE){t.appendChild(document.createTextNode(e.textContent??""));return}if(!(e instanceof Element)||N.has(e.tagName))return;if(!v.has(e.tagName)){for(const r of[...e.childNodes])b(r,t,n);return}const o=document.createElement(e.tagName.toLowerCase());R(e,o,n);for(const r of[...e.childNodes])b(r,o,n);t.appendChild(o)}function R(e,t,n){const o=e.getAttribute("id")?.trim();o&&t.setAttribute("id",o);for(const r of y[e.tagName]??[]){if(!e.hasAttribute(r))continue;const c=e.getAttribute(r)??"",i=r==="href"||r==="src"?C(c,n):c;i!==null&&t.setAttribute(r,i)}}function C(e,t){if(!e||e.startsWith("#"))return e;try{const n=new URL(e,t);return["http:","https:","mailto:","tel:"].includes(n.protocol)?n.href:null}catch{return null}}function T(e,t){return[...e.querySelectorAll("[id]")].find(n=>n.id===t)??null}function A(e){const t=/^H([1-6])$/u.exec(e.tagName);return t?Number(t[1]):null}function S(e,t){const n=T(e,t);if(!n)return;const o=x(n);if(!o)return;const r=n.getBoundingClientRect().top,c=o.getBoundingClientRect().top;o.scrollTop+=r-c}function x(e){for(let t=h(e);t;t=h(t)){if(!(t instanceof HTMLElement))continue;const n=getComputedStyle(t).overflowY;if(n==="auto"||n==="scroll")return t}return null}export{B as createHelpDocumentView,M as createHelpStatusView,k as normalizeHelpDocument,P as resolveHelpTarget,D as selectHelpContent};
52
+ `;function M(e,t={}){const n=t.helpUrl?.trim()??"",o=n?"":R(e),r=n||o;if(!r)return null;let c;try{c=new URL(r,e.ownerDocument.baseURI)}catch{return null}const i=T(c.hash);c.hash="";const a=m(t.anchor,t.fallbackAnchor),l=n?m(i,a):m(a,i),d=new URL(c.href);return l&&(d.hash=l),{src:c.href,...l?{anchor:l}:{},href:d.href}}function _(e,t){const n=new URL(t,document.baseURI);n.hash="";const o=new DOMParser().parseFromString(e,"text/html"),r=o.querySelector("title")?.textContent?.trim()||void 0,c=document.createDocumentFragment();for(const i of[...o.body.childNodes])b(i,c,n.href);return{src:n.href,...r?{title:r}:{},body:c}}function x(e,t){const n=t?.trim()??"";if(!n)return{content:e.body.cloneNode(!0),anchorFound:!0,sectioned:!1};const o=A(e.body,n);if(!o)return{content:e.body.cloneNode(!0),anchorFound:!1,sectioned:!1};const r=S(o);if(!r||!o.parentNode)return{content:e.body.cloneNode(!0),anchorFound:!0,sectioned:!1};const c=document.createDocumentFragment();let i=o.nextSibling;for(;i;){if(i instanceof Element){const a=S(i);if(a&&a<=r)break}c.append(i.cloneNode(!0)),i=i.nextSibling}return{content:c,anchorFound:!0,sectioned:!0,heading:o.textContent?.trim()||void 0}}function G(e,t,n={}){const o=t?.trim()||void 0,r=x(e,o),c=document.createElement("section");c.dataset.espHelpDocument="";const i=c.attachShadow({mode:"open"}),a=document.createElement("style");a.textContent=g;const l=document.createElement("div");l.setAttribute("part","content");const d=document.createElement("div");d.setAttribute("part","actions");const E=u=>{l.replaceChildren(L(e)),s?.setAttribute("disabled",""),s?.setAttribute("label","Full document"),c.dispatchEvent(new CustomEvent(D,{bubbles:!0,composed:!0})),n.onFullDocument?.(c),u&&queueMicrotask(()=>N(l,u))};let s=null;return r.sectioned?(l.append(r.content),s=document.createElement("esp-button"),s.setAttribute("label","View full document"),s.setAttribute("collapsed",""),s.setAttribute("incognito",""),s.addEventListener("clicked",()=>E(o)),d.append(s)):l.append(L(e)),l.addEventListener("click",u=>{const f=u.composedPath().find(v=>v instanceof HTMLAnchorElement)?.getAttribute("href")??"";if(!f)return;if(!f.startsWith("#")){u.preventDefault(),window.open(f,"_blank","noopener,noreferrer");return}u.preventDefault();const p=T(f);p&&(r.sectioned?E(p):N(l,p))}),i.append(a,l,d),{element:c,anchorFound:r.anchorFound,fullDocument:!r.sectioned,...r.heading?{topicTitle:r.heading}:{}}}function V(e){const t=document.createElement("section");t.dataset.espHelpStatus="";const n=t.attachShadow({mode:"open"}),o=document.createElement("style");o.textContent=g;const r=document.createElement("p");if(r.setAttribute("part","message"),r.textContent=e.message,n.append(o,r),e.actionLabel&&e.onAction){const c=document.createElement("div");c.setAttribute("part","actions");const i=document.createElement("esp-button");i.setAttribute("label",e.actionLabel),i.setAttribute("collapsed",""),i.addEventListener("clicked",e.onAction),c.append(i),n.append(c)}return t}function R(e){let t=e;const n=new Set;for(;t&&!n.has(t);){n.add(t);const o=t.getAttribute("help-src")?.trim()??"";if(o)return o;t=h(t)}return""}function h(e){if(e.assignedSlot)return e.assignedSlot;if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}function m(...e){for(const t of e){const n=t?.trim()??"";if(n)return n}}function b(e,t,n){if(e.nodeType===Node.TEXT_NODE){t.appendChild(document.createTextNode(e.textContent??""));return}if(!(e instanceof Element)||C.has(e.tagName))return;if(!y.has(e.tagName)){for(const r of[...e.childNodes])b(r,t,n);return}const o=document.createElement(e.tagName.toLowerCase());F(e,o,n);for(const r of[...e.childNodes])b(r,o,n);t.appendChild(o)}function F(e,t,n){const o=e.getAttribute("id")?.trim();o&&t.setAttribute("id",o);for(const r of H[e.tagName]??[]){if(!e.hasAttribute(r))continue;const c=e.getAttribute(r)??"",i=r==="href"||r==="src"?I(c,n):c;i!==null&&t.setAttribute(r,i)}}function I(e,t){if(!e||e.startsWith("#"))return e;try{const n=new URL(e,t);return["http:","https:","mailto:","tel:"].includes(n.protocol)?n.href:null}catch{return null}}function A(e,t){return[...e.querySelectorAll("[id]")].find(n=>n.id===t)??null}function S(e){const t=/^H([1-6])$/u.exec(e.tagName);return t?Number(t[1]):null}function L(e){const t=e.body.cloneNode(!0),n=w(e.title);if(!n)return t;let o=t.firstChild;for(;o?.nodeType===Node.TEXT_NODE&&!o.textContent?.trim();)o=o.nextSibling;return o instanceof Element&&o.tagName==="H1"&&w(o.textContent)===n&&o.remove(),t}function w(e){return e?.replace(/\s+/gu," ").trim().toLowerCase()??""}function N(e,t){const n=A(e,t);if(!n)return;const o=U(n);if(!o)return;const r=n.getBoundingClientRect().top,c=o.getBoundingClientRect().top;o.scrollTop+=r-c}function U(e){for(let t=h(e);t;t=h(t)){if(!(t instanceof HTMLElement))continue;const n=getComputedStyle(t).overflowY;if(n==="auto"||n==="scroll")return t}return null}export{G as createHelpDocumentView,V as createHelpStatusView,_ as normalizeHelpDocument,M as resolveHelpTarget,x as selectHelpContent};
@@ -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.0",
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",