@taprootio/espalier 4.10.0 → 4.11.0

package/dist/image-upload/esp-image-upload.d.ts

@@ -165,6 +165,13 @@ export declare class EspalierImageUpload extends EspalierElementBase {
      * @type {number}
      */
     maxImagesPerRow?: number;
+    /**
+     * Maximum preview-row height as a percentage of the layout viewport. Values
+     * outside the inclusive integer range `1…100` fall back to 90.
+     *
+     * @type {number}
+     */
+    maxRowHeightVh: number;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/dist/image-upload/esp-image-upload.js

@@ -1,25 +1,25 @@
-var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(v,e,t,i);else for(var r=v.length-1;r>=0;r--)(l=v[r])&&(s=(n<3?l(s):n>3?l(e,t,s):l(e,t))||s);return n>3&&s&&Object.defineProperty(e,t,s),s},_;import{css as D,html as m}from"lit";import{customElement as A,property as S,state as w}from"lit/decorators.js";import{createRef as b,ref as x}from"lit/directives/ref.js";import"./esp-image-preview.js";import{classMap as y}from"lit/directives/class-map.js";import{getImageDetails as R,releasePreviewUrl as I}from"./image-helpers.js";const k=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+var f=function(_,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(_,e,t,i);else for(var n=_.length-1;n>=0;n--)(d=_[n])&&(r=(o<3?d(r):o>3?d(e,t,r):d(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r},m;import{css as A,html as w}from"lit";import{customElement as R,property as x,state as b}from"lit/decorators.js";import{createRef as I,ref as E}from"lit/directives/ref.js";import"./esp-image-preview.js";import{classMap as P}from"lit/directives/class-map.js";import{getImageDetails as M,releasePreviewUrl as y}from"./image-helpers.js";const U=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M11.911 3.634a2 2 0 0 1 1.089 1.78l.001 2.586h6.999a2 2 0 0 1 2 2v4l-.005 .15a2 2 0 0 1 -1.995 1.85l-6.999 -.001l-.001 2.587a2 2 0 0 1 -3.414 1.414l-6.586 -6.586a2 2 0 0 1 0 -2.828l6.586 -6.586a2 2 0 0 1 2.18 -.434l.145 .068z" />
-</svg>`,C=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+</svg>`,k=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M12.089 3.634a2 2 0 0 0 -1.089 1.78l-.001 2.586h-6.999a2 2 0 0 0 -2 2v4l.005 .15a2 2 0 0 0 1.995 1.85l6.999 -.001l.001 2.587a2 2 0 0 0 3.414 1.414l6.586 -6.586a2 2 0 0 0 0 -2.828l-6.586 -6.586a2 2 0 0 0 -2.18 -.434l-.145 .068z" />
-</svg>`;import{EspalierElementBase as P}from"../shared/esp-element-base.js";import{calculatePhotoLayout as M}from"../shared/justified-layout.js";import{ESP_EVENTS as f}from"../shared/events.js";const E=220,U=4,L=8e3;let p=_=class extends P{constructor(){super(...arguments),this.uploadInput=b(),this.previewsDiv=b(),this.dropAreaDiv=b(),this.draggingOver=!1,this.uploadedImages=[],this.accept="image/jpeg, image/png, image/webp",this._rejectionNotice="",this._uploadState=new WeakMap,this._selectionGeneration=0,this._chromeWidth=null,this._resizeObserver=new ResizeObserver(()=>{this._chromeWidth=null,this.requestUpdate()}),this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragStartX=0,this._dragStartY=0,this._dragActive=!1,this._ghostEl=null,this._ghostHalfW=0,this._ghostHalfH=0,this._arrowEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._savedBodyUserSelect="",this._handleDragPointerDown=e=>{if(e.button!==0||this._dragPointerId!==null||e.composedPath().some(n=>n instanceof HTMLElement&&(n.tagName==="BUTTON"||n.tagName==="ESP-BUTTON")))return;const i=this._getPreviewIndex(e);i!==null&&(this._dragPointerId=e.pointerId,this._dragSourceIndex=i,this._dragStartX=e.clientX,this._dragStartY=e.clientY,this._dragActive=!1,document.addEventListener("pointermove",this._onDocPointerMove),document.addEventListener("pointerup",this._onDocPointerUp),document.addEventListener("pointercancel",this._onDocPointerUp))},this._onDocPointerMove=e=>{if(this._dragSourceIndex===null||e.pointerId!==this._dragPointerId)return;const t=e.clientX-this._dragStartX,i=e.clientY-this._dragStartY;if(!this._dragActive){if(Math.sqrt(t*t+i*i)<_._DRAG_THRESHOLD)return;this._dragActive=!0,this._createGhost(e.clientX,e.clientY);const r=this.shadowRoot?.querySelectorAll("esp-image-preview");r&&(this._cachedPreviews=Array.from(r).map(o=>({el:o,rect:o.getBoundingClientRect()})),this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity="0.3")),this._savedBodyUserSelect=document.body.style.userSelect,document.body.style.userSelect="none",this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="none")}this._ghostEl&&(this._ghostEl.style.transform=`translate(${e.clientX-this._ghostHalfW}px, ${e.clientY-this._ghostHalfH}px)`);const n=this._cachedPreviews;if(!n||n.length===0)return;let s=null,l=!1;for(let r=0;r<n.length;r++){const o=n[r].rect;if(e.clientX>=o.left&&e.clientX<=o.right&&e.clientY>=o.top&&e.clientY<=o.bottom){s=r,l=e.clientX>o.left+o.width/2;break}}if(s===null){let r=1/0;for(let o=0;o<n.length;o++){const a=n[o].rect,d=e.clientX-(a.left+a.width/2),h=e.clientY-(a.top+a.height/2),c=d*d+h*h;c<r&&(r=c,s=o)}if(s!==null){const o=n[s].rect;l=e.clientX>o.left+o.width/2}}s!==null&&(this._dragOverIndex=l?s+1:s,!(this._lastDropHit&&this._lastDropHit.index===s&&this._lastDropHit.after===l)&&(this._lastDropHit={index:s,after:l},this._updateDropTargets(n.map(r=>r.el),s,l)))},this._onDocPointerUp=e=>{if(e.pointerId===this._dragPointerId){if(this._dragActive&&this._dragSourceIndex!==null&&this._dragOverIndex!==null&&this._dragSourceIndex!==this._dragOverIndex&&this._dragSourceIndex+1!==this._dragOverIndex){const t=[...this.uploadedImages],[i]=t.splice(this._dragSourceIndex,1),n=this._dragOverIndex>this._dragSourceIndex?this._dragOverIndex-1:this._dragOverIndex;t.splice(n,0,i),this.uploadedImages=t,this.dispatchEvent(new CustomEvent(f.IMAGE_UPLOAD_IMAGES_REORDERED,{detail:{images:this.uploadedImages},bubbles:!0,composed:!0}))}this._clearDragState()}},this._arrowColor=null,this.filesSelected=async e=>{const t=[],i=[];for(const d of e)(this._isAccepted(d)?t:i).push(d);if(!t.length){i.length&&this._reportRejectedFiles({unsupported:i,unreadable:[]});return}const n=this._selectionGeneration,s=Math.round(E*Math.min(globalThis.devicePixelRatio||1,2)),l=new Array(t.length).fill(null),r=[];let o=0;const a=async()=>{for(;o<t.length;){const d=o++,h=t[d];try{const c=await R(h,{thumbnailHeight:s});if(n!==this._selectionGeneration){I(c);continue}this._addSelectedImage(l,d,c)}catch{r.push(h)}}};await Promise.all(Array.from({length:Math.min(U,t.length)},()=>a())),(i.length||r.length)&&n===this._selectionGeneration&&this._reportRejectedFiles({unsupported:i,unreadable:r})},this._makeCallbacks=e=>({onProgress:t=>{const i=this._uploadState.get(e);i&&(i.progress=t,i.failed=!1,this.requestUpdate())},onComplete:t=>{if(!this._uploadState.get(e))return;e.uploadedId=t,this._uploadState.delete(e),!this.uploadedImages.find(s=>!s.uploadedId)?this.uploadedImages=[...this.uploadedImages]:this.requestUpdate()},onFailed:()=>{const t=this._uploadState.get(e);t&&(t.progress=void 0,t.failed=!0,this.requestUpdate())}}),this._fullPreviewUrls=new Map,this.setExistingImages=e=>{this._selectionGeneration++,this._releaseSelectedImages(),this.uploadedImages=e.filter(t=>t.url&&t.uploadedId&&Number.isFinite(t.width)&&t.width>0&&Number.isFinite(t.height)&&t.height>0).map(t=>({source:"existing",url:t.url,urls:t.urls,height:t.height,width:t.width,uploadedId:t.uploadedId,orientation:t.width>t.height?"landscape":"portrait"})),this._uploadState=new WeakMap}}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect(),this._clearDragState(),clearTimeout(this._noticeTimer),this._selectionGeneration++,this._releaseSelectedImages()}_getPreviewIndex(e){const t=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!t)return null;for(const i of e.composedPath())if(i instanceof HTMLElement&&i.tagName==="ESP-IMAGE-PREVIEW"){for(let n=0;n<t.length;n++)if(t[n]===i)return n}return null}_clearDragState(){document.removeEventListener("pointermove",this._onDocPointerMove),document.removeEventListener("pointerup",this._onDocPointerUp),document.removeEventListener("pointercancel",this._onDocPointerUp),this._dragActive&&(this._cachedPreviews&&this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity=""),this._clearDropTargets(),document.body.style.userSelect=this._savedBodyUserSelect,this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="")),this._ghostEl?.remove(),this._ghostEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragActive=!1}_createGhost(e,t){const i=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!i||this._dragSourceIndex===null)return;const n=i[this._dragSourceIndex],s=n.getBoundingClientRect(),l=document.createElement("div"),r=Math.min(120/s.width,120/s.height),o=s.width*r,a=s.height*r;l.style.cssText=`
+</svg>`;import{EspalierElementBase as D}from"../shared/esp-element-base.js";import{calculateAlbumLayout as C,DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH as L,normalizeAlbumMaxRowHeightVh as O}from"../shared/justified-layout.js";import{ESP_EVENTS as v}from"../shared/events.js";import{viewportSize as H}from"../shared/viewport.js";const S=220,T=4,$=8e3;let c=m=class extends D{constructor(){super(...arguments),this.uploadInput=I(),this.previewsDiv=I(),this.dropAreaDiv=I(),this.draggingOver=!1,this.uploadedImages=[],this.accept="image/jpeg, image/png, image/webp",this.maxRowHeightVh=L,this._rejectionNotice="",this._uploadState=new WeakMap,this._selectionGeneration=0,this._chromeWidth=null,this._resizeObserver=new ResizeObserver(()=>{this._chromeWidth=null,this.requestUpdate()}),this._handleViewportResize=()=>{this._chromeWidth=null,this.requestUpdate()},this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragStartX=0,this._dragStartY=0,this._dragActive=!1,this._ghostEl=null,this._ghostHalfW=0,this._ghostHalfH=0,this._arrowEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._savedBodyUserSelect="",this._handleDragPointerDown=e=>{if(e.button!==0||this._dragPointerId!==null||e.composedPath().some(o=>o instanceof HTMLElement&&(o.tagName==="BUTTON"||o.tagName==="ESP-BUTTON")))return;const i=this._getPreviewIndex(e);i!==null&&(this._dragPointerId=e.pointerId,this._dragSourceIndex=i,this._dragStartX=e.clientX,this._dragStartY=e.clientY,this._dragActive=!1,document.addEventListener("pointermove",this._onDocPointerMove),document.addEventListener("pointerup",this._onDocPointerUp),document.addEventListener("pointercancel",this._onDocPointerUp))},this._onDocPointerMove=e=>{if(this._dragSourceIndex===null||e.pointerId!==this._dragPointerId)return;const t=e.clientX-this._dragStartX,i=e.clientY-this._dragStartY;if(!this._dragActive){if(Math.sqrt(t*t+i*i)<m._DRAG_THRESHOLD)return;this._dragActive=!0,this._createGhost(e.clientX,e.clientY);const n=this.shadowRoot?.querySelectorAll("esp-image-preview");n&&(this._cachedPreviews=Array.from(n).map(s=>({el:s,rect:s.getBoundingClientRect()})),this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity="0.3")),this._savedBodyUserSelect=document.body.style.userSelect,document.body.style.userSelect="none",this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="none")}this._ghostEl&&(this._ghostEl.style.transform=`translate(${e.clientX-this._ghostHalfW}px, ${e.clientY-this._ghostHalfH}px)`);const o=this._cachedPreviews;if(!o||o.length===0)return;let r=null,d=!1;for(let n=0;n<o.length;n++){const s=o[n].rect;if(e.clientX>=s.left&&e.clientX<=s.right&&e.clientY>=s.top&&e.clientY<=s.bottom){r=n,d=e.clientX>s.left+s.width/2;break}}if(r===null){let n=1/0;for(let s=0;s<o.length;s++){const l=o[s].rect,a=e.clientX-(l.left+l.width/2),h=e.clientY-(l.top+l.height/2),p=a*a+h*h;p<n&&(n=p,r=s)}if(r!==null){const s=o[r].rect;d=e.clientX>s.left+s.width/2}}r!==null&&(this._dragOverIndex=d?r+1:r,!(this._lastDropHit&&this._lastDropHit.index===r&&this._lastDropHit.after===d)&&(this._lastDropHit={index:r,after:d},this._updateDropTargets(o.map(n=>n.el),r,d)))},this._onDocPointerUp=e=>{if(e.pointerId===this._dragPointerId){if(this._dragActive&&this._dragSourceIndex!==null&&this._dragOverIndex!==null&&this._dragSourceIndex!==this._dragOverIndex&&this._dragSourceIndex+1!==this._dragOverIndex){const t=[...this.uploadedImages],[i]=t.splice(this._dragSourceIndex,1),o=this._dragOverIndex>this._dragSourceIndex?this._dragOverIndex-1:this._dragOverIndex;t.splice(o,0,i),this.uploadedImages=t,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_IMAGES_REORDERED,{detail:{images:this.uploadedImages},bubbles:!0,composed:!0}))}this._clearDragState()}},this._arrowColor=null,this.filesSelected=async e=>{const t=[],i=[];for(const a of e)(this._isAccepted(a)?t:i).push(a);if(!t.length){i.length&&this._reportRejectedFiles({unsupported:i,unreadable:[]});return}const o=this._selectionGeneration,r=Math.round(S*Math.min(globalThis.devicePixelRatio||1,2)),d=new Array(t.length).fill(null),n=[];let s=0;const l=async()=>{for(;s<t.length;){const a=s++,h=t[a];try{const p=await M(h,{thumbnailHeight:r});if(o!==this._selectionGeneration){y(p);continue}this._addSelectedImage(d,a,p)}catch{n.push(h)}}};await Promise.all(Array.from({length:Math.min(T,t.length)},()=>l())),(i.length||n.length)&&o===this._selectionGeneration&&this._reportRejectedFiles({unsupported:i,unreadable:n})},this._makeCallbacks=e=>({onProgress:t=>{const i=this._uploadState.get(e);i&&(i.progress=t,i.failed=!1,this.requestUpdate())},onComplete:t=>{if(!this._uploadState.get(e))return;e.uploadedId=t,this._uploadState.delete(e),!this.uploadedImages.find(r=>!r.uploadedId)?this.uploadedImages=[...this.uploadedImages]:this.requestUpdate()},onFailed:()=>{const t=this._uploadState.get(e);t&&(t.progress=void 0,t.failed=!0,this.requestUpdate())}}),this._fullPreviewUrls=new Map,this.setExistingImages=e=>{this._selectionGeneration++,this._releaseSelectedImages(),this.uploadedImages=e.filter(t=>t.url&&t.uploadedId&&Number.isFinite(t.width)&&t.width>0&&Number.isFinite(t.height)&&t.height>0).map(t=>({source:"existing",url:t.url,urls:t.urls,height:t.height,width:t.width,uploadedId:t.uploadedId,orientation:t.width>t.height?"landscape":"portrait"})),this._uploadState=new WeakMap}}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),window.addEventListener("resize",this._handleViewportResize)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect(),window.removeEventListener("resize",this._handleViewportResize),this._clearDragState(),clearTimeout(this._noticeTimer),this._selectionGeneration++,this._releaseSelectedImages()}_getPreviewIndex(e){const t=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!t)return null;for(const i of e.composedPath())if(i instanceof HTMLElement&&i.tagName==="ESP-IMAGE-PREVIEW"){for(let o=0;o<t.length;o++)if(t[o]===i)return o}return null}_clearDragState(){document.removeEventListener("pointermove",this._onDocPointerMove),document.removeEventListener("pointerup",this._onDocPointerUp),document.removeEventListener("pointercancel",this._onDocPointerUp),this._dragActive&&(this._cachedPreviews&&this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity=""),this._clearDropTargets(),document.body.style.userSelect=this._savedBodyUserSelect,this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="")),this._ghostEl?.remove(),this._ghostEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragActive=!1}_createGhost(e,t){const i=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!i||this._dragSourceIndex===null)return;const o=i[this._dragSourceIndex],r=o.getBoundingClientRect(),d=document.createElement("div"),n=Math.min(120/r.width,120/r.height),s=r.width*n,l=r.height*n;d.style.cssText=`
       position: fixed;
       left: 0;
       top: 0;
       z-index: 10001;
       pointer-events: none;
-      width: ${o}px;
-      height: ${a}px;
+      width: ${s}px;
+      height: ${l}px;
       border: 2px dashed var(--esp-color-action-background, #4aa);
       border-radius: var(--esp-size-border-radius, 4px);
       background-size: cover;
       background-position: center;
       opacity: 0.85;
       will-change: transform;
-      transform: translate(${e-o/2}px, ${t-a/2}px);
-    `;const d=n.shadowRoot?.querySelector("img");d&&(l.style.backgroundImage=`url(${d.src})`),document.body.appendChild(l),this._ghostEl=l,this._ghostHalfW=o/2,this._ghostHalfH=a/2}_updateDropTargets(e,t,i){for(let d=0;d<e.length;d++){const h=e[d];d===t&&d!==this._dragSourceIndex?h.setAttribute("data-drop-side",i?"right":"left"):h.removeAttribute("data-drop-side")}if(t===this._dragSourceIndex){this._arrowEl&&(this._arrowEl.style.display="none");return}const n=this._cachedPreviews,s=n?n[t].rect:e[t].getBoundingClientRect(),l=i?C:k;if(!this._arrowEl){const d=document.createElement("div");d.style.cssText=`
+      transform: translate(${e-s/2}px, ${t-l/2}px);
+    `;const a=o.shadowRoot?.querySelector("img");a&&(d.style.backgroundImage=`url(${a.src})`),document.body.appendChild(d),this._ghostEl=d,this._ghostHalfW=s/2,this._ghostHalfH=l/2}_updateDropTargets(e,t,i){for(let a=0;a<e.length;a++){const h=e[a];a===t&&a!==this._dragSourceIndex?h.setAttribute("data-drop-side",i?"right":"left"):h.removeAttribute("data-drop-side")}if(t===this._dragSourceIndex){this._arrowEl&&(this._arrowEl.style.display="none");return}const o=this._cachedPreviews,r=o?o[t].rect:e[t].getBoundingClientRect(),d=i?k:U;if(!this._arrowEl){const a=document.createElement("div");a.style.cssText=`
         position: fixed;
         left: 0;
         top: 0;
@@ -30,38 +30,38 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
         justify-content: center;
         will-change: transform;
         filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
-      `,document.body.appendChild(d),this._arrowEl=d;const h=e[t],u=getComputedStyle(h).getPropertyValue("--esp-color-complementary").trim();this._arrowColor=u?`oklch(from ${u} var(--esp-l-accent) c h)`:"oklch(0.7 0.2 330)"}this._arrowEl.innerHTML=l;const r=this._arrowEl.querySelector("svg");r&&(r.style.width="40px",r.style.height="40px",r.style.color=this._arrowColor??"oklch(0.7 0.2 330)"),this._arrowEl.style.display="flex";const o=i?s.left+s.width*.75:s.left+s.width*.25,a=s.top+s.height/2;this._arrowEl.style.transform=`translate(${o-20}px, ${a-20}px)`}_clearDropTargets(){const e=this.shadowRoot?.querySelectorAll("esp-image-preview");if(e)for(const t of e)t.removeAttribute("data-drop-side");this._arrowEl?.remove(),this._arrowEl=null,this._arrowColor=null}getContainerWidth(){const e=this.parentElement??this.offsetParent,t=e?e.getBoundingClientRect().width:window.innerWidth;if(t<=0){const i=window.innerWidth;return i<640?i-32:i<1024?i*90/100-32:Math.min(i*85/100-32,1400)}if(this._chromeWidth===null){const i=this.previewsDiv.value;if(i){const n=a=>{const d=parseFloat(a);return Number.isFinite(d)?d:0},s=getComputedStyle(i),l=n(s.paddingLeft)+n(s.paddingRight),r=this.shadowRoot?.querySelector(".esp-field"),o=r?n(getComputedStyle(r).borderLeftWidth)+n(getComputedStyle(r).borderRightWidth):0;this._chromeWidth=l+o}}return Math.max(t-(this._chromeWidth??0),1)}_isAccepted(e){const t=this.accept.split(",").map(s=>s.trim().toLowerCase()).filter(Boolean);if(!t.length)return e.type.toLowerCase().startsWith("image/");const i=e.type.toLowerCase(),n=e.name.toLowerCase();return t.some(s=>s.startsWith(".")?n.endsWith(s):s.endsWith("/*")?i.startsWith(s.slice(0,-1)):i===s)}_addSelectedImage(e,t,i){e[t]=i;const n=[...this.uploadedImages];let s=-1;for(let r=t-1;r>=0&&s<0;r--){const o=e[r];if(!o)continue;const a=n.indexOf(o);a>=0&&(s=a+1)}for(let r=t+1;r<e.length&&s<0;r++){const o=e[r];if(!o)continue;const a=n.indexOf(o);a>=0&&(s=a)}s<0&&(s=n.length),n.splice(s,0,i);const l=new AbortController;this._uploadState.set(i,{progress:null,failed:!1,controller:l}),this.uploadedImages=n,this.dispatchEvent(new CustomEvent(f.IMAGE_UPLOAD_FILE_SELECTED,{detail:{image:i,signal:l.signal,...this._makeCallbacks(i)},bubbles:!0,composed:!0}))}_reportRejectedFiles(e){this.dispatchEvent(new CustomEvent(f.IMAGE_UPLOAD_FILES_REJECTED,{detail:e,bubbles:!0,composed:!0}));const t=n=>n===1?"file":"files",i=[];e.unsupported.length&&i.push(`${e.unsupported.length} unsupported ${t(e.unsupported.length)} skipped`),e.unreadable.length&&i.push(`${e.unreadable.length} ${t(e.unreadable.length)} could not be read`),this._rejectionNotice=i.join("; "),clearTimeout(this._noticeTimer),this._noticeTimer=setTimeout(()=>{this._rejectionNotice=""},L)}_previewUrlFor(e,t){if(e.source!=="selected")return this._pickExistingPreviewUrl(e,t);const i=Math.min(globalThis.devicePixelRatio||1,2),n=E*i;if(t*i<=n*_._THUMBNAIL_UPSCALE_SLACK||e.height<=n)return e.url;let r=this._fullPreviewUrls.get(e);return r||(r=URL.createObjectURL(e.file),this._fullPreviewUrls.set(e,r)),r}_pickExistingPreviewUrl(e,t){const i=e.urls;if(!i?.length)return e.url;const n=Math.min(globalThis.devicePixelRatio||1,2),s=e.height>0?e.width/e.height:1,l=t*s*n,r=[...i].sort((a,d)=>a.minWidth-d.minWidth);return(r.find(a=>a.minWidth>=l)??r[r.length-1]).url}_releaseFullPreviewUrl(e){if(e.source!=="selected")return;const t=this._fullPreviewUrls.get(e);t&&(URL.revokeObjectURL(t),this._fullPreviewUrls.delete(e))}_releaseSelectedImages(){for(const e of this.uploadedImages)e.source==="selected"&&(this._uploadState.get(e)?.controller.abort(),I(e));for(const e of this._fullPreviewUrls.values())URL.revokeObjectURL(e);this._fullPreviewUrls.clear()}render(){const{draggingOver:e,uploadedImages:t}=this,i={"dragging-over":e,"has-previews":t.length},n=this.getContainerWidth(),s=window.innerHeight>0?window.innerHeight/2:Number.POSITIVE_INFINITY,l=M(t,n,E,8,s,this.maxImagesPerRow);return m` <div
+      `,document.body.appendChild(a),this._arrowEl=a;const h=e[t],u=getComputedStyle(h).getPropertyValue("--esp-color-complementary").trim();this._arrowColor=u?`oklch(from ${u} var(--esp-l-accent) c h)`:"oklch(0.7 0.2 330)"}this._arrowEl.innerHTML=d;const n=this._arrowEl.querySelector("svg");n&&(n.style.width="40px",n.style.height="40px",n.style.color=this._arrowColor??"oklch(0.7 0.2 330)"),this._arrowEl.style.display="flex";const s=i?r.left+r.width*.75:r.left+r.width*.25,l=r.top+r.height/2;this._arrowEl.style.transform=`translate(${s-20}px, ${l-20}px)`}_clearDropTargets(){const e=this.shadowRoot?.querySelectorAll("esp-image-preview");if(e)for(const t of e)t.removeAttribute("data-drop-side");this._arrowEl?.remove(),this._arrowEl=null,this._arrowColor=null}getContainerWidth(){const e=this.parentElement??this.offsetParent,t=e?e.getBoundingClientRect().width:window.innerWidth;if(t<=0){const i=window.innerWidth;return i<640?i-32:i<1024?i*90/100-32:Math.min(i*85/100-32,1400)}if(this._chromeWidth===null){const i=this.previewsDiv.value;if(i){const o=l=>{const a=parseFloat(l);return Number.isFinite(a)?a:0},r=getComputedStyle(i),d=o(r.paddingLeft)+o(r.paddingRight),n=this.shadowRoot?.querySelector(".esp-field"),s=n?o(getComputedStyle(n).borderLeftWidth)+o(getComputedStyle(n).borderRightWidth):0;this._chromeWidth=d+s}}return Math.max(t-(this._chromeWidth??0),1)}_isAccepted(e){const t=this.accept.split(",").map(r=>r.trim().toLowerCase()).filter(Boolean);if(!t.length)return e.type.toLowerCase().startsWith("image/");const i=e.type.toLowerCase(),o=e.name.toLowerCase();return t.some(r=>r.startsWith(".")?o.endsWith(r):r.endsWith("/*")?i.startsWith(r.slice(0,-1)):i===r)}_addSelectedImage(e,t,i){e[t]=i;const o=[...this.uploadedImages];let r=-1;for(let n=t-1;n>=0&&r<0;n--){const s=e[n];if(!s)continue;const l=o.indexOf(s);l>=0&&(r=l+1)}for(let n=t+1;n<e.length&&r<0;n++){const s=e[n];if(!s)continue;const l=o.indexOf(s);l>=0&&(r=l)}r<0&&(r=o.length),o.splice(r,0,i);const d=new AbortController;this._uploadState.set(i,{progress:null,failed:!1,controller:d}),this.uploadedImages=o,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILE_SELECTED,{detail:{image:i,signal:d.signal,...this._makeCallbacks(i)},bubbles:!0,composed:!0}))}_reportRejectedFiles(e){this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILES_REJECTED,{detail:e,bubbles:!0,composed:!0}));const t=o=>o===1?"file":"files",i=[];e.unsupported.length&&i.push(`${e.unsupported.length} unsupported ${t(e.unsupported.length)} skipped`),e.unreadable.length&&i.push(`${e.unreadable.length} ${t(e.unreadable.length)} could not be read`),this._rejectionNotice=i.join("; "),clearTimeout(this._noticeTimer),this._noticeTimer=setTimeout(()=>{this._rejectionNotice=""},$)}_previewUrlFor(e,t,i){const o=e.width>0&&e.height>0?e.width/e.height:1,r=Math.max(t,(i??0)/o);if(e.source!=="selected")return this._pickExistingPreviewUrl(e,r);const d=Math.min(globalThis.devicePixelRatio||1,2),n=S*d;if(r*d<=n*m._THUMBNAIL_UPSCALE_SLACK||e.height<=n)return e.url;let a=this._fullPreviewUrls.get(e);return a||(a=URL.createObjectURL(e.file),this._fullPreviewUrls.set(e,a)),a}_pickExistingPreviewUrl(e,t){const i=e.urls;if(!i?.length)return e.url;const o=Math.min(globalThis.devicePixelRatio||1,2),r=e.height>0?e.width/e.height:1,d=t*r*o,n=[...i].sort((l,a)=>l.minWidth-a.minWidth);return(n.find(l=>l.minWidth>=d)??n[n.length-1]).url}_releaseFullPreviewUrl(e){if(e.source!=="selected")return;const t=this._fullPreviewUrls.get(e);t&&(URL.revokeObjectURL(t),this._fullPreviewUrls.delete(e))}_releaseSelectedImages(){for(const e of this.uploadedImages)e.source==="selected"&&(this._uploadState.get(e)?.controller.abort(),y(e));for(const e of this._fullPreviewUrls.values())URL.revokeObjectURL(e);this._fullPreviewUrls.clear()}render(){const{draggingOver:e,uploadedImages:t}=this,i={"dragging-over":e,"has-previews":t.length},o=this.getContainerWidth(),{height:r}=H(),d=r>0?r*O(this.maxRowHeightVh)/100:Number.POSITIVE_INFINITY,n=C(t,{containerWidth:o,targetRowHeight:S,gap:8,maxRowHeight:d,maxImagesPerRow:this.maxImagesPerRow});return w` <div
       class="esp-field"
       @click=${()=>{this.dropAreaDiv.value?.focus({preventScroll:!0})}}
-      @dragover=${r=>{r.preventDefault(),this.draggingOver=!0}}
-      @dragleave=${r=>{r.preventDefault(),this.draggingOver=!1}}
-      @drop=${r=>{r.preventDefault(),this.draggingOver=!1;const o=r.dataTransfer?.files;o&&o.length&&this.filesSelected(o)}}
+      @dragover=${s=>{s.preventDefault(),this.draggingOver=!0}}
+      @dragleave=${s=>{s.preventDefault(),this.draggingOver=!1}}
+      @drop=${s=>{s.preventDefault(),this.draggingOver=!1;const l=s.dataTransfer?.files;l&&l.length&&this.filesSelected(l)}}
     >
       <div
-        ${x(this.previewsDiv)}
-        class=${y({previews:!0,...i})}
+        ${E(this.previewsDiv)}
+        class=${P({previews:!0,...i})}
         @pointerdown=${this._handleDragPointerDown}
       >
-        ${l.map(r=>m`<div class="photo-row" style="height: ${r.height}px;">
-            ${r.images.map(o=>{const a=r.height,d=o.width/o.height*a,h=this._uploadState.get(o);return m`<esp-image-preview
-                style="width: ${d}px; height: ${a}px; flex-shrink: 0;"
-                .url=${this._previewUrlFor(o,a)}
-                .alt=${o.source==="selected"?o.file.name:""}
-                .progress=${h?.progress}
-                .failed=${h?.failed??!1}
-                @esp-internal-image-preview-remove=${()=>{const c=this.uploadedImages.indexOf(o);if(c<0)return;this._uploadState.get(o)?.controller.abort(),this._uploadState.delete(o),I(o),this._releaseFullPreviewUrl(o);const u=[...this.uploadedImages];u.splice(c,1),this.uploadedImages=u,this.dispatchEvent(new CustomEvent(f.IMAGE_UPLOAD_FILE_REMOVED,{detail:o,bubbles:!0,composed:!0}))}}
-                @esp-internal-image-preview-retry=${()=>{if(o.source!=="selected")return;const c=new AbortController,u=this._uploadState.get(o);u?(u.failed=!1,u.progress=null,u.controller=c):this._uploadState.set(o,{progress:null,failed:!1,controller:c}),this.requestUpdate(),this.dispatchEvent(new CustomEvent(f.IMAGE_UPLOAD_RETRY,{detail:{image:o,signal:c.signal,...this._makeCallbacks(o)},bubbles:!0,composed:!0}))}}
+        ${n.map(s=>w`<div class="photo-row" style="height: ${s.height}px;">
+            ${s.items.map(({image:l,width:a})=>{const h=s.height,p=this._uploadState.get(l);return w`<esp-image-preview
+                style="width: ${a}px; height: ${h}px; flex-shrink: 0;"
+                .url=${this._previewUrlFor(l,h,a)}
+                .alt=${l.source==="selected"?l.file.name:""}
+                .progress=${p?.progress}
+                .failed=${p?.failed??!1}
+                @esp-internal-image-preview-remove=${()=>{const u=this.uploadedImages.indexOf(l);if(u<0)return;this._uploadState.get(l)?.controller.abort(),this._uploadState.delete(l),y(l),this._releaseFullPreviewUrl(l);const g=[...this.uploadedImages];g.splice(u,1),this.uploadedImages=g,this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_FILE_REMOVED,{detail:l,bubbles:!0,composed:!0}))}}
+                @esp-internal-image-preview-retry=${()=>{if(l.source!=="selected")return;const u=new AbortController,g=this._uploadState.get(l);g?(g.failed=!1,g.progress=null,g.controller=u):this._uploadState.set(l,{progress:null,failed:!1,controller:u}),this.requestUpdate(),this.dispatchEvent(new CustomEvent(v.IMAGE_UPLOAD_RETRY,{detail:{image:l,signal:u.signal,...this._makeCallbacks(l)},bubbles:!0,composed:!0}))}}
               ></esp-image-preview>`})}
           </div>`)}
       </div>
       <div
-        ${x(this.dropAreaDiv)}
+        ${E(this.dropAreaDiv)}
         tabindex="0"
         role="button"
         aria-label="Add photos"
-        class=${y({"drop-area":!0,...i})}
+        class=${P({"drop-area":!0,...i})}
         @click=${()=>{this.uploadInput.value?.click()}}
-        @keydown=${r=>{(r.code==="Enter"||r.code==="Space")&&(r.preventDefault(),this.uploadInput.value?.click())}}
+        @keydown=${s=>{(s.code==="Enter"||s.code==="Space")&&(s.preventDefault(),this.uploadInput.value?.click())}}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -104,14 +104,14 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
         <p class="rejection-notice" role="status">${this._rejectionNotice}</p>
       </div>
       <input
-        ${x(this.uploadInput)}
+        ${E(this.uploadInput)}
         type="file"
         multiple
         accept=${this.accept}
         hidden
-        @change=${()=>{const r=this.uploadInput.value;!r||!r.files||!r.files.length||(this.filesSelected(r.files),r.value="")}}
+        @change=${()=>{const s=this.uploadInput.value;!s||!s.files||!s.files.length||(this.filesSelected(s.files),s.value="")}}
       />
-    </div>`}};p._DRAG_THRESHOLD=8,p._THUMBNAIL_UPSCALE_SLACK=1.1,p.styles=[...P.styles,D`
+    </div>`}};c._DRAG_THRESHOLD=8,c._THUMBNAIL_UPSCALE_SLACK=1.1,c.styles=[...D.styles,A`
       :host {
         overflow: hidden;
       }
@@ -237,4 +237,4 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
           }
         }
       }
-    `],g([w()],p.prototype,"draggingOver",void 0),g([w()],p.prototype,"uploadedImages",void 0),g([S({type:String})],p.prototype,"accept",void 0),g([S({attribute:"max-images-per-row",type:Number})],p.prototype,"maxImagesPerRow",void 0),g([w()],p.prototype,"_rejectionNotice",void 0),p=_=g([A("esp-image-upload")],p);export{p as EspalierImageUpload};
+    `],f([b()],c.prototype,"draggingOver",void 0),f([b()],c.prototype,"uploadedImages",void 0),f([x({type:String})],c.prototype,"accept",void 0),f([x({attribute:"max-images-per-row",type:Number})],c.prototype,"maxImagesPerRow",void 0),f([x({attribute:"max-row-height-vh",type:Number})],c.prototype,"maxRowHeightVh",void 0),f([b()],c.prototype,"_rejectionNotice",void 0),c=m=f([R("esp-image-upload")],c);export{c as EspalierImageUpload};

package/dist/index.d.ts

@@ -71,7 +71,7 @@ export { requestHelp, type HelpRequest, type HelpState } from "./shared/help-eve
 export { getEspBus, type EspBusEventMap, type SchemeEvents, type ToastEvents, type FlyoutEvents, type HelpEvents, type PopoverEvents, type SizeEvents, type PageEventMap, type SeedColorRoot, } from "./shared/bus-events.js";
 export * from "./shared/events.js";
 export { getImageDetails, releasePreviewUrl, type EspalierUploadImage, type ImageDetailsOptions, type SelectedUploadImage, type ExistingUploadImage, type ExistingImage, type ResponsiveImageUrl, type UploadCallbacks, type UploadEventDetail, } from "./image-upload/image-helpers.js";
-export { calculatePhotoLayout, normalizeMaxImagesPerRow, type LayoutImage, type PhotoRow, } from "./shared/justified-layout.js";
+export { calculateAlbumLayout, calculatePhotoLayout, DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH, normalizeAlbumMaxRowHeightVh, normalizeMaxImagesPerRow, type AlbumLayoutItem, type AlbumLayoutOptions, type AlbumLayoutRow, type LayoutImage, type PhotoRow, } from "./shared/justified-layout.js";
 export { type TypeaheadFetchItems } from "./pickers/types.js";
 export { type EspalierTheme, type LightnessKey, type LightnessReference, type PartialTheme, type PartialThemeContexts, type PartialThemeTones, type ThemeContext, type ThemeContexts, type ThemeTones, type ToneReference, type VariantColorSource, encodeTheme, parseTheme, mergePartials, layerThemes, validateThemePair, resolveContextTheme, isObjectRecord, isSemanticColorName, buildTaprootLightTheme, buildTaprootDarkTheme, NESTED_THEME_KEYS, } from "./shared/theme.js";
 export { auditDataPalette, describePaletteCollision, generateSequentialRamp, generateDivergingRamp, COLOR_VISION_SIMULATIONS, DATA_SERIES_KEYS, DEFAULT_DATA_PALETTE, DEFAULT_DATA_RAMP_STEPS, DEFAULT_DIVERGING_NEUTRAL, MAX_DATA_RAMP_STEPS, MIN_DATA_COLOR_DISTANCE, MIN_DATA_RAMP_LIGHTNESS_STEP, MIN_DATA_RAMP_STEPS, type ColorVisionSimulation, type DataPalette, type DataPaletteIssue, type DataRamp, type DataRamps, type DataSeriesKey, type DivergingDataRamp, type DivergingRampOptions, type PartialDataRamp, type PartialDataRamps, type SequentialDataRamp, type SequentialRampOptions, } from "./shared/data-colors.js";

package/dist/index.js

@@ -1 +1 @@
-export*from"./box/esp-box.js";export*from"./action-menu/esp-action-menu.js";export*from"./action-menu/esp-action-menu-item.js";export*from"./avatar/esp-avatar.js";export*from"./avatar/esp-profile-chip.js";export*from"./badge/esp-badge.js";export*from"./checkbox/esp-checkbox.js";export*from"./checkbox/esp-checkbox-group.js";export*from"./data-cell/esp-data-cell.js";export*from"./radio-button/esp-radio-button.js";export*from"./radio-button/esp-radio-button-group.js";export*from"./repeater/esp-repeater.js";export*from"./breadcrumbs/esp-breadcrumbs.js";export*from"./button/esp-button.js";export*from"./button/esp-button-group.js";export*from"./color-picker/esp-color-picker.js";export*from"./flyout/esp-flyout.js";export*from"./form/esp-form.js";export*from"./form-item/esp-form-item.js";export*from"./help/esp-help-button.js";export*from"./help/esp-help-provider.js";export*from"./header/index.js";export*from"./page/esp-page.js";export*from"./section/esp-section.js";export*from"./stack/esp-stack.js";export*from"./row/esp-row.js";export*from"./popover/esp-popover.js";export*from"./dialog/esp-dialog.js";export*from"./empty-state/esp-empty-state.js";export*from"./image-upload/esp-image-upload.js";export*from"./file-upload/esp-file-upload.js";export*from"./font-picker/esp-font-picker.js";export*from"./focus-picker/esp-focus-picker.js";export*from"./footer/index.js";export*from"./grid/esp-grid.js";export*from"./image/esp-image.js";export*from"./image/image-focus.js";export*from"./lightbox/esp-lightbox.js";export*from"./info/esp-info.js";export*from"./input/esp-input.js";export*from"./textarea/esp-textarea.js";export*from"./pickers/esp-pick-one.js";export*from"./pickers/esp-pick-some.js";export*from"./pickers/esp-picker-menu.js";export*from"./pickers/esp-picker-item.js";export*from"./root/esp-root.js";export*from"./menu/index.js";export*from"./burger/esp-burger.js";export*from"./date-picker/esp-date-picker.js";export*from"./details/esp-details.js";export*from"./details/esp-details-group.js";export*from"./tabs/esp-tab.js";export*from"./tabs/esp-tab-group.js";export*from"./slider/esp-slider.js";export*from"./switch/esp-switch.js";export*from"./toaster/esp-toaster.js";export*from"./tooltip/esp-tooltip.js";export*from"./progress/esp-progress.js";export*from"./search/esp-search.js";export*from"./status-indicator/esp-status-indicator.js";export*from"./tree/esp-tree.js";export*from"./tree/esp-tree-item.js";import{DEFAULT_ICON_SPRITE_URL as _o,DEFAULT_ICON_VIEW_BOX as Io,INTENT_VARIANTS as ao,normalizeIntentVariant as io,getIconHrefForHost as lo,getIconSpriteUrl as Fo,getIconSpriteReference as no}from"./shared/intent-values.js";import{EspalierElementBase as So}from"./shared/esp-element-base.js";import{VALIDITY_CHANGED_EVENT as Lo}from"./shared/validation.js";import{FormFieldController as Do}from"./shared/form-field-controller.js";import{traverseToClosest as go}from"./shared/utilities.js";import{showToast as co}from"./shared/toast-events.js";import{showFlyout as Mo,closeFlyout as Oo}from"./shared/flyout-events.js";import{requestHelp as Co}from"./shared/help-events.js";import{getEspBus as Uo}from"./shared/bus-events.js";export*from"./shared/events.js";import{getImageDetails as vo,releasePreviewUrl as yo}from"./image-upload/image-helpers.js";import{calculatePhotoLayout as ko,normalizeMaxImagesPerRow as Wo}from"./shared/justified-layout.js";import{encodeTheme as Bo,parseTheme as zo,mergePartials as Ko,layerThemes as qo,validateThemePair as Xo,resolveContextTheme as Yo,isObjectRecord as jo,isSemanticColorName as Jo,buildTaprootLightTheme as Qo,buildTaprootDarkTheme as Zo,NESTED_THEME_KEYS as $o}from"./shared/theme.js";import{auditDataPalette as ee,describePaletteCollision as re,generateSequentialRamp as te,generateDivergingRamp as me,COLOR_VISION_SIMULATIONS as pe,DATA_SERIES_KEYS as Te,DEFAULT_DATA_PALETTE as fe,DEFAULT_DATA_RAMP_STEPS as xe,DEFAULT_DIVERGING_NEUTRAL as Ee,MAX_DATA_RAMP_STEPS as _e,MIN_DATA_COLOR_DISTANCE as Ie,MIN_DATA_RAMP_LIGHTNESS_STEP as ae,MIN_DATA_RAMP_STEPS as ie}from"./shared/data-colors.js";import{WEIGHT_LABELS as Fe,extractWeights as ne,normalizeWeight as Ae,bestAvailableWeight as Se,extractFamily as se,getFallbackFont as Le,googleFontStylesheetUrl as Re,isLocalFontFamily as De,normalizeFontFaceWeight as Ne,removeRuntimeGoogleFontLink as ge,removeRuntimeGoogleFontLinks as Pe,syncRuntimeGoogleFontLink as ce,RUNTIME_GOOGLE_FONT_OWNER_ATTR as he}from"./shared/font-helpers.js";import{compileFontPlan as Oe,fontFallbackAliases as He,fontFallbackBaseIndexes as Ce,fontFaceRequestKey as ue}from"./shared/font-plan.js";import{getGoogleFonts as Ge}from"./font-picker/esp-font-picker.js";import{ROOT_SURFACE as be,THEME_FIT_ANCHOR_FIELDS as ve,THEME_FIT_APCA_FIELDS as ye,THEME_FIT_DATA_PALETTE_LINT_FIELDS as Ve,THEME_FIT_DATA_PALETTE_LINT_IDS as ke,THEME_FIT_EXPLICIT_VALUES as We,THEME_FIT_LINT_FIELDS as we,THEME_FIT_LINT_IDS as Be,THEME_FIT_LINT_SEVERITIES as ze,THEME_FIT_REPORT_FIELDS as Ke,THEME_FIT_SUITE_FIELDS as qe,THEME_FIT_TOKEN_FIELDS as Xe,themeFitReport as Ye,themeFitRows as je,themeFitLints as Je,themeFitReportSuite as Qe,printThemeFitReport as Ze}from"./shared/theme-fit-report.js";import{ICON_SPRITE as or,ICON_SPRITE_ID as er,installIconSprite as rr}from"./icons/index.js";import{deriveLightnessRamp as mr,themeFromSwatches as pr}from"./shared/theme-swatches.js";export{pe as COLOR_VISION_SIMULATIONS,Te as DATA_SERIES_KEYS,fe as DEFAULT_DATA_PALETTE,xe as DEFAULT_DATA_RAMP_STEPS,Ee as DEFAULT_DIVERGING_NEUTRAL,_o as DEFAULT_ICON_SPRITE_URL,Io as DEFAULT_ICON_VIEW_BOX,So as EspalierElementBase,Do as FormFieldController,or as ICON_SPRITE,er as ICON_SPRITE_ID,ao as INTENT_VARIANTS,_e as MAX_DATA_RAMP_STEPS,Ie as MIN_DATA_COLOR_DISTANCE,ae as MIN_DATA_RAMP_LIGHTNESS_STEP,ie as MIN_DATA_RAMP_STEPS,$o as NESTED_THEME_KEYS,be as ROOT_SURFACE,he as RUNTIME_GOOGLE_FONT_OWNER_ATTR,ve as THEME_FIT_ANCHOR_FIELDS,ye as THEME_FIT_APCA_FIELDS,Ve as THEME_FIT_DATA_PALETTE_LINT_FIELDS,ke as THEME_FIT_DATA_PALETTE_LINT_IDS,We as THEME_FIT_EXPLICIT_VALUES,we as THEME_FIT_LINT_FIELDS,Be as THEME_FIT_LINT_IDS,ze as THEME_FIT_LINT_SEVERITIES,Ke as THEME_FIT_REPORT_FIELDS,qe as THEME_FIT_SUITE_FIELDS,Xe as THEME_FIT_TOKEN_FIELDS,Lo as VALIDITY_CHANGED_EVENT,Fe as WEIGHT_LABELS,ee as auditDataPalette,Se as bestAvailableWeight,Zo as buildTaprootDarkTheme,Qo as buildTaprootLightTheme,ko as calculatePhotoLayout,Oo as closeFlyout,Oe as compileFontPlan,mr as deriveLightnessRamp,re as describePaletteCollision,Bo as encodeTheme,se as extractFamily,ne as extractWeights,ue as fontFaceRequestKey,He as fontFallbackAliases,Ce as fontFallbackBaseIndexes,me as generateDivergingRamp,te as generateSequentialRamp,Uo as getEspBus,Le as getFallbackFont,Ge as getGoogleFonts,lo as getIconHrefForHost,no as getIconSpriteReference,Fo as getIconSpriteUrl,vo as getImageDetails,Re as googleFontStylesheetUrl,rr as installIconSprite,De as isLocalFontFamily,jo as isObjectRecord,Jo as isSemanticColorName,qo as layerThemes,Ko as mergePartials,Ne as normalizeFontFaceWeight,io as normalizeIntentVariant,Wo as normalizeMaxImagesPerRow,Ae as normalizeWeight,zo as parseTheme,Ze as printThemeFitReport,yo as releasePreviewUrl,ge as removeRuntimeGoogleFontLink,Pe as removeRuntimeGoogleFontLinks,Co as requestHelp,Yo as resolveContextTheme,Mo as showFlyout,co as showToast,ce as syncRuntimeGoogleFontLink,Je as themeFitLints,Ye as themeFitReport,Qe as themeFitReportSuite,je as themeFitRows,pr as themeFromSwatches,go as traverseToClosest,Xo as validateThemePair};
+export*from"./box/esp-box.js";export*from"./action-menu/esp-action-menu.js";export*from"./action-menu/esp-action-menu-item.js";export*from"./avatar/esp-avatar.js";export*from"./avatar/esp-profile-chip.js";export*from"./badge/esp-badge.js";export*from"./checkbox/esp-checkbox.js";export*from"./checkbox/esp-checkbox-group.js";export*from"./data-cell/esp-data-cell.js";export*from"./radio-button/esp-radio-button.js";export*from"./radio-button/esp-radio-button-group.js";export*from"./repeater/esp-repeater.js";export*from"./breadcrumbs/esp-breadcrumbs.js";export*from"./button/esp-button.js";export*from"./button/esp-button-group.js";export*from"./color-picker/esp-color-picker.js";export*from"./flyout/esp-flyout.js";export*from"./form/esp-form.js";export*from"./form-item/esp-form-item.js";export*from"./help/esp-help-button.js";export*from"./help/esp-help-provider.js";export*from"./header/index.js";export*from"./page/esp-page.js";export*from"./section/esp-section.js";export*from"./stack/esp-stack.js";export*from"./row/esp-row.js";export*from"./popover/esp-popover.js";export*from"./dialog/esp-dialog.js";export*from"./empty-state/esp-empty-state.js";export*from"./image-upload/esp-image-upload.js";export*from"./file-upload/esp-file-upload.js";export*from"./font-picker/esp-font-picker.js";export*from"./focus-picker/esp-focus-picker.js";export*from"./footer/index.js";export*from"./grid/esp-grid.js";export*from"./image/esp-image.js";export*from"./image/image-focus.js";export*from"./lightbox/esp-lightbox.js";export*from"./info/esp-info.js";export*from"./input/esp-input.js";export*from"./textarea/esp-textarea.js";export*from"./pickers/esp-pick-one.js";export*from"./pickers/esp-pick-some.js";export*from"./pickers/esp-picker-menu.js";export*from"./pickers/esp-picker-item.js";export*from"./root/esp-root.js";export*from"./menu/index.js";export*from"./burger/esp-burger.js";export*from"./date-picker/esp-date-picker.js";export*from"./details/esp-details.js";export*from"./details/esp-details-group.js";export*from"./tabs/esp-tab.js";export*from"./tabs/esp-tab-group.js";export*from"./slider/esp-slider.js";export*from"./switch/esp-switch.js";export*from"./toaster/esp-toaster.js";export*from"./tooltip/esp-tooltip.js";export*from"./progress/esp-progress.js";export*from"./search/esp-search.js";export*from"./status-indicator/esp-status-indicator.js";export*from"./tree/esp-tree.js";export*from"./tree/esp-tree-item.js";import{DEFAULT_ICON_SPRITE_URL as Eo,DEFAULT_ICON_VIEW_BOX as ao,INTENT_VARIANTS as Io,normalizeIntentVariant as lo,getIconHrefForHost as io,getIconSpriteUrl as Fo,getIconSpriteReference as Ao}from"./shared/intent-values.js";import{EspalierElementBase as So}from"./shared/esp-element-base.js";import{VALIDITY_CHANGED_EVENT as so}from"./shared/validation.js";import{FormFieldController as Do}from"./shared/form-field-controller.js";import{traverseToClosest as go}from"./shared/utilities.js";import{showToast as ho}from"./shared/toast-events.js";import{showFlyout as Po,closeFlyout as Ho}from"./shared/flyout-events.js";import{requestHelp as uo}from"./shared/help-events.js";import{getEspBus as Uo}from"./shared/bus-events.js";export*from"./shared/events.js";import{getImageDetails as Vo,releasePreviewUrl as yo}from"./image-upload/image-helpers.js";import{calculateAlbumLayout as Wo,calculatePhotoLayout as ko,DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH as wo,normalizeAlbumMaxRowHeightVh as Bo,normalizeMaxImagesPerRow as zo}from"./shared/justified-layout.js";import{encodeTheme as Xo,parseTheme as qo,mergePartials as Yo,layerThemes as jo,validateThemePair as Jo,resolveContextTheme as Qo,isObjectRecord as Zo,isSemanticColorName as $o,buildTaprootLightTheme as oe,buildTaprootDarkTheme as ee,NESTED_THEME_KEYS as re}from"./shared/theme.js";import{auditDataPalette as me,describePaletteCollision as pe,generateSequentialRamp as Te,generateDivergingRamp as xe,COLOR_VISION_SIMULATIONS as fe,DATA_SERIES_KEYS as _e,DEFAULT_DATA_PALETTE as Ee,DEFAULT_DATA_RAMP_STEPS as ae,DEFAULT_DIVERGING_NEUTRAL as Ie,MAX_DATA_RAMP_STEPS as le,MIN_DATA_COLOR_DISTANCE as ie,MIN_DATA_RAMP_LIGHTNESS_STEP as Fe,MIN_DATA_RAMP_STEPS as Ae}from"./shared/data-colors.js";import{WEIGHT_LABELS as Se,extractWeights as Le,normalizeWeight as se,bestAvailableWeight as Re,extractFamily as De,getFallbackFont as Ne,googleFontStylesheetUrl as ge,isLocalFontFamily as ce,normalizeFontFaceWeight as he,removeRuntimeGoogleFontLink as Me,removeRuntimeGoogleFontLinks as Pe,syncRuntimeGoogleFontLink as He,RUNTIME_GOOGLE_FONT_OWNER_ATTR as Oe}from"./shared/font-helpers.js";import{compileFontPlan as Ce,fontFallbackAliases as Ue,fontFallbackBaseIndexes as Ge,fontFaceRequestKey as be}from"./shared/font-plan.js";import{getGoogleFonts as de}from"./font-picker/esp-font-picker.js";import{ROOT_SURFACE as ve,THEME_FIT_ANCHOR_FIELDS as We,THEME_FIT_APCA_FIELDS as ke,THEME_FIT_DATA_PALETTE_LINT_FIELDS as we,THEME_FIT_DATA_PALETTE_LINT_IDS as Be,THEME_FIT_EXPLICIT_VALUES as ze,THEME_FIT_LINT_FIELDS as Ke,THEME_FIT_LINT_IDS as Xe,THEME_FIT_LINT_SEVERITIES as qe,THEME_FIT_REPORT_FIELDS as Ye,THEME_FIT_SUITE_FIELDS as je,THEME_FIT_TOKEN_FIELDS as Je,themeFitReport as Qe,themeFitRows as Ze,themeFitLints as $e,themeFitReportSuite as or,printThemeFitReport as er}from"./shared/theme-fit-report.js";import{ICON_SPRITE as tr,ICON_SPRITE_ID as mr,installIconSprite as pr}from"./icons/index.js";import{deriveLightnessRamp as xr,themeFromSwatches as fr}from"./shared/theme-swatches.js";export{fe as COLOR_VISION_SIMULATIONS,_e as DATA_SERIES_KEYS,wo as DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH,Ee as DEFAULT_DATA_PALETTE,ae as DEFAULT_DATA_RAMP_STEPS,Ie as DEFAULT_DIVERGING_NEUTRAL,Eo as DEFAULT_ICON_SPRITE_URL,ao as DEFAULT_ICON_VIEW_BOX,So as EspalierElementBase,Do as FormFieldController,tr as ICON_SPRITE,mr as ICON_SPRITE_ID,Io as INTENT_VARIANTS,le as MAX_DATA_RAMP_STEPS,ie as MIN_DATA_COLOR_DISTANCE,Fe as MIN_DATA_RAMP_LIGHTNESS_STEP,Ae as MIN_DATA_RAMP_STEPS,re as NESTED_THEME_KEYS,ve as ROOT_SURFACE,Oe as RUNTIME_GOOGLE_FONT_OWNER_ATTR,We as THEME_FIT_ANCHOR_FIELDS,ke as THEME_FIT_APCA_FIELDS,we as THEME_FIT_DATA_PALETTE_LINT_FIELDS,Be as THEME_FIT_DATA_PALETTE_LINT_IDS,ze as THEME_FIT_EXPLICIT_VALUES,Ke as THEME_FIT_LINT_FIELDS,Xe as THEME_FIT_LINT_IDS,qe as THEME_FIT_LINT_SEVERITIES,Ye as THEME_FIT_REPORT_FIELDS,je as THEME_FIT_SUITE_FIELDS,Je as THEME_FIT_TOKEN_FIELDS,so as VALIDITY_CHANGED_EVENT,Se as WEIGHT_LABELS,me as auditDataPalette,Re as bestAvailableWeight,ee as buildTaprootDarkTheme,oe as buildTaprootLightTheme,Wo as calculateAlbumLayout,ko as calculatePhotoLayout,Ho as closeFlyout,Ce as compileFontPlan,xr as deriveLightnessRamp,pe as describePaletteCollision,Xo as encodeTheme,De as extractFamily,Le as extractWeights,be as fontFaceRequestKey,Ue as fontFallbackAliases,Ge as fontFallbackBaseIndexes,xe as generateDivergingRamp,Te as generateSequentialRamp,Uo as getEspBus,Ne as getFallbackFont,de as getGoogleFonts,io as getIconHrefForHost,Ao as getIconSpriteReference,Fo as getIconSpriteUrl,Vo as getImageDetails,ge as googleFontStylesheetUrl,pr as installIconSprite,ce as isLocalFontFamily,Zo as isObjectRecord,$o as isSemanticColorName,jo as layerThemes,Yo as mergePartials,Bo as normalizeAlbumMaxRowHeightVh,he as normalizeFontFaceWeight,lo as normalizeIntentVariant,zo as normalizeMaxImagesPerRow,se as normalizeWeight,qo as parseTheme,er as printThemeFitReport,yo as releasePreviewUrl,Me as removeRuntimeGoogleFontLink,Pe as removeRuntimeGoogleFontLinks,uo as requestHelp,Qo as resolveContextTheme,Po as showFlyout,ho as showToast,He as syncRuntimeGoogleFontLink,$e as themeFitLints,Qe as themeFitReport,or as themeFitReportSuite,Ze as themeFitRows,fr as themeFromSwatches,go as traverseToClosest,Jo as validateThemePair};

package/dist/shared/justified-layout.d.ts

@@ -17,6 +17,49 @@ export interface PhotoRow<T extends LayoutImage = LayoutImage> {
     images: T[];
     height: number;
 }
+/** One image's explicit cell geometry in an album row. */
+export interface AlbumLayoutItem<T extends LayoutImage = LayoutImage> {
+    /** The source image, retained by reference. */
+    image: T;
+    /** The rendered cell width in CSS pixels. */
+    width: number;
+}
+/**
+ * A row in a bounded album layout.
+ *
+ * `fillsContainer` is true for completed rows, including rows whose cells
+ * widen proportionally at a height ceiling and therefore crop their images.
+ * `isPartial` identifies the final, under-filled max-count row, which keeps
+ * its image proportions and intentionally leaves its trailing space empty.
+ */
+export interface AlbumLayoutRow<T extends LayoutImage = LayoutImage> {
+    items: AlbumLayoutItem<T>[];
+    height: number;
+    isPartial: boolean;
+    fillsContainer: boolean;
+}
+/** Options for {@link calculateAlbumLayout}. */
+export interface AlbumLayoutOptions {
+    /** Available row width in CSS pixels, before gaps. */
+    containerWidth: number;
+    /** Preferred row height used while grouping images. Defaults to 220. */
+    targetRowHeight?: number;
+    /** Horizontal gap between cells. Defaults to 8. */
+    gap?: number;
+    /** Maximum rendered row height in CSS pixels. Defaults to no ceiling. */
+    maxRowHeight?: number;
+    /** Positive-integer image count that makes a completed row. */
+    maxImagesPerRow?: number;
+}
+/** The default viewport-height ceiling used by bounded album consumers. */
+export declare const DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH = 90;
+/**
+ * Normalize the public album viewport-height ceiling.
+ *
+ * The value is deliberately a percentage rather than an arbitrary pixel
+ * count, so a consumer can apply the same policy across responsive layouts.
+ */
+export declare function normalizeAlbumMaxRowHeightVh(value: unknown): number;
 /**
  * Resolve a consumer-provided image-row ceiling to a usable positive integer.
  * Values outside `1…maximum`, including non-numbers and non-finite values,
@@ -55,3 +98,20 @@ export declare function normalizeMaxImagesPerRow(value: unknown, fallback?: numb
  * length.
  */
 export declare function calculatePhotoLayout<T extends LayoutImage>(images: T[], containerWidth: number, targetRowHeight?: number, gap?: number, maxRowHeight?: number, maxImagesPerRow?: number): PhotoRow<T>[];
+/**
+ * Compute bounded album geometry with explicit cell widths.
+ *
+ * This is the opt-in counterpart to {@link calculatePhotoLayout}. Completed
+ * rows always span the available width. When their justified height exceeds
+ * `maxRowHeight`, their cells retain their relative widths while expanding to
+ * the row width at the ceiling; a renderer can use `object-fit: cover` to crop
+ * the resulting cells. A final row below a finite `maxImagesPerRow` instead
+ * remains partial and preserves its image proportions. Its height is capped by
+ * the tallest preceding row (or the target height when it is the only row) and
+ * by `maxRowHeight`.
+ *
+ * With an omitted or invalid `maxImagesPerRow`, every row remains completed.
+ * That preserves the legacy unlimited-row distribution for callers that have
+ * not opted into bounded albums.
+ */
+export declare function calculateAlbumLayout<T extends LayoutImage>(images: T[], options: AlbumLayoutOptions): AlbumLayoutRow<T>[];

package/dist/shared/justified-layout.js

@@ -1 +1 @@
-function w(n,I=Number.POSITIVE_INFINITY,o=Number.POSITIVE_INFINITY){return typeof n=="number"&&Number.isInteger(n)&&n>0&&n<=o?n:I}function b(n,I,o=220,i=8,m=Number.POSITIVE_INFINITY,p=Number.POSITIVE_INFINITY){if(n.length===0)return[];const d=w(p),u=e=>e.reduce((r,h)=>r+h.width/h.height,0),s=e=>{const r=(e.length-1)*i;return(I-r)/u(e)},N=e=>e>o?e/o:o/e,l=[];let t=[];const c=(e,r)=>{l.push({images:[...e],height:Math.min(r,m)})};for(let e=0;e<n.length;e++){t.push(n[e]);const h=u(t)*o+(t.length-1)*i>I,g=e===n.length-1;if(h&&t.length>1){const T=s(t),f=s(t.slice(0,-1));N(T)<=N(f)?c(t,T):(t.pop(),e--,c(t,f)),t=[]}else t.length>=d?(c(t,s(t)),t=[]):g&&(c(t,s(t)),t=[])}return l}export{b as calculatePhotoLayout,w as normalizeMaxImagesPerRow};
+const E=90;function H(t){return typeof t=="number"&&Number.isInteger(t)&&t>=1&&t<=100?t:90}function R(t,r=Number.POSITIVE_INFINITY,u=Number.POSITIVE_INFINITY){return typeof t=="number"&&Number.isInteger(t)&&t>0&&t<=u?t:r}function M(t,r,u=220,a=8,w=Number.POSITIVE_INFINITY,d=Number.POSITIVE_INFINITY){if(t.length===0)return[];const f=R(d),N=o=>o.reduce((c,l)=>c+l.width/l.height,0),I=o=>{const c=(o.length-1)*a;return(r-c)/N(o)},p=o=>o>u?o/u:u/o,m=[];let n=[];const g=(o,c)=>{m.push({images:[...o],height:Math.min(c,w)})};for(let o=0;o<t.length;o++){n.push(t[o]);const l=N(n)*u+(n.length-1)*a>r,b=o===t.length-1;if(l&&n.length>1){const i=I(n),e=I(n.slice(0,-1));p(i)<=p(e)?g(n,i):(n.pop(),o--,g(n,e)),n=[]}else n.length>=f?(g(n,I(n)),n=[]):b&&(g(n,I(n)),n=[])}return m}function P(t,r){if(t.length===0)return[];const u=A(r.containerWidth,0),a=W(r.targetRowHeight,220),w=A(r.gap,8),d=W(r.maxRowHeight,Number.POSITIVE_INFINITY),f=R(r.maxImagesPerRow),N=Number.isFinite(f),I=e=>{const s=e.width/e.height;return Number.isFinite(s)&&s>0?s:1},p=e=>e.reduce((s,h)=>s+I(h),0),m=e=>Math.max(u-(e.length-1)*w,0),n=e=>m(e)/p(e),g=e=>e>a?e/a:a/e,o=[];let c=0;const l=e=>{const s=n(e),h=Math.min(s,d),T=m(e),F=h<s?T/p(e):h;o.push({items:e.map(x=>({image:x,width:I(x)*F})),height:h,isPartial:!1,fillsContainer:!0}),c=Math.max(c,h)},b=e=>{const s=Math.min(n(e),d,c||a);o.push({items:e.map(h=>({image:h,width:I(h)*s})),height:s,isPartial:!0,fillsContainer:!1})};let i=[];for(let e=0;e<t.length;e++){i.push(t[e]);const h=p(i)*a+(i.length-1)*w>u,T=e===t.length-1;if(h&&i.length>1){const _=n(i),F=n(i.slice(0,-1));g(_)<=g(F)||(i.pop(),e--),l(i),i=[]}else i.length>=f?(l(i),i=[]):T&&(N&&i.length<f?b(i):l(i),i=[])}return o}function A(t,r){return typeof t=="number"&&Number.isFinite(t)&&t>=0?t:r}function W(t,r){return typeof t=="number"&&t>0&&(Number.isFinite(t)||t===1/0)?t:r}export{E as DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH,P as calculateAlbumLayout,M as calculatePhotoLayout,H as normalizeAlbumMaxRowHeightVh,R as normalizeMaxImagesPerRow};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.10.0",
+  "version": "4.11.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",