@taprootio/espalier 4.4.0 → 4.5.0

package/dist/page/workspace-geometry.js

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

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

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

package/dist/page/workspace-width.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",
@@ -341,6 +341,14 @@
       "types": "./dist/shared/bus-events.d.ts",
       "import": "./dist/shared/bus-events.js"
     },
+    "./shared/events": {
+      "types": "./dist/shared/events.d.ts",
+      "import": "./dist/shared/events.js"
+    },
+    "./shared/toast-events": {
+      "types": "./dist/shared/toast-events.d.ts",
+      "import": "./dist/shared/toast-events.js"
+    },
     "./espalier.token-manifest.json": "./espalier.token-manifest.json",
     "./css/fonts/font-definitions.json": "./css/fonts/font-definitions.json",
     "./css/fonts/font-fallback-profiles.json": "./css/fonts/font-fallback-profiles.json",