neba 1.17.1 → 1.18.1

package/dist/components/gallery/Gallery.d.ts

@@ -35,6 +35,19 @@ export interface NebaGalleryItem {
     title?: React.ReactNode;
     /** The second, one step down the scale and muted. */
     description?: React.ReactNode;
+    /**
+     * The same picture at other widths, as an `<img>` takes them, so a tile drawn
+     * 300 pixels wide is not sent a 4000-pixel original. The viewer is handed it
+     * too when the item has no `full`, and chooses a candidate for its own size.
+     */
+    srcSet?: string;
+    /**
+     * How wide the tile is drawn, for the browser to choose from `srcSet` by:
+     * `'(min-width: 64rem) 25vw, (min-width: 40rem) 33vw, 50vw'` for the default
+     * columns across the whole page. Left out, the browser assumes the tile is as
+     * wide as the window.
+     */
+    sizes?: string;
     /**
      * A larger file for the viewer, when the tile is a thumbnail. Falls back to
      * `src`, so a set that has only one size of each picture needs nothing here.
@@ -122,10 +135,21 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
      * When the tiles' files load. `lazy` waits until a tile is near the screen,
      * so a wall of forty photographs asks for the few a reader can see rather
      * than all forty at once. Set `eager` when the gallery is the largest thing
-     * above the fold, where a lazy first row arrives later than it should.
+     * above the fold, where a lazy first row arrives later than it should, or
+     * leave this alone and give `priority` the length of that row.
      * @default 'lazy'
      */
     loading?: 'lazy' | 'eager';
+    /**
+     * How many tiles, counted from the first item, are pictures the page is
+     * judged by. Each of them is an Image with `priority`: fetched early and
+     * never lazily whatever `loading` says, and drawn from the first paint with
+     * no fade and no Skeleton. For a gallery whose first row is the largest thing
+     * above the fold, it is the length of that row; the tiles after it keep
+     * `loading`.
+     * @default 0
+     */
+    priority?: number;
     /**
      * Where a tile's `title` and `description` go. `below` puts them under the
      * picture, `overlay` writes them across the foot of it, and `hover` is
@@ -148,8 +172,9 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
      * Opens the picture full size when a tile is clicked, with the rest of the
      * set an arrow key away.
      *
-     * The viewer is fetched on demand, so a Gallery that does not offer one does
-     * not carry it.
+     * The viewer is fetched when a pointer, the focus or a finger first reaches
+     * the gallery, and mounted by the press that opens it: a Gallery nobody
+     * reaches for does not carry it, and a server render does not wait on it.
      * @default false
      */
     preview?: boolean;
@@ -175,6 +200,23 @@ export interface GalleryProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
     /** Class names for the parts behind the root. */
     classNames?: NebaSlots<GallerySlot>;
 }
+/**
+ * The one request for the viewer's chunk, shared by everything that asks.
+ *
+ * Asked for when a pointer arrives over the gallery, when the focus reaches a
+ * tile or when a finger lands on one, so the download is under way before the
+ * press that opens it; and by `React.lazy` at that press, which is handed the
+ * same promise and waits only for what is left of it. A request that fails is
+ * forgotten, so the next one tries again rather than failing for good.
+ *
+ * An object rather than a function so a test can spy on it. Exported for that,
+ * and deliberately left out of the barrel.
+ */
+export declare const viewerChunk: {
+    load(): Promise<{
+        default: typeof import("./GalleryViewer.js").GalleryViewer;
+    }>;
+};
 /**
  * Whether an item is turned onto its side, whatever number its turn was written
  * as. Exported for the viewer, and deliberately left out of the barrel.

package/dist/components/gallery/Gallery.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as r from"react";import{Image as o}from"../image/Image.js";import{responsiveSlots as a,withBaseline as l}from"../../internal/responsive.js";import{useBreakpointValue as s}from"../../hooks/useMediaQuery.js";import{fillMessage as n,galleryMessages as u,useMessages as d}from"../../internal/i18n.js";import{cx as m,hasContent as c,metaTextClasses as p,radiusClasses as f,sheetTitleClasses as h,toLength as g,transitionClasses as x}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const v=r.lazy(()=>import("./GalleryViewer.js").then(e=>({default:e.GalleryViewer}))),w={xs:2,sm:3,lg:4},y={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"};function N(e,t){if(void 0===e)return t;if("number"==typeof e)return e>0?e:t;const[i,r]=e.split("/"),o=void 0===r?Number(i):Number(i)/Number(r);return Number.isFinite(o)&&o>0?o:t}export function isSideways(e){return Math.abs(Math.round((e.rotate??0)/90))%2==1}export function shownRatioOf(e,t){const i=N(e.ratio,t);return void 0!==e.ratio&&isSideways(e)?1/i:i}const j={none:"",lift:"group-hover/tile:[box-shadow:var(--neba-shadow-2)] group-has-[:focus-visible]/tile:[box-shadow:var(--neba-shadow-2)] supports-[not_selector(:has(*))]:group-focus-within/tile:[box-shadow:var(--neba-shadow-2)]",dim:"",zoom:""},$={none:"",lift:"",dim:"group-hover/tile:[filter:brightness(0.82)] group-has-[:focus-visible]/tile:[filter:brightness(0.82)] supports-[not_selector(:has(*))]:group-focus-within/tile:[filter:brightness(0.82)]",zoom:"group-hover/tile:[transform:scale(1.06)] group-has-[:focus-visible]/tile:[transform:scale(1.06)] supports-[not_selector(:has(*))]:group-focus-within/tile:[transform:scale(1.06)]"};export const Gallery=/*@__PURE__*/r.forwardRef(function Gallery(_,k){const{items:M,layout:S="grid",columns:z,gap:R="md",ratio:q=1,rowHeight:G=220,rounded:A="md",fit:C="cover",letterbox:I,loading:O="lazy",caption:F="none",hover:V="lift",preview:B=!1,onItemSelect:E,filter:H,frame:Q,watermark:T,protect:W=!1,label:D,locale:J,empty:K,className:L,classNames:P,style:U,...X}=b(_,["locale"]),Y=d(u,J),Z=r.useId(),[ee,te]=r.useState(null),ie=l(z??w,2),re=Math.max(1,s(ie)??2),oe="string"==typeof R&&R in y?y[R]:g(R)??y.md,ae=!1===A?"":f[!0===A?"md":A],le=N(q,1),se=(r,a,l)=>{const s=c(r.title)||c(r.description),u="none"!==F&&s,d="overlay"===F||"hover"===F,f=`${Z}-${a}-title`,g=`${Z}-${a}-description`,b=`${Z}-${a}-position`,v=n(Y.item,{index:String(a+1),total:String(M.length)}),w=e(o,{src:r.src,alt:r.alt,ratio:"grid"===S?q:"quilted"===S?"auto":void 0!==r.ratio&&isSideways(r)?shownRatioOf(r,le):r.ratio??q,fit:C,position:r.position,letterbox:I,rotate:r.rotate,flip:r.flip,placeholder:r.placeholder,loading:O,rounded:!1,filter:H,frame:Q,watermark:T,protect:W,className:m("size-full",P?.image),classNames:{image:m("motion-reduce:[transition-duration:0ms]",$[V])}}),y=u?t("span",{className:m("min-w-0",d?m("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===F?"opacity-0 group-hover/tile:opacity-100 group-has-[:focus-visible]/tile:opacity-100 supports-[not_selector(:has(*))]:group-focus-within/tile:opacity-100 [@media(hover:none)]:opacity-100 [transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]":""):"flex flex-col gap-0.5 pt-1.5",P?.caption),children:[c(r.title)?e("span",{id:f,className:m("truncate font-medium",h.sm,d?"":"text-(--neba-fg)",P?.title),children:r.title}):null,c(r.description)?e("span",{id:g,className:m("truncate",p.md,d?"text-white/80":"text-(--neba-muted-fg)",P?.description),children:r.description}):null]}):null,N=t("span",{className:m("relative block overflow-hidden",ae,"quilted"===S||"justified"===S?"size-full":"","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",j[V]),children:[w,d?y:null]}),_=d||!u?N:t(i,{children:[N,y]});return e("li",{className:m("group/tile relative m-0 min-w-0 list-none","justified"===S?"flex flex-col":"",P?.item),style:l,children:B||E?t("button",{type:"button","aria-label":u?void 0:`${r.alt} — ${v}`,"aria-labelledby":u?`${c(r.title)?f:g} ${b}`:void 0,"aria-haspopup":B?"dialog":void 0,"aria-describedby":u&&c(r.title)&&c(r.description)?g:void 0,className:m("block w-full text-start",B?"cursor-zoom-in":"cursor-pointer",x,"focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ae,"justified"===S?"flex-1":""),onClick:()=>(e=>{E?.(M[e],e),B&&te(e)})(a),children:[_,u?e("span",{id:b,hidden:!0,children:v}):null]}):_},r.id??r.src)},ne=m("neba-gallery m-0 list-none p-0","justified"===S?"neba-gallery-justified flex flex-wrap":"","masonry"===S?"flex items-start":"","grid"===S||"quilted"===S?"grid":"",L??""),ue={gap:oe,...a("cols",ie,e=>String(Math.max(1,Math.round(e)))),..."grid"===S||"quilted"===S?{gridTemplateColumns:"repeat(var(--n-cols), minmax(0, 1fr))"}:null,..."quilted"===S?{gridAutoRows:`${G}px`,gridAutoFlow:"dense"}:null,...U};let de;if("masonry"===S){de=function(e,t){const i=Array.from({length:t},()=>[]),r=new Array(t).fill(0);return e.forEach((e,o)=>{let a=0;for(let e=1;e<t;e+=1)r[e]<r[a]&&(a=e);i[a].push(o),r[a]+=1/e}),i}(M.map(e=>shownRatioOf(e,le)),re).map((t,i)=>e("li",{className:"m-0 flex min-w-0 flex-1 list-none flex-col",style:{gap:oe},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:oe},children:t.map(e=>se(M[e],e,{}))})},i))}else de="justified"===S?M.map((e,t)=>{const i=shownRatioOf(e,le);return se(e,t,{flexGrow:i,flexBasis:i*G+"px",maxWidth:"100%"})}):M.map((e,t)=>se(e,t,"quilted"===S?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===M.length&&c(K)?e(i,{children:K}):t(i,{children:[e("ul",{ref:k,role:"list","aria-label":D??Y.label,className:ne,style:ue,...X,children:de}),B?e(r.Suspense,{fallback:null,children:e(v,{items:M,index:ee,onIndexChange:te,locale:J,watermark:T,protect:W,messages:Y})}):null]})});
+"use client";import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import*as o from"react";import{Image as r}from"../image/Image.js";import{breakpoints as a,hiddenBelowClasses as l,hiddenFromClasses as n,responsiveSlots as s,valueAt as u,withBaseline as c}from"../../internal/responsive.js";import{useBreakpointValue as d}from"../../hooks/useMediaQuery.js";import{useHydrated as m}from"../../internal/media.js";import{fillMessage as p,galleryMessages as f,useMessages as h}from"../../internal/i18n.js";import{cx as g,hasContent as x,metaTextClasses as b,radiusClasses as v,sheetTitleClasses as w,toLength as y,transitionClasses as j}from"../../internal/styles.js";import{useStyleDefaults as N}from"../../internal/defaults.js";let k;export const viewerChunk={load:()=>(k??=import("./GalleryViewer.js").then(e=>({default:e.GalleryViewer})).catch(e=>{throw k=void 0,e}),k)};const M=o.lazy(()=>viewerChunk.load()),$={xs:2,sm:3,lg:4},S={xs:"0.25rem",sm:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"};function _(e,t){if(void 0===e)return t;if("number"==typeof e)return e>0?e:t;const[i,o]=e.split("/"),r=void 0===o?Number(i):Number(i)/Number(o);return Number.isFinite(r)&&r>0?r:t}export function isSideways(e){return Math.abs(Math.round((e.rotate??0)/90))%2==1}export function shownRatioOf(e,t){const i=_(e.ratio,t);return void 0!==e.ratio&&isSideways(e)?1/i:i}const z={none:"",lift:"group-hover/tile:[box-shadow:var(--neba-shadow-2)] group-has-[:focus-visible]/tile:[box-shadow:var(--neba-shadow-2)] supports-[not_selector(:has(*))]:group-focus-within/tile:[box-shadow:var(--neba-shadow-2)]",dim:"",zoom:""},R={none:"",lift:"",dim:"group-hover/tile:[filter:brightness(0.82)] group-has-[:focus-visible]/tile:[filter:brightness(0.82)] supports-[not_selector(:has(*))]:group-focus-within/tile:[filter:brightness(0.82)]",zoom:"group-hover/tile:[transform:scale(1.06)] group-has-[:focus-visible]/tile:[transform:scale(1.06)] supports-[not_selector(:has(*))]:group-focus-within/tile:[transform:scale(1.06)]"};export const Gallery=/*@__PURE__*/o.forwardRef(function Gallery(k,C){const{items:q,layout:F="grid",columns:G,gap:A="md",ratio:I=1,rowHeight:O=220,rounded:E="md",fit:T="cover",letterbox:P,loading:V="lazy",priority:B=0,caption:H="none",hover:Q="lift",preview:W=!1,onItemSelect:D,filter:J,frame:K,watermark:L,protect:U=!1,label:X,locale:Y,empty:Z,className:ee,classNames:te,style:ie,onPointerEnter:oe,onFocus:re,onTouchStart:ae,...le}=N(k,["locale"]),ne=h(f,Y),se=o.useId(),[ue,ce]=o.useState(null),[de,me]=o.useState(!1),pe=o.useRef(!1),fe=()=>{W&&!pe.current&&(pe.current=!0,viewerChunk.load().catch(()=>{}))},he=c(G??$,2),ge=Math.max(1,d(he)??2),xe=m(),be="string"==typeof A&&A in S?S[A]:y(A)??S.md,ve=!1===E?"":v[!0===E?"md":E],we=_(I,1),ye=(o,a,l)=>{const n=x(o.title)||x(o.description),s="none"!==H&&n,u="overlay"===H||"hover"===H,c=`${se}-${a}-title`,d=`${se}-${a}-description`,m=`${se}-${a}-position`,f=p(ne.item,{index:String(a+1),total:String(q.length)}),h=a<B,v=e(r,{src:o.src,srcSet:o.srcSet,sizes:o.sizes,alt:o.alt,ratio:"grid"===F?I:"quilted"===F?"auto":void 0!==o.ratio&&isSideways(o)?shownRatioOf(o,we):o.ratio??I,fit:T,position:o.position,letterbox:P,rotate:o.rotate,flip:o.flip,placeholder:o.placeholder,loading:h?void 0:V,priority:h,rounded:!1,filter:J,frame:K,watermark:L,protect:U,className:g("size-full",te?.image),classNames:{image:g("motion-reduce:[transition-duration:0ms]",R[Q])}}),y=s?t("span",{className:g("min-w-0",u?g("pointer-events-none absolute inset-x-0 bottom-0 flex flex-col gap-0.5 p-2.5 text-white","[background:linear-gradient(to_top,color-mix(in_oklab,#000_72%,transparent),transparent)]","hover"===H?"opacity-0 group-hover/tile:opacity-100 group-has-[:focus-visible]/tile:opacity-100 supports-[not_selector(:has(*))]:group-focus-within/tile:opacity-100 [@media(hover:none)]:opacity-100 [transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]":""):"flex flex-col gap-0.5 pt-1.5",te?.caption),children:[x(o.title)?e("span",{id:c,className:g("truncate font-medium",w.sm,u?"":"text-(--neba-fg)",te?.title),children:o.title}):null,x(o.description)?e("span",{id:d,className:g("truncate",b.md,u?"text-white/80":"text-(--neba-muted-fg)",te?.description),children:o.description}):null]}):null,N=t("span",{className:g("relative block overflow-hidden",ve,"quilted"===F||"justified"===F?"size-full":"","[transition:box-shadow_var(--neba-duration)_var(--neba-ease)]",z[Q]),children:[v,u?y:null]}),k=u||!s?N:t(i,{children:[N,y]});return e("li",{className:g("group/tile relative m-0 min-w-0 list-none","justified"===F?"flex flex-col":"",te?.item),style:l,children:W||D?t("button",{type:"button","aria-label":s?void 0:`${o.alt} — ${f}`,"aria-labelledby":s?`${x(o.title)?c:d} ${m}`:void 0,"aria-haspopup":W?"dialog":void 0,"aria-describedby":s&&x(o.title)&&x(o.description)?d:void 0,className:g("block w-full text-start",W?"cursor-zoom-in":"cursor-pointer",j,"focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ve,"justified"===F?"flex-1":""),onClick:()=>(e=>{D?.(q[e],e),W&&(me(!0),ce(e))})(a),children:[k,s?e("span",{id:m,hidden:!0,children:f}):null]}):k},o.id??o.src)},je=g("neba-gallery m-0 list-none p-0","justified"===F?"neba-gallery-justified flex flex-wrap":"","masonry"===F?"flex items-start":"","grid"===F||"quilted"===F?"grid":"",ee??""),Ne={gap:be,...s("cols",he,e=>String(Math.max(1,Math.round(e)))),..."grid"===F||"quilted"===F?{gridTemplateColumns:"repeat(var(--n-cols), minmax(0, 1fr))"}:null,..."quilted"===F?{gridAutoRows:`${O}px`,gridAutoFlow:"dense"}:null,...ie};let ke;if("masonry"===F){const t=q.map(e=>shownRatioOf(e,we)),i=(i,o)=>function(e,t){const i=Array.from({length:t},()=>[]),o=new Array(t).fill(0);return e.forEach((e,r)=>{let a=0;for(let e=1;e<t;e+=1)o[e]<o[a]&&(a=e);i[a].push(r),o[a]+=1/e}),i}(t,i).map((t,r)=>e("li",{className:g("m-0 flex min-w-0 flex-1 list-none flex-col",o),style:{gap:be},children:e("ul",{className:"m-0 flex list-none flex-col p-0",style:{gap:be},children:t.map(e=>ye(q[e],e,{}))})},`${i}-${r}`)),o=a.map(e=>({breakpoint:e,count:Math.max(1,Math.round(u(he,e)??2))})),r=o.filter((e,t)=>0===t||e.count!==o[t-1].count);ke=xe||1===r.length?i(Math.max(1,Math.round(ge)),""):r.flatMap((e,t)=>{const o=r[t+1];return i(e.count,g(l[e.breakpoint],o?n[o.breakpoint]:""))})}else ke="justified"===F?q.map((e,t)=>{const i=shownRatioOf(e,we);return ye(e,t,{flexGrow:i,flexBasis:i*O+"px",maxWidth:"100%"})}):q.map((e,t)=>ye(e,t,"quilted"===F?{gridColumn:`span ${Math.max(1,Math.round(e.cols??1))}`,gridRow:`span ${Math.max(1,Math.round(e.rows??1))}`}:{}));return 0===q.length&&x(Z)?e(i,{children:Z}):t(i,{children:[e("ul",{ref:C,role:"list","aria-label":X??ne.label,className:je,style:Ne,...le,onPointerEnter:e=>{fe(),oe?.(e)},onFocus:e=>{fe(),re?.(e)},onTouchStart:e=>{fe(),ae?.(e)},children:ke}),W&&de?e(o.Suspense,{fallback:null,children:e(M,{items:q,index:ue,onIndexChange:ce,locale:Y,watermark:L,protect:U,messages:ne})}):null]})});

package/dist/components/gallery/GalleryViewer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Dialog as l}from"../dialog/Dialog.js";import{IconButton as n}from"../icon-button/IconButton.js";import{Image as a}from"../image/Image.js";import{ChevronIcon as i}from"../../internal/icons.js";import{fillMessage as r}from"../../internal/i18n.js";import{cx as o,hasContent as s,metaTextClasses as c,srOnlyClasses as m}from"../../internal/styles.js";import{isSideways as d,shownRatioOf as u}from"./Gallery.js";export function GalleryViewer({items:p,index:f,onIndexChange:h,locale:v,watermark:x,protect:g,messages:b}){const j=null!==f,y=null===f?void 0:p[f],N=null===f||f<=0,w=null===f||f>=p.length-1,k=y?.title??y?.alt,D=void 0!==y&&d(y),C=D&&void 0!==y.ratio?u(y,1):null,K=e=>{e>=0&&e<p.length&&h(e)};return e(l,{open:j,onOpenChange:e=>{e||h(null)},size:"xl",locale:v,title:y?.title??y?.alt??"",description:y?.description,onKeyDown:e=>{if(null===f||e.metaKey||e.ctrlKey||e.altKey)return;const t="rtl"===getComputedStyle(e.currentTarget).direction?-1:1;"ArrowRight"===e.key?(e.preventDefault(),K(f+t)):"ArrowLeft"===e.key&&(e.preventDefault(),K(f-t))},children:t("div",{className:"flex flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[y?e(a,{src:y.full??y.src,alt:y.alt,ratio:C??"auto",fit:"contain",rounded:"md",rotate:y.rotate,flip:y.flip,watermark:x,protect:g,className:D?null===C?"max-h-[70vh]":void 0:"max-h-[70vh] w-auto",classNames:D?void 0:{image:"max-h-[70vh] w-auto object-contain"},style:D?{width:null===C?"100%":`min(100%, calc(70vh * ${C}))`}:void 0},y.id??y.src):null,p.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(n,{variant:"solid",elevation:1,label:b.previous,disabled:N,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(i,{})}),onClick:()=>K((f??0)-1)}),e(n,{variant:"solid",elevation:1,label:b.next,disabled:w,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(i,{})}),onClick:()=>K((f??0)+1)})]}):null]}),p.length>1?t("p",{className:o("m-0 text-center text-(--neba-muted-fg)",c.md),"aria-live":"polite","aria-atomic":"true",children:[s(k)?t("span",{className:m,children:[k,", "]}):null,e("span",{children:r(b.item,{index:String((f??0)+1),total:String(p.length)})})]}):null]})})}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Dialog as l}from"../dialog/Dialog.js";import{IconButton as n}from"../icon-button/IconButton.js";import{Image as i}from"../image/Image.js";import{ChevronIcon as a}from"../../internal/icons.js";import{fillMessage as r}from"../../internal/i18n.js";import{cx as o,hasContent as s,metaTextClasses as c,srOnlyClasses as m}from"../../internal/styles.js";import{isSideways as d,shownRatioOf as u}from"./Gallery.js";export function GalleryViewer({items:p,index:f,onIndexChange:h,locale:v,watermark:x,protect:g,messages:b}){const j=null!==f,y=null===f?void 0:p[f],N=null===f||f<=0,w=null===f||f>=p.length-1,k=y?.title??y?.alt,D=void 0!==y&&d(y),C=D&&void 0!==y.ratio?u(y,1):null,S=e=>{e>=0&&e<p.length&&h(e)};return e(l,{open:j,onOpenChange:e=>{e||h(null)},size:"xl",locale:v,title:y?.title??y?.alt??"",description:y?.description,onKeyDown:e=>{if(null===f||e.metaKey||e.ctrlKey||e.altKey)return;const t="rtl"===getComputedStyle(e.currentTarget).direction?-1:1;"ArrowRight"===e.key?(e.preventDefault(),S(f+t)):"ArrowLeft"===e.key&&(e.preventDefault(),S(f-t))},children:t("div",{className:"flex flex-col gap-3",children:[t("div",{className:"relative flex items-center justify-center",children:[y?e(i,{src:y.full??y.src,srcSet:void 0===y.full?y.srcSet:void 0,alt:y.alt,ratio:C??"auto",fit:"contain",rounded:"md",rotate:y.rotate,flip:y.flip,watermark:x,protect:g,className:D?null===C?"max-h-[70vh]":void 0:"max-h-[70vh] w-auto",classNames:D?void 0:{image:"max-h-[70vh] w-auto object-contain"},style:D?{width:null===C?"100%":`min(100%, calc(70vh * ${C}))`}:void 0},y.id??y.src):null,p.length>1?t("div",{className:"pointer-events-none absolute inset-x-0 flex items-center justify-between px-1",children:[e(n,{variant:"solid",elevation:1,label:b.previous,disabled:N,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center rotate-90 rtl:-rotate-90",children:e(a,{})}),onClick:()=>S((f??0)-1)}),e(n,{variant:"solid",elevation:1,label:b.next,disabled:w,focusableWhenDisabled:!0,className:"pointer-events-auto",icon:e("span",{className:"flex items-center -rotate-90 rtl:rotate-90",children:e(a,{})}),onClick:()=>S((f??0)+1)})]}):null]}),p.length>1?t("p",{className:o("m-0 text-center text-(--neba-muted-fg)",c.md),"aria-live":"polite","aria-atomic":"true",children:[s(k)?t("span",{className:m,children:[k,", "]}):null,e("span",{children:r(b.item,{index:String((f??0)+1),total:String(p.length)})})]}):null]})})}

package/dist/components/gauge-chart/GaugeChart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as r,useMeasuredWidth as l,chartHeight as s,useMeasuredHeight as i}from"../../internal/chart-frame.js";import{arcPath as o,chartFontSizes as m,compactNumber as h,ringPath as c,textWidth as f,truncate as u}from"../../internal/chart.js";import{numberFormatter as d}from"../../internal/format.js";import{emptyMessages as x,useMessages as p}from"../../internal/i18n.js";import{thresholdColor as M}from"../../internal/progress.js";import{cx as g,hasContent as b,metaTextClasses as v}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";function N(t,a,e,n){const r=(n-90)*Math.PI/180;return[t+e*Math.cos(r),a+e*Math.sin(r)]}export function GaugeChart(j){const{value:k,min:w=0,max:z=100,sweep:S=180,thickness:$=.22,thresholds:W,ticks:q=!1,showRange:A=!0,center:B,caption:C,height:D,format:I,locale:L,label:P,empty:R,size:F="md",variant:G="text",color:Y="primary",padded:E=!1,className:H,...J}=y(j,["size","variant","locale"]),K=n.useRef(null),O=l(K),Q=p(x,L),T=n.useCallback(t=>I?d(L,I).format(t):h(t,L),[I,L]),U=Math.max(1,Math.min(360,S)),V=U/2,X=-V,Z=V,_=z-w,tt=null===k||Number.isNaN(k)||0===_?null:Math.min(1,Math.max(0,(k-w)/_)),at=null===k?Y:M(k,Y,W),et=i(K,"string"==typeof D),nt=s(D,F,et),rt=m[F],lt=Math.min(.9,Math.max(.05,$)),st=V*Math.PI/180,it=U>=360?1:Math.max(0,-Math.cos(st)),ot=U>=180?1:Math.sin(st),mt=Math.sin(st),ht=-Math.cos(st),ct=A&&U<330?[w,z].map(t=>u(T(t),Math.max(0,.28*O),rt)):[],ft=ct.reduce((t,a)=>Math.max(t,f(a,rt)),0),ut=.35*rt,dt=!1===q?0:.85*rt,xt=ht<=.25,pt=xt?0:.5*rt,Mt=xt?rt:rt*(.35+.55*ht),gt=ct.length>0?ht*pt+Mt+.25*rt:0,bt=Math.max(ut,dt),vt=Math.max(ut,dt),yt=Math.max(ut,dt,gt),Nt=[(O/2-bt)/Math.max(.05,ot),(nt-vt-yt)/(1+it)];if(ft>0&&mt>.05){const t=xt?ft/2:ft;Nt.push(Math.max(0,O/2-ut-t)/mt-pt)}const jt=Math.max(0,Math.min(...Nt)),kt=jt*(1-lt),wt=O/2,zt=vt+jt*(1+it)+yt,St=vt+jt+Math.max(0,(nt-zt)/2),$t=O>0,Wt=0===_||$t&&jt<=0,qt=b(C)?1.85*rt:0,At=St-kt*(1-Math.min(1,it))/2,Bt=Math.min(kt,Math.abs(St-At)),Ct=Math.min(kt,Math.abs(St-At-qt/2)),Dt=2*Math.sqrt(Math.max(0,kt*kt-Ct*Ct)),It=B??(null===k?"—":T(k)),Lt="string"==typeof It?f(It,1):0,Pt=Lt>0?Math.max(rt,Math.min(2*rt,function(t,a,e,n,r){const l=t*t/(4*r*r)+n*n,s=2*a*n,i=a*a-e*e;return l<=0||i>=0?0:(Math.sqrt(s*s-4*l*i)-s)/(2*l)}(Lt,Bt,kt,.42,.86))):2*rt,Rt=!1===q?0:Math.max(2,Math.floor(q));return t(r,{...J,variant:G,color:Y,size:F,padded:E,legendSide:"bottom",className:H,legend:null,table:null,children:t("div",{ref:K,className:"relative w-full",style:{height:"string"==typeof D?D:nt},...void 0===P?{}:null===tt||null===k?{role:"img","aria-label":P}:{role:"meter","aria-label":P,"aria-valuenow":k,"aria-valuemin":w,"aria-valuemax":z,"aria-valuetext":["string"==typeof It||"number"==typeof It?String(It):T(k),"string"==typeof C||"number"==typeof C?String(C):""].filter(Boolean).join(" ")},children:Wt?t("div",{className:g("flex h-full items-center justify-center text-(--neba-muted-fg)",v[F]),children:R??Q.title}):$t?a(e,{children:[a("svg",{width:O,height:nt,viewBox:`0 0 ${O} ${nt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:o(wt,St,jt,kt,X,Z),fill:`var(--neba-${Y}-soft)`}),null!==tt?t("path",{d:c(wt,St,(jt+kt)/2,X,Z),fill:"none",stroke:`var(--neba-${at}-fill)`,strokeWidth:jt-kt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-tt,style:{transition:"stroke-dashoffset var(--neba-duration-fill) var(--neba-ease), stroke var(--neba-duration) var(--neba-ease)"}}):null,Rt>0?Array.from({length:Rt},(a,e)=>{const n=X+U*e/(Rt-1),[r,l]=N(wt,St,jt+.25*rt,n),[s,i]=N(wt,St,jt+.6*rt,n);return t("line",{x1:r,y1:l,x2:s,y2:i,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ct.length>0?[[ct[0],X,"start"],[ct[1],Z,"end"]].map(([a,e,n])=>{const[r,l]=N(wt,St,jt+pt,e);return t("text",{x:r,y:l+Mt,textAnchor:xt?"middle":"start"===n?"end":"start",fontSize:rt,fill:"var(--neba-muted-fg)",children:a},n)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:At+qt/2,maxWidth:Dt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:Pt},children:It}),C?t("span",{className:g("text-(--neba-muted-fg)",v[F]),children:C}):null]})]}):a("div",{className:"flex h-full flex-col items-center justify-center gap-0.5 text-center",children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:2*rt},children:It}),C?t("span",{className:g("text-(--neba-muted-fg)",v[F]),children:C}):null]})})})}
+"use client";import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import*as n from"react";import{ChartSurface as r,useMeasuredWidth as l,chartHeight as s,useMeasuredHeight as i}from"../../internal/chart-frame.js";import{arcPath as o,chartFontSizes as m,compactNumber as h,ringPath as c,textWidth as f,truncate as u}from"../../internal/chart.js";import{numberFormatter as d}from"../../internal/format.js";import{emptyMessages as x,useMessages as p}from"../../internal/i18n.js";import{thresholdColor as M}from"../../internal/progress.js";import{cx as g,hasContent as b,metaTextClasses as v}from"../../internal/styles.js";import{useStyleDefaults as y}from"../../internal/defaults.js";import{useIntlLocale as j}from"../../internal/media.js";function N(t,a,e,n){const r=(n-90)*Math.PI/180;return[t+e*Math.cos(r),a+e*Math.sin(r)]}export function GaugeChart(k){const{value:w,min:z=0,max:S=100,sweep:$=180,thickness:W=.22,thresholds:q,ticks:A=!1,showRange:B=!0,center:C,caption:D,height:I,format:L,locale:P,label:R,empty:F,size:G="md",variant:Y="text",color:E="primary",padded:H=!1,className:J,...K}=y(k,["size","variant","locale"]),O=n.useRef(null),Q=l(O),T=p(x,P),U=j(P),V=n.useCallback(t=>L?d(U,L).format(t):h(t,U),[L,U]),X=Math.max(1,Math.min(360,$)),Z=X/2,_=-Z,tt=Z,at=S-z,et=null===w||Number.isNaN(w)||0===at?null:Math.min(1,Math.max(0,(w-z)/at)),nt=null===w?E:M(w,E,q),rt=i(O,"string"==typeof I),lt=s(I,G,rt),st=m[G],it=Math.min(.9,Math.max(.05,W)),ot=Z*Math.PI/180,mt=X>=360?1:Math.max(0,-Math.cos(ot)),ht=X>=180?1:Math.sin(ot),ct=Math.sin(ot),ft=-Math.cos(ot),ut=B&&X<330?[z,S].map(t=>u(V(t),Math.max(0,.28*Q),st)):[],dt=ut.reduce((t,a)=>Math.max(t,f(a,st)),0),xt=.35*st,pt=!1===A?0:.85*st,Mt=ft<=.25,gt=Mt?0:.5*st,bt=Mt?st:st*(.35+.55*ft),vt=ut.length>0?ft*gt+bt+.25*st:0,yt=Math.max(xt,pt),jt=Math.max(xt,pt),Nt=Math.max(xt,pt,vt),kt=[(Q/2-yt)/Math.max(.05,ht),(lt-jt-Nt)/(1+mt)];if(dt>0&&ct>.05){const t=Mt?dt/2:dt;kt.push(Math.max(0,Q/2-xt-t)/ct-gt)}const wt=Math.max(0,Math.min(...kt)),zt=wt*(1-it),St=Q/2,$t=jt+wt*(1+mt)+Nt,Wt=jt+wt+Math.max(0,(lt-$t)/2),qt=Q>0,At=0===at||qt&&wt<=0,Bt=b(D)?1.85*st:0,Ct=Wt-zt*(1-Math.min(1,mt))/2,Dt=Math.min(zt,Math.abs(Wt-Ct)),It=Math.min(zt,Math.abs(Wt-Ct-Bt/2)),Lt=2*Math.sqrt(Math.max(0,zt*zt-It*It)),Pt=C??(null===w?"—":V(w)),Rt="string"==typeof Pt?f(Pt,1):0,Ft=Rt>0?Math.max(st,Math.min(2*st,function(t,a,e,n,r){const l=t*t/(4*r*r)+n*n,s=2*a*n,i=a*a-e*e;return l<=0||i>=0?0:(Math.sqrt(s*s-4*l*i)-s)/(2*l)}(Rt,Dt,zt,.42,.86))):2*st,Gt=!1===A?0:Math.max(2,Math.floor(A));return t(r,{...K,variant:Y,color:E,size:G,padded:H,legendSide:"bottom",className:J,legend:null,table:null,children:t("div",{ref:O,className:"relative w-full",style:{height:"string"==typeof I?I:lt},...void 0===R?{}:null===et||null===w?{role:"img","aria-label":R}:{role:"meter","aria-label":R,"aria-valuenow":w,"aria-valuemin":z,"aria-valuemax":S,"aria-valuetext":["string"==typeof Pt||"number"==typeof Pt?String(Pt):V(w),"string"==typeof D||"number"==typeof D?String(D):""].filter(Boolean).join(" ")},children:At?t("div",{className:g("flex h-full items-center justify-center text-(--neba-muted-fg)",v[G]),children:F??T.title}):qt?a(e,{children:[a("svg",{width:Q,height:lt,viewBox:`0 0 ${Q} ${lt}`,"aria-hidden":"true",className:"block",children:[t("path",{d:o(St,Wt,wt,zt,_,tt),fill:`var(--neba-${E}-soft)`}),null!==et?t("path",{d:c(St,Wt,(wt+zt)/2,_,tt),fill:"none",stroke:`var(--neba-${nt}-fill)`,strokeWidth:wt-zt,pathLength:"1",strokeDasharray:"1",strokeDashoffset:1-et,style:{transition:"stroke-dashoffset var(--neba-duration-fill) var(--neba-ease), stroke var(--neba-duration) var(--neba-ease)"}}):null,Gt>0?Array.from({length:Gt},(a,e)=>{const n=_+X*e/(Gt-1),[r,l]=N(St,Wt,wt+.25*st,n),[s,i]=N(St,Wt,wt+.6*st,n);return t("line",{x1:r,y1:l,x2:s,y2:i,stroke:"var(--neba-chart-grid)",strokeWidth:1,strokeLinecap:"round"},e)}):null,ut.length>0?[[ut[0],_,"start"],[ut[1],tt,"end"]].map(([a,e,n])=>{const[r,l]=N(St,Wt,wt+gt,e);return t("text",{x:r,y:l+bt,textAnchor:Mt?"middle":"start"===n?"end":"start",fontSize:st,fill:"var(--neba-muted-fg)",children:a},n)}):null]}),a("div",{className:"pointer-events-none absolute inset-x-0 mx-auto flex flex-col items-center gap-0.5 text-center",style:{top:Ct+Bt/2,maxWidth:Lt,transform:"translateY(-50%)"},children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:Ft},children:Pt}),D?t("span",{className:g("text-(--neba-muted-fg)",v[G]),children:D}):null]})]}):a("div",{className:"flex h-full flex-col items-center justify-center gap-0.5 text-center",children:[t("span",{className:"font-semibold tabular-nums text-(--neba-fg)",style:{fontSize:2*st},children:Pt}),D?t("span",{className:g("text-(--neba-muted-fg)",v[G]),children:D}):null]})})})}

package/dist/components/heatmap-chart/HeatmapChart.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{ChartExport as n,ChartScaleLegend as a,ChartStatus as r,ChartSummary as i,ChartSurface as o,ChartTooltipPanel as d,markTransitionClasses as h,summarise as s,useMeasuredWidth as m,useReleaseOutside as c,chartHeight as u,useMeasuredHeight as x}from"../../internal/chart-frame.js";import{categoryAt as f,chartFontSizes as p,compactNumber as g,formatCategory as w,markGap as v,rampFill as b,rampInk as y,rampStep as M,rampSteps as k,squarify as A,textWidth as $,toValues as z,truncate as N,turnedAxis as j}from"../../internal/chart.js";import{numberFormatter as E}from"../../internal/format.js";import{cx as S,metaTextClasses as B,srOnlyClasses as C}from"../../internal/styles.js";import{chartMessages as D,emptyMessages as I,useMessages as F}from"../../internal/i18n.js";import{useStyleDefaults as L}from"../../internal/defaults.js";export function HeatmapChart(P){const{series:R,categories:U,shape:_="grid",scale:q="sequential",midpoint:H=0,min:K,max:T,valueLabels:G="none",xAxis:J,yAxis:O,height:Q,format:V,locale:X,label:Y,legend:Z,tooltip:ee,empty:te,exportable:le=!1,exportFileName:ne="chart.csv",onExport:ae,size:re="md",variant:ie="text",padded:oe=!1,className:de,...he}=L(P,["size","variant","locale"]),se=l.useRef(null),me=m(se),ce=F(I,X),ue=F(D,X),xe=l.useId(),[fe,pe]=l.useState(null);c(se,null!==fe,()=>pe(null));const ge=l.useId(),we=l.useCallback(e=>V?E(X,V).format(e):g(e,X),[V,X]),ve=l.useMemo(()=>z(R),[R]),be=ve.reduce((e,t)=>Math.max(e,t.length),0),ye=l.useMemo(()=>Array.from({length:be},(e,t)=>f(t,U,ve)),[be,U,ve]),Me=l.useMemo(()=>R.map((e,t)=>e.name??`${t+1}`),[R]),ke=l.useMemo(()=>{let e=1/0,t=-1/0,l=!1;for(const n of ve)for(const a of n)null!==a.value&&(l=!0,e=Math.min(e,a.value),t=Math.max(t,a.value));return l?{min:e,max:t}:null},[ve]),Ae=K??ke?.min??0,$e=T??ke?.max??1,ze=l.useCallback(e=>M(e,Ae,$e,q,H),[Ae,$e,q,H]),Ne=x(se,"string"==typeof Q),je=u(Q,re,Ne),Ee=p[re],Se=!0===Z||void 0===Z||!1===Z?{}:Z,Be=!1!==Z,Ce=Se.side??"bottom",De=!1===ee?{mode:"none"}:!0===ee||void 0===ee?{}:ee,Ie="none"===De.mode,Fe=null===ke||0===be||0===R.length,Le=O?.tickFormat,We="treemap"===_||O?.hidden,Pe=l.useMemo(()=>{if(We||me<=0)return{texts:[],band:0};const e=Math.min(150,.25*me),t=Me.map((t,l)=>N(Le?String(Le(t,l)):t,e,Ee));return{texts:t,band:t.reduce((e,t)=>Math.max(e,$(t,Ee)),0)+10}},[We,Me,Le,me,Ee]),Re="treemap"===_?0:J?.tickAngle,Ue=l.useMemo(()=>j(Re,Ee),[Re,Ee]),_e=J?.tickFormat,qe=l.useMemo(()=>ye.map((e,t)=>_e?String(_e(e,t)):w(e,X)),[ye,_e,X]),He=Math.min(140,.4*je),Ke=l.useMemo(()=>0===Ue.angle?qe:qe.map(e=>N(e,Ue.cut(He),Ee)),[qe,Ue,He,Ee]),Te=Ke.reduce((e,t)=>Math.max(e,$(t,Ee)),0),Ge=Ee+6,Je="treemap"===_||J?.hidden?0:Ue.depth(Te)+8+(J?.label?Ge:0),Oe=Boolean(O?.label)&&!We,Qe=(Oe?Ge+2:0)+(le?20:0),Ve={left:O?.thickness??Pe.band,top:Qe,width:Math.max(0,me-(O?.thickness??Pe.band)),height:Math.max(0,je-(J?.thickness??Je)-Qe)},Xe=l.useMemo(()=>{if(Ve.width<=0||Ve.height<=0)return[];if("treemap"===_){const e=[];return ve.forEach((t,l)=>t.forEach((t,n)=>{null!==t.value&&e.push({row:l,index:n,cell:t})})),A(e.map(e=>Math.max(0,e.cell.value??0)),Ve.width,Ve.height).map(t=>({row:e[t.index].row,index:e[t.index].index,cell:e[t.index].cell,x:Ve.left+t.x,y:Ve.top+t.y,width:t.width,height:t.height}))}const e=Ve.height/Math.max(1,R.length),t=Ve.width/Math.max(1,be),l=[];return ve.forEach((n,a)=>n.forEach((n,r)=>{null!==n.value&&l.push({row:a,index:r,cell:n,x:Ve.left+r*t,y:Ve.top+a*e,width:t,height:e})})),l},[_,ve,R.length,be,Ve.left,Ve.top,Ve.width,Ve.height]),Ye=l.useCallback(e=>w(e.cell.x??U?.[e.index]??ye[e.index]??e.index,X),[U,ye,X]),Ze=l.useMemo(()=>{if("treemap"!==_)return{heads:ye.map(e=>w(e,X)),rows:ve.map(e=>ye.map((t,l)=>e[l]))};const e=[],t=new Map,l=ve.map(l=>{const n=[];return l.forEach((l,a)=>{const r=w(l.x??U?.[a]??ye[a]??a,X);let i=t.get(r);void 0===i&&(i=e.length,t.set(r,i),e.push(r)),n[i]=l}),n});return{heads:e,rows:l}},[_,ye,ve,U,X]),et=null===fe?null:Xe.find(e=>e.row===fe.row&&e.index===fe.index)??null,tt=null===et?[]:[{seriesIndex:et.row,color:et.cell.color??b(ze(et.cell.value??0),q),value:et.cell.value,formatted:we(et.cell.value??0),label:et.cell.label}],lt=Array.from({length:k},(e,t)=>b(t,q));return t(o,{...he,size:re,variant:ie,padded:oe,className:de,legendSide:Ce,legend:Be&&!Fe?e(a,{steps:lt,from:we("diverging"===q?-W(Ae,$e,H)+H:Ae),to:we("diverging"===q?W(Ae,$e,H)+H:$e),middle:"diverging"===q?we(H):void 0,align:Se.align??"center",vertical:"left"===Ce||"right"===Ce,size:re}):null,table:Fe?null:t("table",{id:xe,className:C,children:[Y?e("caption",{children:Y}):null,e("thead",{children:t("tr",{children:[e("th",{scope:"col"}),Ze.heads.map((t,l)=>e("th",{scope:"col",children:t},l))]})}),e("tbody",{children:Ze.rows.map((l,n)=>t("tr",{children:[e("th",{scope:"row",children:Me[n]}),Ze.heads.map((t,n)=>{const a=l[n];return e("td",{children:void 0!==a?.label?a.label:null==a?.value?"":we(a.value)},n)})]},n))})]}),children:[le&&!Fe?e(n,{rows:()=>[["",...Ze.heads],...Ze.rows.map((e,t)=>[Me[t],...Ze.heads.map((t,l)=>e[l]?.value??null)])],fileName:ne,onExport:ae,label:ue.exportCsv}):null,t("div",{ref:se,role:"img",tabIndex:Fe?void 0:0,"aria-label":Y??ue.label,"aria-describedby":Fe?void 0:ge,onPointerLeave:e=>{"touch"!==e.pointerType&&pe(null)},onBlur:()=>pe(null),onKeyDown:e=>{if(Ie||0===Xe.length)return;const t=null===fe?-1:Xe.findIndex(e=>e.row===fe.row&&e.index===fe.index),l="treemap"!==_&&-1!==t,n="ArrowRight"===e.key||"ArrowDown"===e.key;if(!l||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if(n||"ArrowLeft"===e.key||"ArrowUp"===e.key){const e=n?Xe[Math.min(Xe.length-1,t+1)]:Xe[Math.max(0,(-1===t?Xe.length:t)-1)];pe({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;pe(null)}else{const l=Xe[t],n="ArrowDown"===e.key,a=Xe.filter(e=>e.index===l.index&&(n?e.row>l.row:e.row<l.row)).sort((e,t)=>n?e.row-t.row:t.row-e.row)[0];a&&pe({row:a.row,index:a.index})}e.preventDefault()},className:S("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof Q?Q:je},children:[Fe?e("div",{className:S("flex h-full items-center justify-center text-(--neba-muted-fg)",B[re]),children:te??ce.title}):me>0?t("svg",{width:me,height:je,viewBox:`0 0 ${me} ${je}`,"aria-hidden":"true",className:"block",children:[Xe.map(l=>{const n=ze(l.cell.value??0),a=fe?.row===l.row&&fe?.index===l.index,r=Math.max(0,l.width-v),i=Math.max(0,l.height-v);if(r<=0||i<=0)return null;const o=we(l.cell.value??0),d="treemap"===_?"all"===G?[Ye(l),o]:[Ye(l)]:"all"===G?[o]:[],s=d.filter(e=>function(e,t,l,n){return l>=1.8*n&&t>=Math.min($(e,n),2.5*n)+8}(e,r,i/d.length,Ee)),m=l.cell.color?"var(--neba-surface)":y(n,q);return t("g",{children:[e("rect",{x:l.x+v/2,y:l.y+v/2,width:r,height:i,rx:Math.min(3,r/2,i/2),fill:l.cell.color??b(n,q),opacity:a?1:.94,onPointerEnter:Ie?void 0:()=>pe({row:l.row,index:l.index}),className:h}),s.map((t,n)=>e("text",{x:l.x+l.width/2,y:l.y+l.height/2+(n-(s.length-1)/2)*(Ee+2),textAnchor:"middle",dominantBaseline:"central",fontSize:Ee,fontWeight:0===n?500:400,fill:m,opacity:0===n?1:.85,pointerEvents:"none",className:0===n&&"treemap"===_?void 0:"tabular-nums",children:N(t,l.width-8,Ee)},n))]},`${l.row}-${l.index}`)}),"grid"!==_||O?.hidden?null:Pe.texts.map((t,l)=>e("text",{x:Ve.left-8,y:Ve.top+(l+.5)*Ve.height/Math.max(1,R.length),textAnchor:"end",dominantBaseline:"central",fontSize:Ee,fill:"var(--neba-muted-fg)",children:t},`row-${l}`)),"grid"!==_||J?.hidden?null:Ke.map((t,l)=>{const n=Ve.width/Math.max(1,be);if(l%Math.max(1,Math.ceil(Ue.room(Te)/Math.max(1,n)))!==0)return null;const a=Ve.left+(l+.5)*n,r=Ve.top+Ve.height+Ue.offset-6;return e("text",{x:a,y:r,textAnchor:Ue.anchor,transform:0===Ue.angle?void 0:`rotate(${Ue.angle} ${a} ${r})`,dominantBaseline:0===Ue.angle?void 0:"central",fontSize:Ee,fill:"var(--neba-muted-fg)",children:t},`col-${l}`)}),Oe?e("text",{x:Ve.left,y:Ee+2,textAnchor:"start",fontSize:Ee,fill:"var(--neba-muted-fg)",fontWeight:500,children:O?.label}):null,"grid"===_&&J?.label&&!J.hidden?e("text",{x:Ve.left+Ve.width,y:Ve.top+Ve.height+Ue.depth(Te)+Ee+8,textAnchor:"end",fontSize:Ee,fill:"var(--neba-muted-fg)",fontWeight:500,children:J.label}):null]}):null,et&&!Ie?De.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:et.x+et.width/2,top:et.y},children:De.render({index:et.index,category:et.cell.x??ye[et.index]??et.index,items:tt})}):e(d,{heading:`${Me[et.row]} · ${Ye(et)}`,items:tt,x:et.x+et.width/2,y:et.y,flip:et.x+et.width/2>.6*me,size:re}):null]}),Fe?null:e(i,{id:ge,template:ue.summary,locale:X,...s(ve,we)}),Ie?null:e(r,{heading:et?`${Me[et.row]} · ${Ye(et)}`:void 0,items:tt})]})}function W(e,t,l){return Math.max(Math.abs(t-l),Math.abs(l-e))}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{chartTableClasses as l,ChartExport as i,ChartScaleLegend as a,ChartStatus as r,ChartSummary as o,ChartSurface as d,ChartTooltipPanel as s,markTransitionClasses as h,summarise as m,useDeferredRows as c,useMeasuredWidth as u,useReleaseOutside as x,chartHeight as f,useMeasuredHeight as p}from"../../internal/chart-frame.js";import{categoryAt as g,chartFontSizes as w,compactNumber as v,formatCategory as b,markGap as y,rampFill as M,rampInk as k,rampStep as A,rampSteps as $,squarify as N,textWidth as j,toValues as z,truncate as E,turnedAxis as S}from"../../internal/chart.js";import{numberFormatter as B}from"../../internal/format.js";import{cx as C,metaTextClasses as D}from"../../internal/styles.js";import{chartMessages as I,emptyMessages as F,useMessages as L}from"../../internal/i18n.js";import{useStyleDefaults as W}from"../../internal/defaults.js";import{useIntlLocale as H}from"../../internal/media.js";export function HeatmapChart(l){const{series:c,categories:T,shape:U="grid",scale:_="sequential",midpoint:q=0,min:J,max:K,valueLabels:O="none",xAxis:G,yAxis:Q,height:V,format:X,locale:Y,label:Z,legend:ee,tooltip:te,empty:ne,exportable:le=!1,exportFileName:ie="chart.csv",onExport:ae,size:re="md",variant:oe="text",padded:de=!1,className:se,...he}=W(l,["size","variant","locale"]),me=n.useRef(null),ce=u(me),ue=L(F,Y),xe=L(I,Y),fe=H(Y),pe=n.useId(),[ge,we]=n.useState(null);x(me,null!==ge,()=>we(null));const ve=n.useId(),be=X?JSON.stringify(X):"",ye=n.useCallback(e=>X?B(fe,X).format(e):v(e,fe),[be,fe]),Me=n.useMemo(()=>z(c),[c]),ke=Me.reduce((e,t)=>Math.max(e,t.length),0),Ae=n.useMemo(()=>Array.from({length:ke},(e,t)=>g(t,T,Me)),[ke,T,Me]),$e=n.useMemo(()=>c.map((e,t)=>e.name??`${t+1}`),[c]),Ne=n.useMemo(()=>{let e=1/0,t=-1/0,n=!1;for(const l of Me)for(const i of l)null!==i.value&&(n=!0,e=Math.min(e,i.value),t=Math.max(t,i.value));return n?{min:e,max:t}:null},[Me]),je=J??Ne?.min??0,ze=K??Ne?.max??1,Ee=n.useCallback(e=>A(e,je,ze,_,q),[je,ze,_,q]),Se=p(me,"string"==typeof V),Be=f(V,re,Se),Ce=w[re],De=!0===ee||void 0===ee||!1===ee?{}:ee,Ie=!1!==ee,Fe=De.side??"bottom",Le=!1===te?{mode:"none"}:!0===te||void 0===te?{}:te,We="none"===Le.mode,He=null===Ne||0===ke||0===c.length,Pe=Q?.tickFormat,Re="treemap"===U||Q?.hidden,Te=n.useMemo(()=>{if(Re||ce<=0)return{texts:[],band:0};const e=Math.min(150,.25*ce),t=$e.map((t,n)=>E(Pe?String(Pe(t,n)):t,e,Ce));return{texts:t,band:t.reduce((e,t)=>Math.max(e,j(t,Ce)),0)+10}},[Re,$e,Pe,ce,Ce]),Ue="treemap"===U?0:G?.tickAngle,_e=n.useMemo(()=>S(Ue,Ce),[Ue,Ce]),qe=G?.tickFormat,Je=n.useMemo(()=>Ae.map((e,t)=>qe?String(qe(e,t)):b(e,fe)),[Ae,qe,fe]),Ke=Math.min(140,.4*Be),Oe=n.useMemo(()=>0===_e.angle?Je:Je.map(e=>E(e,_e.cut(Ke),Ce)),[Je,_e,Ke,Ce]),Ge=Oe.reduce((e,t)=>Math.max(e,j(t,Ce)),0),Qe=Ce+6,Ve="treemap"===U||G?.hidden?0:_e.depth(Ge)+8+(G?.label?Qe:0),Xe=Boolean(Q?.label)&&!Re,Ye=(Xe?Qe+2:0)+(le?20:0),Ze={left:Q?.thickness??Te.band,top:Ye,width:Math.max(0,ce-(Q?.thickness??Te.band)),height:Math.max(0,Be-(G?.thickness??Ve)-Ye)},et=n.useMemo(()=>{if(Ze.width<=0||Ze.height<=0)return[];if("treemap"===U){const e=[];return Me.forEach((t,n)=>t.forEach((t,l)=>{null!==t.value&&e.push({row:n,index:l,cell:t})})),N(e.map(e=>Math.max(0,e.cell.value??0)),Ze.width,Ze.height).map(t=>({row:e[t.index].row,index:e[t.index].index,cell:e[t.index].cell,x:Ze.left+t.x,y:Ze.top+t.y,width:t.width,height:t.height}))}const e=Ze.height/Math.max(1,c.length),t=Ze.width/Math.max(1,ke),n=[];return Me.forEach((l,i)=>l.forEach((l,a)=>{null!==l.value&&n.push({row:i,index:a,cell:l,x:Ze.left+a*t,y:Ze.top+i*e,width:t,height:e})})),n},[U,Me,c.length,ke,Ze.left,Ze.top,Ze.width,Ze.height]),tt=n.useCallback(e=>b(e.cell.x??T?.[e.index]??Ae[e.index]??e.index,fe),[T,Ae,fe]),nt=n.useMemo(()=>{const e=Me.reduce((e,t)=>e+t.length,0);if("treemap"!==U)return{heads:Ae.map(e=>b(e,fe)),rows:Me.map(e=>Ae.map((t,n)=>e[n])),points:e};const t=[],n=new Map,l=Me.map(e=>{const l=[];return e.forEach((e,i)=>{const a=b(e.x??T?.[i]??Ae[i]??i,fe);let r=n.get(a);void 0===r&&(r=t.length,n.set(a,r),t.push(a)),l[r]=e}),l});return{heads:t,rows:l,points:e}},[U,Ae,Me,T,fe]),lt=null===ge?null:et.find(e=>e.row===ge.row&&e.index===ge.index)??null,it=null===lt?[]:[{seriesIndex:lt.row,color:lt.cell.color??M(Ee(lt.cell.value??0),_),value:lt.cell.value,formatted:ye(lt.cell.value??0),label:lt.cell.label}],at=Array.from({length:$},(e,t)=>M(t,_));return t(d,{...he,size:re,variant:oe,padded:de,className:se,legendSide:Fe,legend:Ie&&!He?e(a,{steps:at,from:ye("diverging"===_?-R(je,ze,q)+q:je),to:ye("diverging"===_?R(je,ze,q)+q:ze),middle:"diverging"===_?ye(q):void 0,align:De.align??"center",vertical:"left"===Fe||"right"===Fe,size:re}):null,table:He?null:e(P,{id:pe,caption:Z,heads:nt.heads,rows:nt.rows,names:$e,points:nt.points,format:ye}),children:[le&&!He?e(i,{rows:()=>[["",...nt.heads],...nt.rows.map((e,t)=>[$e[t],...nt.heads.map((t,n)=>e[n]?.value??null)])],fileName:ie,onExport:ae,label:xe.exportCsv}):null,t("div",{ref:me,role:"img",tabIndex:He?void 0:0,"aria-label":Z??xe.label,"aria-describedby":He?void 0:ve,onPointerLeave:e=>{"touch"!==e.pointerType&&we(null)},onBlur:()=>we(null),onKeyDown:e=>{if(We||0===et.length)return;const t=null===ge?-1:et.findIndex(e=>e.row===ge.row&&e.index===ge.index),n="treemap"!==U&&-1!==t,l="ArrowRight"===e.key||"ArrowDown"===e.key;if(!n||"ArrowDown"!==e.key&&"ArrowUp"!==e.key)if(l||"ArrowLeft"===e.key||"ArrowUp"===e.key){const e=l?et[Math.min(et.length-1,t+1)]:et[Math.max(0,(-1===t?et.length:t)-1)];we({row:e.row,index:e.index})}else{if("Escape"!==e.key)return;we(null)}else{const n=et[t],l="ArrowDown"===e.key,i=et.filter(e=>e.index===n.index&&(l?e.row>n.row:e.row<n.row)).sort((e,t)=>l?e.row-t.row:t.row-e.row)[0];i&&we({row:i.row,index:i.index})}e.preventDefault()},className:C("relative w-full rounded-(--neba-radius-xs)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"),style:{height:"string"==typeof V?V:Be},children:[He?e("div",{className:C("flex h-full items-center justify-center text-(--neba-muted-fg)",D[re]),children:ne??ue.title}):ce>0?t("svg",{width:ce,height:Be,viewBox:`0 0 ${ce} ${Be}`,"aria-hidden":"true",className:"block",children:[et.map(n=>{const l=Ee(n.cell.value??0),i=ge?.row===n.row&&ge?.index===n.index,a=Math.max(0,n.width-y),r=Math.max(0,n.height-y);if(a<=0||r<=0)return null;const o=ye(n.cell.value??0),d="treemap"===U?"all"===O?[tt(n),o]:[tt(n)]:"all"===O?[o]:[],s=d.filter(e=>function(e,t,n,l){return n>=1.8*l&&t>=Math.min(j(e,l),2.5*l)+8}(e,a,r/d.length,Ce)),m=n.cell.color?"var(--neba-surface)":k(l,_);return t("g",{children:[e("rect",{x:n.x+y/2,y:n.y+y/2,width:a,height:r,rx:Math.min(3,a/2,r/2),fill:n.cell.color??M(l,_),opacity:i?1:.94,onPointerEnter:We?void 0:()=>we({row:n.row,index:n.index}),className:h}),s.map((t,l)=>e("text",{x:n.x+n.width/2,y:n.y+n.height/2+(l-(s.length-1)/2)*(Ce+2),textAnchor:"middle",dominantBaseline:"central",fontSize:Ce,fontWeight:0===l?500:400,fill:m,opacity:0===l?1:.85,pointerEvents:"none",className:0===l&&"treemap"===U?void 0:"tabular-nums",children:E(t,n.width-8,Ce)},l))]},`${n.row}-${n.index}`)}),"grid"!==U||Q?.hidden?null:Te.texts.map((t,n)=>e("text",{x:Ze.left-8,y:Ze.top+(n+.5)*Ze.height/Math.max(1,c.length),textAnchor:"end",dominantBaseline:"central",fontSize:Ce,fill:"var(--neba-muted-fg)",children:t},`row-${n}`)),"grid"!==U||G?.hidden?null:Oe.map((t,n)=>{const l=Ze.width/Math.max(1,ke);if(n%Math.max(1,Math.ceil(_e.room(Ge)/Math.max(1,l)))!==0)return null;const i=Ze.left+(n+.5)*l,a=Ze.top+Ze.height+_e.offset-6;return e("text",{x:i,y:a,textAnchor:_e.anchor,transform:0===_e.angle?void 0:`rotate(${_e.angle} ${i} ${a})`,dominantBaseline:0===_e.angle?void 0:"central",fontSize:Ce,fill:"var(--neba-muted-fg)",children:t},`col-${n}`)}),Xe?e("text",{x:Ze.left,y:Ce+2,textAnchor:"start",fontSize:Ce,fill:"var(--neba-muted-fg)",fontWeight:500,children:Q?.label}):null,"grid"===U&&G?.label&&!G.hidden?e("text",{x:Ze.left+Ze.width,y:Ze.top+Ze.height+_e.depth(Ge)+Ce+8,textAnchor:"end",fontSize:Ce,fill:"var(--neba-muted-fg)",fontWeight:500,children:G.label}):null]}):null,lt&&!We?Le.render?e("div",{className:"pointer-events-none absolute z-10",style:{left:lt.x+lt.width/2,top:lt.y},children:Le.render({index:lt.index,category:lt.cell.x??Ae[lt.index]??lt.index,items:it})}):e(s,{heading:`${$e[lt.row]} · ${tt(lt)}`,items:it,x:lt.x+lt.width/2,y:lt.y,flip:lt.x+lt.width/2>.6*ce,size:re}):null]}),He?null:e(o,{id:ve,template:xe.summary,locale:fe,...m(Me,ye)}),We?null:e(r,{heading:lt?`${$e[lt.row]} · ${tt(lt)}`:void 0,items:it})]})}const P=/*@__PURE__*/n.memo(function HeatmapTable({id:n,caption:i,heads:a,rows:r,names:o,points:d,format:s}){const h=c({rows:r.length,points:d,columns:a.length+1});return t("table",{id:n,className:l,"aria-busy":h<r.length||void 0,children:[i?e("caption",{children:i}):null,e("thead",{children:t("tr",{children:[e("th",{scope:"col"}),a.map((t,n)=>e("th",{scope:"col",children:t},n))]})}),e("tbody",{children:r.slice(0,h).map((n,l)=>t("tr",{children:[e("th",{scope:"row",children:o[l]}),a.map((t,l)=>{const i=n[l];return e("td",{children:void 0!==i?.label?i.label:null==i?.value?"":s(i.value)},l)})]},l))})]})});function R(e,t,n){return Math.max(Math.abs(t-n),Math.abs(n-e))}

package/dist/components/how-to-steps/HowToSteps.d.ts

@@ -20,6 +20,20 @@ export interface HowToStep {
     image?: string;
     /** What that picture says for a reader who cannot see it. Defaults to `title`. */
     imageAlt?: string;
+    /**
+     * The picture's own pixel dimensions, as an `<img>` takes them. Together they
+     * are its proportion, which the browser reserves before the file arrives, so
+     * the panel is the right height from the first paint rather than growing as
+     * the pictures land. They are not a size: the picture still spans the panel.
+     */
+    imageWidth?: number;
+    imageHeight?: number;
+    /**
+     * When the picture is fetched. `lazy` waits until the guide is near the
+     * screen; `eager` is for a guide at the top of the page.
+     * @default 'lazy'
+     */
+    imageLoading?: 'lazy' | 'eager';
 }
 export interface HowToStepsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'content'> {
     /**

package/dist/components/how-to-steps/HowToSteps.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as l from"react";import{Button as a}from"../button/Button.js";import{boxPaddingClasses as r}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{fillMessage as m,stepsMessages as d,useMessages as p}from"../../internal/i18n.js";import{transitionProps as f}from"../../internal/animate.js";import{cx as u,hasContent as x,headingTitleClasses as g,iconClasses as h,insetRingClasses as b,metaTextClasses as v,radiusClasses as N,sheetBodyClasses as w,sheetSectionGapClasses as y,sheetTitleClasses as j,srOnlyClasses as k,surfaceClasses as S,surfaceSlots as C,toLength as z,transitionClasses as R}from"../../internal/styles.js";import{inertValue as H}from"../../internal/inert.js";import{useStyleDefaults as L}from"../../internal/defaults.js";const I={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},M={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},T={solid:[S,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[S,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function B(e){return"string"==typeof e?e:""}function StepHeading({level:e,...t}){return l.createElement(`h${Math.min(6,Math.max(1,e))}`,t)}export const HowToSteps=/*@__PURE__*/l.forwardRef(function HowToSteps(S,E){const{steps:W,title:$,headingLevel:D=3,step:_,defaultStep:A=0,onStepChange:F,completed:q,defaultCompleted:G=!1,onCompletedChange:J,orientation:K="vertical",maxHeight:O,railWidth:P="15rem",navigation:Q=!0,divider:U=!0,transition:V="fade",completion:X=!0,completedContent:Y,variant:Z="outline",size:ee="md",color:te="primary",density:ne="default",elevation:le=0,locale:ae,previousLabel:re,nextLabel:ie,doneLabel:oe,restartLabel:se,className:ce,style:me,...de}=L(S,["size","density","variant","locale"]),pe=p(d,ae),fe=l.useId(),ue=x($),[xe,ge]=l.useState(A),[he,be]=l.useState(G),ve=void 0!==_,Ne=void 0!==q,we=W.length,ye=Math.min(Math.max(ve?_:xe,0),Math.max(we-1,0)),je=X&&(Ne?q:he),ke=void 0!==O,Se="vertical"===K,Ce=l.useRef(null),ze=l.useRef(null);l.useEffect(()=>{const e=Ce.current,t=ze.current;if(!e||!t)return;const n=e.getBoundingClientRect(),l=t.getBoundingClientRect();Se?l.top<n.top?e.scrollTop-=n.top-l.top:l.bottom>n.bottom&&(e.scrollTop+=l.bottom-n.bottom):l.left<n.left?e.scrollLeft-=n.left-l.left:l.right>n.right&&(e.scrollLeft+=l.right-n.right)},[ye,Se]);const Re=l.useRef(null),He=l.useRef(null),Le=l.useRef(null);if(l.useEffect(()=>{null!==Le.current&&Le.current===je&&(Le.current=null,(je?Re:He).current?.focus())},[je]),0===we)return null;const Ie=(e,t=!1)=>{Ne||be(t),je!==t&&J?.(t),t||(ve||ge(e),e!==ye&&F?.(e))},Me=0===ye,Te=ye===we-1,Be=(e,t)=>{Le.current=e.currentTarget===document.activeElement?t:null},Ee="none"===V?null:f(V),We=t=>{const n=je||t<ye,l=!je&&t===ye;return e("span",{"aria-hidden":"true",className:u("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",I[ee].text,R,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":l?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},$e=e("ol",{ref:Ce,role:"list","aria-label":pe.steps,className:u("m-0 flex list-none p-0",Se?"flex-col":"flex-row",M[ne][ee],ke&&Se?"min-h-0 overflow-y-auto overscroll-contain":"",Se?"":"overflow-x-auto overscroll-contain"),children:W.map((n,l)=>{const a=je||l<ye,r=!je&&l===ye,i=B(n.title);return t("li",{ref:r?ze:void 0,className:u("relative",Se?"":"min-w-0 flex-1"),children:[l<we-1?e("span",{"aria-hidden":"true",className:u("absolute",R,a?"bg-(--n-fill)":"bg-(--n-line)",Se?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>Ie(l),"aria-current":r?"step":void 0,"aria-label":i?m(pe.step,{index:String(l+1),title:i}):void 0,className:u("flex w-full cursor-pointer items-center p-1 text-start",Se?"gap-3":"flex-col gap-1.5 text-center",N.sm,"hover:bg-(--n-soft)",R,b),children:[We(l),e("span",{className:u("min-w-0",Se?"truncate":"",v[ee],r?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title})]})]},l)})}),De=t("div",{className:u("grid flex-1 grid-cols-1",ke?"min-h-0":""),children:[W.map((n,l)=>{const a=je||l!==ye;return t("div",{"aria-hidden":a,inert:H(a),className:u("col-start-1 row-start-1 min-w-0",ke?"overflow-y-auto overscroll-contain":"",a?"invisible":Ee?.className??""),style:a?void 0:Ee?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[x(n.icon)?e("span",{"aria-hidden":"true",className:u("flex h-[1lh] shrink-0 items-center text-(--n-accent)",j[ee],h),children:n.icon}):null,e(StepHeading,{level:ue?D+1:D,className:u("neba-heading min-w-0 flex-1","[&.neba-heading]:m-0 [&.neba-heading]:font-medium [&.neba-heading]:text-inherit",g[ee]),children:n.title}),e("span",{className:u("shrink-0 text-(--neba-muted-fg) tabular-nums",v[ee]),children:m(pe.position,{index:String(l+1),total:String(we)})})]}),n.image?e("img",{src:n.image,alt:n.imageAlt??B(n.title),loading:"lazy",decoding:"async",className:u("mb-3 max-h-72 w-full object-contain",N[ee])}):null,x(n.content)?e("div",{className:u("min-w-0",w[ee]),children:n.content}):null]},l)}),X?t("div",{"aria-hidden":!je,inert:H(!je),className:u("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",je?Ee?.className??"":"invisible"),style:je?Ee?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:u("m-0 font-medium",w[ee]),children:Y??pe.completed})]}):null]});return t("div",{ref:E,role:ue?"group":void 0,"aria-labelledby":ue?fe:void 0,className:u("flex min-w-0 flex-col",N[ee],r[ne][ee],y[ee],T[Z],R,ce),style:{...C(te,le),"--n-fill":`var(--neba-${te}-fill)`,"--n-on-solid":`var(--neba-${te}-on-solid)`,"--n-step-mark":I[ee].box,"--n-step-rail":z(P),...ke?{maxHeight:z(O)}:null,...me},...de,children:[ue?e(StepHeading,{level:D,id:fe,className:u("neba-heading shrink-0","[&.neba-heading]:m-0 [&.neba-heading]:font-medium [&.neba-heading]:text-inherit",g[ee]),children:$}):null,e("span",{className:k,"aria-live":"polite",children:je?"":"string"==typeof W[ye]?.title?m(pe.step,{index:String(ye+1),title:W[ye].title}):m(pe.position,{index:String(ye+1),total:String(we)})}),t("div",{className:u("flex min-w-0 flex-1 flex-col",ke?"min-h-0":"",Se?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:u("flex min-w-0 flex-col",ke?"min-h-0":"",Se?"sm:w-(--n-step-rail) sm:shrink-0":"",U?Se?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",U?"[border-color:var(--n-line)]":""),children:$e}),t("div",{className:u("flex min-w-0 flex-1 flex-col",ke?"min-h-0":"",y[ee]),children:[De,Q?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:je?e(a,{ref:Re,size:ee,variant:"outline",color:te,startIcon:e(s,{}),onClick:e=>{Be(e,!1),Ie(0)},children:se??pe.restart}):t(n,{children:[e(a,{size:ee,variant:"outline",color:te,disabled:Me,focusableWhenDisabled:!0,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>Ie(ye-1),children:re??pe.previous}),e(a,Te&&X?{ref:He,size:ee,variant:"solid",color:te,startIcon:e(i,{}),onClick:e=>{Be(e,!0),Ie(ye,!0)},children:oe??pe.done}:{ref:He,size:ee,variant:"solid",color:te,disabled:Te,focusableWhenDisabled:!0,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>Ie(ye+1),children:ie??pe.next})]})}):null]})]})]})});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as a from"react";import{Button as l}from"../button/Button.js";import{boxPaddingClasses as r}from"../box/Box.js";import{CheckIcon as i,ChevronIcon as o,RestartIcon as s,SuccessIcon as c}from"../../internal/icons.js";import{fillMessage as m,stepsMessages as d,useMessages as p}from"../../internal/i18n.js";import{transitionProps as f}from"../../internal/animate.js";import{cx as u,hasContent as g,headingTitleClasses as h,iconClasses as x,insetRingClasses as b,metaTextClasses as v,radiusClasses as w,sheetBodyClasses as N,sheetSectionGapClasses as y,sheetTitleClasses as j,srOnlyClasses as k,surfaceClasses as S,surfaceSlots as C,toLength as z,transitionClasses as H}from"../../internal/styles.js";import{inertValue as L}from"../../internal/inert.js";import{useStyleDefaults as R}from"../../internal/defaults.js";const I={xs:{box:"1.25rem",text:"text-[0.625rem]"},sm:{box:"1.5rem",text:"text-[0.6875rem]"},md:{box:"1.75rem",text:"text-[0.75rem]"},lg:{box:"2rem",text:"text-[0.8125rem]"},xl:{box:"2.25rem",text:"text-[0.875rem]"}},M={default:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"},compact:{xs:"gap-0",sm:"gap-0",md:"gap-0.5",lg:"gap-0.5",xl:"gap-1"}},T={solid:[S,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[S,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"};function B(e){return"string"==typeof e?e:""}function StepHeading({level:e,...t}){return a.createElement(`h${Math.min(6,Math.max(1,e))}`,t)}export const HowToSteps=/*@__PURE__*/a.forwardRef(function HowToSteps(S,E){const{steps:W,title:$,headingLevel:D=3,step:_,defaultStep:A=0,onStepChange:F,completed:q,defaultCompleted:G=!1,onCompletedChange:J,orientation:K="vertical",maxHeight:O,railWidth:P="15rem",navigation:Q=!0,divider:U=!0,transition:V="fade",completion:X=!0,completedContent:Y,variant:Z="outline",size:ee="md",color:te="primary",density:ne="default",elevation:ae=0,locale:le,previousLabel:re,nextLabel:ie,doneLabel:oe,restartLabel:se,className:ce,style:me,...de}=R(S,["size","density","variant","locale"]),pe=p(d,le),fe=a.useId(),ue=g($),[ge,he]=a.useState(A),[xe,be]=a.useState(G),ve=void 0!==_,we=void 0!==q,Ne=W.length,ye=Math.min(Math.max(ve?_:ge,0),Math.max(Ne-1,0)),je=X&&(we?q:xe),ke=void 0!==O,Se="vertical"===K,Ce=a.useRef(null),ze=a.useRef(null);a.useEffect(()=>{const e=Ce.current,t=ze.current;if(!e||!t)return;const n=e.getBoundingClientRect(),a=t.getBoundingClientRect();Se?a.top<n.top?e.scrollTop-=n.top-a.top:a.bottom>n.bottom&&(e.scrollTop+=a.bottom-n.bottom):a.left<n.left?e.scrollLeft-=n.left-a.left:a.right>n.right&&(e.scrollLeft+=a.right-n.right)},[ye,Se]);const He=a.useRef(null),Le=a.useRef(null),Re=a.useRef(null);if(a.useEffect(()=>{null!==Re.current&&Re.current===je&&(Re.current=null,(je?He:Le).current?.focus())},[je]),0===Ne)return null;const Ie=(e,t=!1)=>{we||be(t),je!==t&&J?.(t),t||(ve||he(e),e!==ye&&F?.(e))},Me=0===ye,Te=ye===Ne-1,Be=(e,t)=>{Re.current=e.currentTarget===document.activeElement?t:null},Ee="none"===V?null:f(V),We=t=>{const n=je||t<ye,a=!je&&t===ye;return e("span",{"aria-hidden":"true",className:u("z-1 flex shrink-0 items-center justify-center rounded-full border font-medium","size-(--n-step-mark) [&_svg]:size-[1.15em]",I[ee].text,H,n?"bg-(--n-fill) text-(--n-on-solid) [border-color:transparent]":a?"bg-(--neba-surface) text-(--n-accent) [border-color:var(--n-accent)]":"bg-(--neba-surface) text-(--neba-muted-fg) [border-color:var(--n-line)]"),children:n?e(i,{}):t+1})},$e=e("ol",{ref:Ce,role:"list","aria-label":pe.steps,className:u("m-0 flex list-none p-0",Se?"flex-col":"flex-row",M[ne][ee],ke&&Se?"min-h-0 overflow-y-auto overscroll-contain":"",Se?"":"overflow-x-auto overscroll-contain"),children:W.map((n,a)=>{const l=je||a<ye,r=!je&&a===ye,i=B(n.title);return t("li",{ref:r?ze:void 0,className:u("relative",Se?"":"min-w-0 flex-1"),children:[a<Ne-1?e("span",{"aria-hidden":"true",className:u("absolute",H,l?"bg-(--n-fill)":"bg-(--n-line)",Se?["w-px","[inset-inline-start:calc(0.25rem+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark))]","[height:calc(100%-var(--n-step-mark))]"].join(" "):["h-px","[inset-inline-start:calc(50%+var(--n-step-mark)/2)]","[top:calc(0.25rem+var(--n-step-mark)/2)]","[width:calc(100%-var(--n-step-mark))]"].join(" "))}):null,t("button",{type:"button",onClick:()=>Ie(a),"aria-current":r?"step":void 0,"aria-label":i?m(pe.step,{index:String(a+1),title:i}):void 0,className:u("flex w-full cursor-pointer items-center p-1 text-start",Se?"gap-3":"flex-col gap-1.5 text-center",w.sm,"hover:bg-(--n-soft)",H,b),children:[We(a),e("span",{className:u("min-w-0",Se?"truncate":"",v[ee],r?"font-medium text-(--neba-fg)":"text-(--neba-muted-fg)"),children:n.title})]})]},a)})}),De=t("div",{className:u("grid flex-1 grid-cols-1",ke?"min-h-0":""),children:[W.map((n,a)=>{const l=je||a!==ye;return t("div",{"aria-hidden":l,inert:L(l),className:u("col-start-1 row-start-1 min-w-0",ke?"overflow-y-auto overscroll-contain":"",l?"invisible":Ee?.className??""),style:l?void 0:Ee?.style,children:[t("div",{className:"mb-3 flex items-baseline gap-3",children:[g(n.icon)?e("span",{"aria-hidden":"true",className:u("flex h-[1lh] shrink-0 items-center text-(--n-accent)",j[ee],x),children:n.icon}):null,e(StepHeading,{level:ue?D+1:D,className:u("neba-heading min-w-0 flex-1","[&.neba-heading]:m-0 [&.neba-heading]:font-medium [&.neba-heading]:text-inherit",h[ee]),children:n.title}),e("span",{className:u("shrink-0 text-(--neba-muted-fg) tabular-nums",v[ee]),children:m(pe.position,{index:String(a+1),total:String(Ne)})})]}),n.image?e("img",{alt:n.imageAlt??B(n.title),width:n.imageWidth,height:n.imageHeight,className:u("mb-3 h-auto max-h-72 w-full object-contain",w[ee]),loading:n.imageLoading??"lazy",decoding:"async",src:n.image}):null,g(n.content)?e("div",{className:u("min-w-0",N[ee]),children:n.content}):null]},a)}),X?t("div",{"aria-hidden":!je,inert:L(!je),className:u("col-start-1 row-start-1 flex min-w-0 flex-col items-center justify-center gap-2 py-4 text-center",je?Ee?.className??"":"invisible"),style:je?Ee?.style:void 0,children:[e("span",{"aria-hidden":"true",className:"text-(--n-accent) [&_svg]:size-9",children:e(c,{})}),e("p",{className:u("m-0 font-medium",N[ee]),children:Y??pe.completed})]}):null]});return t("div",{ref:E,role:ue?"group":void 0,"aria-labelledby":ue?fe:void 0,className:u("flex min-w-0 flex-col",w[ee],r[ne][ee],y[ee],T[Z],H,ce),style:{...C(te,ae),"--n-fill":`var(--neba-${te}-fill)`,"--n-on-solid":`var(--neba-${te}-on-solid)`,"--n-step-mark":I[ee].box,"--n-step-rail":z(P),...ke?{maxHeight:z(O)}:null,...me},...de,children:[ue?e(StepHeading,{level:D,id:fe,className:u("neba-heading shrink-0","[&.neba-heading]:m-0 [&.neba-heading]:font-medium [&.neba-heading]:text-inherit",h[ee]),children:$}):null,e("span",{className:k,"aria-live":"polite",children:je?"":"string"==typeof W[ye]?.title?m(pe.step,{index:String(ye+1),title:W[ye].title}):m(pe.position,{index:String(ye+1),total:String(Ne)})}),t("div",{className:u("flex min-w-0 flex-1 flex-col",ke?"min-h-0":"",Se?"gap-4 sm:flex-row sm:gap-5":"gap-4"),children:[e("div",{className:u("flex min-w-0 flex-col",ke?"min-h-0":"",Se?"sm:w-(--n-step-rail) sm:shrink-0":"",U?Se?"border-b pb-4 sm:border-b-0 sm:border-e sm:pb-0 sm:pe-5":"border-b pb-4":"",U?"[border-color:var(--n-line)]":""),children:$e}),t("div",{className:u("flex min-w-0 flex-1 flex-col",ke?"min-h-0":"",y[ee]),children:[De,Q?e("div",{className:"flex shrink-0 flex-wrap items-center justify-end gap-2",children:je?e(l,{ref:He,size:ee,variant:"outline",color:te,startIcon:e(s,{}),onClick:e=>{Be(e,!1),Ie(0)},children:se??pe.restart}):t(n,{children:[e(l,{size:ee,variant:"outline",color:te,disabled:Me,focusableWhenDisabled:!0,startIcon:e("span",{className:"rotate-90 rtl:-rotate-90",children:e(o,{})}),onClick:()=>Ie(ye-1),children:re??pe.previous}),e(l,Te&&X?{ref:Le,size:ee,variant:"solid",color:te,startIcon:e(i,{}),onClick:e=>{Be(e,!0),Ie(ye,!0)},children:oe??pe.done}:{ref:Le,size:ee,variant:"solid",color:te,disabled:Te,focusableWhenDisabled:!0,endIcon:e("span",{className:"-rotate-90 rtl:rotate-90",children:e(o,{})}),onClick:()=>Ie(ye+1),children:ie??pe.next})]})}):null]})]})]})});

package/dist/components/image/Image.d.ts

@@ -143,6 +143,23 @@ export interface NebaImageProtection {
 }
 /** Where a picture is in its own life. */
 type Phase = 'loading' | 'loaded' | 'failed';
+/**
+ * The one request for the preview's chunk, shared by everything that asks.
+ *
+ * Asked for when a pointer arrives over a picture, when the focus reaches one
+ * or when a finger lands on one, so the download is under way before the press
+ * that opens it; and by `React.lazy` at that press, which is handed the same
+ * promise and waits only for what is left of it. A request that fails is
+ * forgotten, so the next one tries again rather than failing for good.
+ *
+ * An object rather than a function so a test can spy on it. Exported for that,
+ * and deliberately left out of the barrel.
+ */
+export declare const previewChunk: {
+    load(): Promise<{
+        default: typeof import("../dialog/Dialog.js").Dialog;
+    }>;
+};
 export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'children'> {
     /** Required, and required to be right. See the note on the component. */
     alt: string;
@@ -214,6 +231,11 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      *
      * Like the Skeleton, a stand-in fills the box, so it needs one to fill: a
      * `ratio`, or `width` and `height`.
+     *
+     * On a page rendered on a server, the stand-in is drawn under the picture
+     * rather than over it and the picture is never faded in, so the `<img>` shows
+     * as soon as the browser has the file: before hydration, and with JavaScript
+     * off. A picture first mounted in the browser fades in over its stand-in.
      */
     placeholder?: React.ReactNode | false | NebaImagePlaceholderOptions;
     /**
@@ -240,11 +262,9 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * `decoding`, `fetchPriority`. An attribute written out wins over what this
      * implies.
      *
-     * It also draws the picture from the first paint: no fade, and no Skeleton
-     * over it. A server-rendered page shows the `<img>` as soon as the browser
-     * has the file, rather than waiting for hydration to lift a cover and start a
-     * fade, which is exactly what Largest Contentful Paint would otherwise wait
-     * on. A `placeholder` picture still stands beneath it while it arrives.
+     * It also draws the picture with no fade and no Skeleton, even where the
+     * Image is first mounted in the browser rather than rendered on a server. A
+     * `placeholder` picture still stands beneath it while it arrives.
      * @default false
      */
     priority?: boolean;
@@ -254,6 +274,10 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
      * The picture becomes a button when this is on, so it is reachable by
      * keyboard — an image you can only enlarge with a pointer is an image half
      * the readers cannot enlarge.
+     *
+     * The Dialog is fetched when a pointer, the focus or a finger first reaches
+     * the picture, and mounted by the press that opens it, so neither a server
+     * render nor the first render in the browser waits on it.
      * @default false
      */
     preview?: boolean;
@@ -341,7 +365,8 @@ export interface ImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>,
  *
  * Everything past that is opt-in and costs nothing until it is asked for:
  * `filter` is one declaration, `frame` is one element, `watermark` is one, and
- * `preview` is a chunk that is not fetched at all unless it is on.
+ * `preview` is a chunk that is not fetched at all until a reader reaches for a
+ * picture.
  */
 export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export {};

package/dist/components/image/Image.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{AspectRatio as r}from"../aspect-ratio/AspectRatio.js";import{Skeleton as i}from"../skeleton/Skeleton.js";import{useStyleDefaults as a}from"../../internal/defaults.js";import{imageMessages as l,useMessages as s}from"../../internal/i18n.js";import{cx as c,metaTextValues as u,radiusClasses as d,toLength as f,transitionClasses as h}from"../../internal/styles.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},b={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},m={"top-start":"items-start justify-start","top-end":"items-start justify-end","bottom-start":"items-end justify-start","bottom-end":"items-end justify-end",center:"items-center justify-center"},g=Number.parseInt(o.version,10)>=19?"fetchPriority":"fetchpriority",v=o.lazy(()=>import("../dialog/Dialog.js").then(e=>({default:e.Dialog})));function y(e){const t="number"==typeof e?e:""===e.trim()?NaN:Number(e);return Number.isFinite(t)?`${t}px`:String(e)}const x=/^(-?\d*\.?\d+)%$/;function w(e,t,n){const o=function(e){let t=.5,n=.5;for(const[o,r]of e.trim().toLowerCase().split(/\s+/).entries()){const e=x.exec(r);if("left"===r||"right"===r)t="left"===r?0:1;else if("top"===r||"bottom"===r)n="top"===r?0:1;else if(null!==e)0===o?t=Number(e[1])/100:n=Number(e[1])/100;else if("center"!==r)return null}return[t,n]}(e);if(null===o)return e;let[r,i]=o;"horizontal"!==n&&"both"!==n||(r=1-r),"vertical"!==n&&"both"!==n||(i=1-i);for(let e=0;e<t;e+=1)[r,i]=[i,1-r];const a=e=>Math.round(1e4*e)/100+"%";return`${a(r)} ${a(i)}`}function $(e,t,n){const o=e=>0===n?e:`calc(${e} + ${2*n}px)`;return t?{...e,width:o("100cqh"),height:o("100cqw")}:{...e,position:"absolute",top:-n+"px",left:-n+"px",width:o("100%"),height:o("100%"),maxWidth:"none"}}function k(e,t){switch(e){case"rect":return{borderRadius:"0px"};case"circle":return{borderRadius:"50%"};case"arch":return{borderRadius:`50% 50% ${t} ${t} / 55% 55% ${t} ${t}`};case"cut":return{clipPath:`polygon(${t} 0, calc(100% - ${t}) 0, 100% ${t}, 100% calc(100% - ${t}), calc(100% - ${t}) 100%, ${t} 100%, 0 calc(100% - ${t}), 0 ${t})`};default:return{borderRadius:t}}}function N(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}function TiledMark({text:n,color:r,opacity:i,rotate:a,fontSize:l,slot:s}){const u=`neba-mark-${o.useId().replace(/[^\w-]/g,"")}`,d=function(e){let t=0;for(const n of e)t+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(n)?1:.6;return{width:Math.max(16,Math.round(16*(t+2.4))),height:52}}(n);return t("svg",{"aria-hidden":"true",className:c("pointer-events-none absolute select-none",s),style:{top:"-40%",left:"-40%",width:"180%",height:"180%",opacity:i,fontSize:l,transform:`rotate(${a}deg)`},children:[e("defs",{children:e("pattern",{id:u,patternUnits:"userSpaceOnUse",width:d.width/16+"em",height:d.height/16+"em",children:e("text",{x:"0",y:"2em",style:{fill:r,fontFamily:"system-ui, sans-serif",stroke:"rgba(0, 0, 0, 0.28)",strokeWidth:"0.0375em",paintOrder:"stroke"},children:n})})}),e("rect",{width:"100%",height:"100%",fill:`url(#${u})`})]})}export const Image=/*@__PURE__*/o.forwardRef(function Image(x,S){const{alt:z,ratio:R="auto",width:C,height:M,fit:_="cover",position:W,letterbox:L="none",rounded:O=!1,placeholder:P,fallback:D,onLoadingStatusChange:T,preview:E=!1,priority:F=!1,filter:I="none",rotate:U=0,flip:q="none",frame:H,watermark:B,protect:A=!1,locale:V,unavailableLabel:G,className:J,classNames:K,style:Q,src:X,onLoad:Y,onError:Z,onContextMenu:ee,onDragStart:te,draggable:ne,...oe}=a(x,["locale"]),re=s(l,V),ie=!1!==P&&function(e){return"object"==typeof e&&null!==e&&!o.isValidElement(e)&&"src"in e}(P)?P:null,ae=function(e){const[t,n]=o.useState(null);return o.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return n({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(ie?.src),[le,se]=o.useState("loading"),[ce,ue]=o.useState(!1),[de,fe]=o.useState(null),he=o.useRef(null),pe=o.useRef(T);o.useEffect(()=>{pe.current=T});const be=o.useCallback(e=>{he.current=e,"function"==typeof S?S(e):S&&(S.current=e)},[S]),me=oe.srcSet;o.useEffect(()=>{const e=he.current,t=(X||me)&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;se(t??"loading"),fe("loaded"===t&&e?{width:e.naturalWidth,height:e.naturalHeight}:null),pe.current?.(t??"loading")},[X,me]);const ge=(e,t)=>{se(e),"loaded"===e&&fe({width:t.naturalWidth,height:t.naturalHeight}),T?.(e)},ve=!1===O?"":d[!0===O?"md":O],ye=I in b?b[I]:I,xe=!0===A?{}:!1===A?null:A,we=null!==xe&&!1!==xe.contextMenu,$e=null!==xe&&!1!==xe.drag,ke=null!==xe&&!1!==xe.select,Ne=e=>e.preventDefault(),je=function(e){return Number.isFinite(e)?(Math.round(e/90)%4+4)%4:0}(U),Se=je%2==1,ze=function(e,t){const n=e%2==1,o="horizontal"===t||"both"===t,r="vertical"===t||"both"===t,i=n?r:o,a=n?o:r;return{scale:i||a?`${i?-1:1} ${a?-1:1}`:void 0,rotate:0===e?void 0:90*e+"deg",...n?{position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"}:null}}(je,q),Re=void 0===W?void 0:w(W,je,q),Ce="blur"===L&&"cover"!==_&&"fill"!==_,Me="none"!==L&&"blur"!==L?L:void 0,_e=xe?{onContextMenu:we?Ne:void 0,onDragStart:$e?Ne:void 0,draggable:!$e&&void 0,className:ke?"select-none":"",style:ke?{WebkitTouchCallout:"none"}:void 0}:null,We=e("img",{ref:be,src:X,alt:z,width:C,height:M,className:c("block size-full",p[_],ve,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]",F||"loaded"===le?"opacity-100":"opacity-0",Ce||null!==ie?"relative":"",_e?.className,K?.image),style:{filter:"none"===ye?void 0:ye,objectPosition:Re,...ze,..._e?.style},onLoad:e=>{ge("loaded",e.currentTarget),Y?.(e)},onError:e=>{ge("failed",e.currentTarget),Z?.(e)},onContextMenu:e=>{we&&Ne(e),ee?.(e)},onDragStart:e=>{$e&&Ne(e),te?.(e)},draggable:!$e&&ne,...F?{loading:"eager",[g]:"high"}:null,...oe}),Le=Ce?e("img",{src:X,srcSet:oe.srcSet,sizes:oe.sizes,loading:oe.loading,decoding:oe.decoding,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block object-cover select-none","[transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]","loaded"===le?"opacity-100":"opacity-0"),style:{...$(ze,Se,48),objectPosition:Re,filter:("none"===ye?"":`${ye} `)+"blur(24px)"}}):null,Oe=null!==ie&&ie.blur?!0===ie.blur?20:ie.blur:0,Pe=null===ie||"failed"===le||void 0===ae?null:e("img",{src:ae,alt:"","aria-hidden":"true",draggable:!1,className:c("pointer-events-none block select-none",p[_],"loaded"===le?"opacity-0 [transition:opacity_0ms_linear_var(--neba-duration-fill)]":"opacity-100",K?.placeholder),style:{...$(ze,Se,2*Oe),objectPosition:Re,filter:0===Oe?void 0:`blur(${Oe}px)`}}),De="failed"===le?e("span",{className:c("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",ve,K?.fallback),children:D??e("span",{className:"px-2 text-center text-sm","aria-hidden":!!z||void 0,children:z||G||re.unavailable})}):"loading"!==le||!1===P||null!==ie||F?null:e("span",{className:c("absolute inset-0",K?.placeholder),children:P??e(i,{render:e("span",{}),shape:"rect",className:c("block size-full",ve)})}),Te=void 0===B?null:function(t,n){const o="string"==typeof t?{content:t}:t,{content:r,position:i="bottom-end",repeat:a=!1,opacity:l=.35,size:s="xs",color:d="#ffffff"}=o,h="string"==typeof s&&s in u?u[s]:f(s)??u.xs,p=o.rotate??(a&&"string"==typeof r?-24:0);if(a&&"string"==typeof r)return e(TiledMark,{text:r,color:d,opacity:l,rotate:p,fontSize:h,slot:n});return e("span",{"aria-hidden":"true",className:c("pointer-events-none absolute inset-0 flex select-none p-2",m[i],n),children:e("span",{style:{color:d,opacity:l,fontSize:h,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:r})})}(B,K?.watermark),Ee=t("span",{className:"relative block size-full",style:Se||void 0!==Me?{containerType:Se?"size":void 0,background:Me}:void 0,children:[Le,Pe,We,De,Te]}),Fe=function(e,t){const n="number"==typeof e?e:Number(e),o="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(o)&&n>0&&o>0?{width:n,height:o}:null}(C,M),Ie="auto"===R&&null!==Fe?Fe.width/Fe.height:null,Ue=null===Ie?R:Se?1/Ie:Ie,qe=void 0===M&&void 0!==C?y(C):void 0,He=void 0===C&&void 0!==M?y(M):void 0,Be=void 0!==qe?{width:qe,maxWidth:"100%"}:void 0!==He?{height:He,..."auto"===Ue?null:{width:"auto",maxWidth:"100%"}}:null,Ae=void 0!==qe||void 0!==He&&"auto"!==Ue,Ve="auto"===Ue&&Se&&null!==de&&void 0===He?de.height/de.width:null,Ge=void 0===H?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(H,O),Je=null===Ge?"0px":function(e){return"string"==typeof e&&e in d?`var(--neba-radius-${e})`:f(e)??"0px"}(Ge.corner??"md"),Ke=null===Ge?void 0:f(Ge.mat),Qe=null===Ge?void 0:f(Ge.feather),Xe={...Be,...null===Ge?null:k(Ge.shape,Je),...void 0===Qe?null:N(Qe),...null!==Ge||E?null:Q},Ye="auto"===Ue?e("span",{className:c("relative block overflow-hidden",null===Ge?ve:"",null!==Ge||E?"":J),style:null===Ve?Xe:{aspectRatio:Ve,...Xe},children:Ee}):e(r,{render:e("span",{}),ratio:Ue,className:c("block overflow-hidden",null===Ge?ve:"",null!==Ge||E?"":J),style:Xe,children:Ee}),Ze=null===Ge?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":f(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(Ge),et=void 0===Ke?Je:`calc(${Je} + ${Ke})`,tt=null===Ge?Ye:t("span",{className:c("relative block",K?.frame,E?"":J),style:{...k(Ge.shape,et),padding:Ke,background:Ge.background??(void 0===Ke?void 0:"var(--neba-surface)"),boxShadow:Ge.elevation?`var(--neba-shadow-${Ge.elevation})`:void 0,width:Ae?"fit-content":void 0,maxWidth:Ae?"100%":void 0,...E?null:Q},children:[Ye,void 0===Ze?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...k(Ge.shape,et),boxShadow:Ze}})]});return E?t(n,{children:[e("button",{type:"button","aria-label":z||re.preview,"aria-haspopup":"dialog",className:c("block cursor-zoom-in",h,Ae?"[:where(&)]:w-fit [:where(&)]:max-w-full":"[:where(&)]:w-full","focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",ve,J),style:Q,onClick:()=>ue(!0),children:tt}),e(o.Suspense,{fallback:null,children:e(v,{open:ce,onOpenChange:ue,size:"xl",title:z||re.preview,children:t("span",{className:c("relative mx-auto block",Se?"":"w-fit"),style:Se?j(de??Fe):void 0,children:[e("img",{src:X,srcSet:oe.srcSet,crossOrigin:oe.crossOrigin,referrerPolicy:oe.referrerPolicy,alt:z,className:c(Se?"block object-contain":"mx-auto block max-h-[70vh] w-auto max-w-full",_e?.className),style:{filter:"none"===ye?void 0:ye,...ze,..._e?.style},onContextMenu:_e?.onContextMenu,onDragStart:_e?.onDragStart,draggable:_e?.draggable}),Te]})})})]}):tt});function j(e){if(null===e)return{aspectRatio:"1",width:"min(100%, 70vh)",containerType:"size"};const t=e.height/e.width;return{aspectRatio:`${e.height} / ${e.width}`,width:`min(100%, ${e.height}px, calc(70vh * ${t}))`,containerType:"size"}}
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{AspectRatio as r}from"../aspect-ratio/AspectRatio.js";import{Skeleton as i}from"../skeleton/Skeleton.js";import{useStyleDefaults as a}from"../../internal/defaults.js";import{imageMessages as l,useMessages as s}from"../../internal/i18n.js";import{useHydrated as c}from"../../internal/media.js";import{cx as u,metaTextValues as d,radiusClasses as f,toLength as h,transitionClasses as p}from"../../internal/styles.js";const b={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},m={none:"none",grayscale:"grayscale(1)",sepia:"sepia(0.72)",invert:"invert(1)",saturate:"saturate(1.5)",mute:"saturate(0.45)",contrast:"contrast(1.25)"},g={"top-start":"items-start justify-start","top-end":"items-start justify-end","bottom-start":"items-end justify-start","bottom-end":"items-end justify-end",center:"items-center justify-center"},v=Number.parseInt(o.version,10)>=19?"fetchPriority":"fetchpriority";let y;export const previewChunk={load:()=>(y??=import("../dialog/Dialog.js").then(e=>({default:e.Dialog})).catch(e=>{throw y=void 0,e}),y)};const x=o.lazy(()=>previewChunk.load());function w(e){const t="number"==typeof e?e:""===e.trim()?NaN:Number(e);return Number.isFinite(t)?`${t}px`:String(e)}const k=/^(-?\d*\.?\d+)%$/;function $(e,t,n){const o=function(e){let t=.5,n=.5;for(const[o,r]of e.trim().toLowerCase().split(/\s+/).entries()){const e=k.exec(r);if("left"===r||"right"===r)t="left"===r?0:1;else if("top"===r||"bottom"===r)n="top"===r?0:1;else if(null!==e)0===o?t=Number(e[1])/100:n=Number(e[1])/100;else if("center"!==r)return null}return[t,n]}(e);if(null===o)return e;let[r,i]=o;"horizontal"!==n&&"both"!==n||(r=1-r),"vertical"!==n&&"both"!==n||(i=1-i);for(let e=0;e<t;e+=1)[r,i]=[i,1-r];const a=e=>Math.round(1e4*e)/100+"%";return`${a(r)} ${a(i)}`}function N(e,t,n){const o=e=>0===n?e:`calc(${e} + ${2*n}px)`;return t?{...e,width:o("100cqh"),height:o("100cqw")}:{...e,position:"absolute",top:-n+"px",left:-n+"px",width:o("100%"),height:o("100%"),maxWidth:"none"}}function j(e,t){switch(e){case"rect":return{borderRadius:"0px"};case"circle":return{borderRadius:"50%"};case"arch":return{borderRadius:`50% 50% ${t} ${t} / 55% 55% ${t} ${t}`};case"cut":return{clipPath:`polygon(${t} 0, calc(100% - ${t}) 0, 100% ${t}, 100% calc(100% - ${t}), calc(100% - ${t}) 100%, ${t} 100%, 0 calc(100% - ${t}), 0 ${t})`};default:return{borderRadius:t}}}function S(e){const t=t=>`linear-gradient(to ${t}, transparent, #000 ${e}, #000 calc(100% - ${e}), transparent)`,n=`${t("right")}, ${t("bottom")}`;return{maskImage:n,maskComposite:"intersect",WebkitMaskImage:n,WebkitMaskComposite:"source-in"}}function TiledMark({text:n,color:r,opacity:i,rotate:a,fontSize:l,slot:s}){const c=`neba-mark-${o.useId().replace(/[^\w-]/g,"")}`,d=function(e){let t=0;for(const n of e)t+=/[ᄀ-ᇿ⺀-꓏가-퟿豈-﫿︰-﹏]/.test(n)?1:.6;return{width:Math.max(16,Math.round(16*(t+2.4))),height:52}}(n);return t("svg",{"aria-hidden":"true",className:u("pointer-events-none absolute select-none",s),style:{top:"-40%",left:"-40%",width:"180%",height:"180%",opacity:i,fontSize:l,transform:`rotate(${a}deg)`},children:[e("defs",{children:e("pattern",{id:c,patternUnits:"userSpaceOnUse",width:d.width/16+"em",height:d.height/16+"em",children:e("text",{x:"0",y:"2em",style:{fill:r,fontFamily:"system-ui, sans-serif",stroke:"rgba(0, 0, 0, 0.28)",strokeWidth:"0.0375em",paintOrder:"stroke"},children:n})})}),e("rect",{width:"100%",height:"100%",fill:`url(#${c})`})]})}export const Image=/*@__PURE__*/o.forwardRef(function Image(y,k){const{alt:C,ratio:R="auto",width:M,height:_,fit:W="cover",position:P,letterbox:L="none",rounded:O=!1,placeholder:T,fallback:D,onLoadingStatusChange:E,preview:F=!1,priority:I=!1,filter:U="none",rotate:q=0,flip:H="none",frame:B,watermark:A,protect:V=!1,locale:G,unavailableLabel:J,className:K,classNames:Q,style:X,src:Y,srcSet:Z,sizes:ee,loading:te,decoding:ne,fetchPriority:oe,onLoad:re,onError:ie,onContextMenu:ae,onDragStart:le,draggable:se,...ce}=a(y,["locale"]),ue=s(l,G),de=!1!==T&&function(e){return"object"==typeof e&&null!==e&&!o.isValidElement(e)&&"src"in e}(T)?T:null,fe=function(e){const[t,n]=o.useState(null);return o.useEffect(()=>{if("undefined"==typeof Blob||!(e instanceof Blob))return;const t=URL.createObjectURL(e);return n({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),"string"==typeof e?e:null!==t&&t.blob===e?t.url:void 0}(de?.src),[he,pe]=o.useState("loading"),[be,me]=o.useState(!1),[ge,ve]=o.useState(!1),ye=o.useRef(!1),xe=()=>{ye.current||(ye.current=!0,previewChunk.load().catch(()=>{}))},we=c(),[ke]=o.useState(()=>!we),[$e,Ne]=o.useState(null),je=o.useRef(null),Se=o.useRef(E);o.useEffect(()=>{Se.current=E});const ze=o.useCallback(e=>{je.current=e,"function"==typeof k?k(e):k&&(k.current=e)},[k]);o.useEffect(()=>{const e=je.current,t=(Y||Z)&&e?.complete?e.naturalWidth>0?"loaded":"failed":null;pe(t??"loading"),Ne("loaded"===t&&e?{width:e.naturalWidth,height:e.naturalHeight}:null),Se.current?.(t??"loading")},[Y,Z]);const Ce=(e,t)=>{pe(e),"loaded"===e&&Ne({width:t.naturalWidth,height:t.naturalHeight}),E?.(e)},Re=!1===O?"":f[!0===O?"md":O],Me=U in m?m[U]:U,_e=!0===V?{}:!1===V?null:V,We=null!==_e&&!1!==_e.contextMenu,Pe=null!==_e&&!1!==_e.drag,Le=null!==_e&&!1!==_e.select,Oe=e=>e.preventDefault(),Te=function(e){return Number.isFinite(e)?(Math.round(e/90)%4+4)%4:0}(q),De=Te%2==1,Ee=function(e,t){const n=e%2==1,o="horizontal"===t||"both"===t,r="vertical"===t||"both"===t,i=n?r:o,a=n?o:r;return{scale:i||a?`${i?-1:1} ${a?-1:1}`:void 0,rotate:0===e?void 0:90*e+"deg",...n?{position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"}:null}}(Te,H),Fe=void 0===P?void 0:$(P,Te,H),Ie="blur"===L&&"cover"!==W&&"fill"!==W,Ue="none"!==L&&"blur"!==L?L:void 0,qe=_e?{onContextMenu:We?Oe:void 0,onDragStart:Pe?Oe:void 0,draggable:!Pe&&void 0,className:Le?"select-none":"",style:Le?{WebkitTouchCallout:"none"}:void 0}:null,He=oe??ce.fetchpriority??(I?"high":void 0),Be={loading:te??(I?"eager":void 0),decoding:ne,...void 0===He?null:{[v]:He},sizes:ee,srcSet:Z,src:Y},Ae=e("img",{ref:ze,alt:C,width:M,height:_,className:u("block size-full",b[W],Re,"[transition:opacity_var(--neba-duration-fill)_var(--neba-ease),filter_var(--neba-duration-fill)_var(--neba-ease),transform_var(--neba-duration-fill)_var(--neba-ease)]",I||ke||"loaded"===he?"opacity-100":"opacity-0",Ie||null!==de||ke?"relative":"",qe?.className,Q?.image),style:{filter:"none"===Me?void 0:Me,objectPosition:Fe,...Ee,...qe?.style},onLoad:e=>{Ce("loaded",e.currentTarget),re?.(e)},onError:e=>{Ce("failed",e.currentTarget),ie?.(e)},onContextMenu:e=>{We&&Oe(e),ae?.(e)},onDragStart:e=>{Pe&&Oe(e),le?.(e)},draggable:!Pe&&se,...ce,...Be}),Ve=Ie?e("img",{alt:"","aria-hidden":"true",draggable:!1,className:u("pointer-events-none block object-cover select-none","[transition:opacity_var(--neba-duration-fill)_var(--neba-ease)]",ke||"loaded"===he?"opacity-100":"opacity-0"),style:{...N(Ee,De,48),objectPosition:Fe,filter:("none"===Me?"":`${Me} `)+"blur(24px)"},crossOrigin:ce.crossOrigin,referrerPolicy:ce.referrerPolicy,loading:te,decoding:ne,sizes:ee,srcSet:Z,src:Y}):null,Ge=null!==de&&de.blur?!0===de.blur?20:de.blur:0,Je=null===de||"failed"===he||void 0===fe?null:e("img",{src:fe,alt:"","aria-hidden":"true",draggable:!1,className:u("pointer-events-none block select-none",b[W],"loaded"===he?"opacity-0 [transition:opacity_0ms_linear_var(--neba-duration-fill)]":"opacity-100",Q?.placeholder),style:{...N(Ee,De,2*Ge),objectPosition:Fe,filter:0===Ge?void 0:`blur(${Ge}px)`}}),Ke="failed"===he?e("span",{className:u("absolute inset-0 flex items-center justify-center","bg-(--neba-disabled-bg) text-(--neba-muted-fg)",Re,Q?.fallback),children:D??e("span",{className:"px-2 text-center text-sm","aria-hidden":!!C||void 0,children:C||J||ue.unavailable})}):null,Qe="loading"!==he||!1===T||null!==de||I?null:e("span",{className:u("absolute inset-0",Q?.placeholder),children:T??e(i,{render:e("span",{}),shape:"rect",className:u("block size-full",Re)})}),Xe=void 0===A?null:function(t,n){const o="string"==typeof t?{content:t}:t,{content:r,position:i="bottom-end",repeat:a=!1,opacity:l=.35,size:s="xs",color:c="#ffffff"}=o,f="string"==typeof s&&s in d?d[s]:h(s)??d.xs,p=o.rotate??(a&&"string"==typeof r?-24:0);if(a&&"string"==typeof r)return e(TiledMark,{text:r,color:c,opacity:l,rotate:p,fontSize:f,slot:n});return e("span",{"aria-hidden":"true",className:u("pointer-events-none absolute inset-0 flex select-none p-2",g[i],n),children:e("span",{style:{color:c,opacity:l,fontSize:f,lineHeight:1.2,textShadow:"0 1px 2px rgba(0, 0, 0, 0.45)",transform:p?`rotate(${p}deg)`:void 0},children:r})})}(A,Q?.watermark),Ye=t("span",{className:"relative block size-full",style:De||void 0!==Ue?{containerType:De?"size":void 0,background:Ue}:void 0,children:[Ve,Je,ke?Qe:null,Ae,ke?null:Qe,Ke,Xe]}),Ze=function(e,t){const n="number"==typeof e?e:Number(e),o="number"==typeof t?t:Number(t);return Number.isFinite(n)&&Number.isFinite(o)&&n>0&&o>0?{width:n,height:o}:null}(M,_),et="auto"===R&&null!==Ze?Ze.width/Ze.height:null,tt=null===et?R:De?1/et:et,nt=void 0===_&&void 0!==M?w(M):void 0,ot=void 0===M&&void 0!==_?w(_):void 0,rt=void 0!==nt?{width:nt,maxWidth:"100%"}:void 0!==ot?{height:ot,..."auto"===tt?null:{width:"auto",maxWidth:"100%"}}:null,it=void 0!==nt||void 0!==ot&&"auto"!==tt,at="auto"===tt&&De&&null!==$e&&void 0===ot?$e.height/$e.width:null,lt=void 0===B?null:function(e,t){const n=!0===t?"md":t;return{shape:"rounded",corner:!1===n?"md":n,..."string"==typeof e?{shape:e}:e}}(B,O),st=null===lt?"0px":function(e){return"string"==typeof e&&e in f?`var(--neba-radius-${e})`:h(e)??"0px"}(lt.corner??"md"),ct=null===lt?void 0:h(lt.mat),ut=null===lt?void 0:h(lt.feather),dt={...rt,...null===lt?null:j(lt.shape,st),...void 0===ut?null:S(ut),...null!==lt||F?null:X},ft="auto"===tt?e("span",{className:u("relative block overflow-hidden",null===lt?Re:"",null!==lt||F?"":K),style:null===at?dt:{aspectRatio:at,...dt},children:Ye}):e(r,{render:e("span",{}),ratio:tt,className:u("block overflow-hidden",null===lt?Re:"",null!==lt||F?"":K),style:dt,children:Ye}),ht=null===lt?void 0:function(e){if(void 0===e.border||!1===e.border)return;const t=!0===e.border?"1px":h(e.border);return`inset 0 0 0 ${t} ${e.borderColor??"var(--neba-line)"}`}(lt),pt=void 0===ct?st:`calc(${st} + ${ct})`,bt=null===lt?ft:t("span",{className:u("relative block",Q?.frame,F?"":K),style:{...j(lt.shape,pt),padding:ct,background:lt.background??(void 0===ct?void 0:"var(--neba-surface)"),boxShadow:lt.elevation?`var(--neba-shadow-${lt.elevation})`:void 0,width:it?"fit-content":void 0,maxWidth:it?"100%":void 0,...F?null:X},children:[ft,void 0===ht?null:e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-0",style:{...j(lt.shape,pt),boxShadow:ht}})]});return F?t(n,{children:[e("button",{type:"button","aria-label":C||ue.preview,"aria-haspopup":"dialog",className:u("block cursor-zoom-in",p,it?"[:where(&)]:w-fit [:where(&)]:max-w-full":"[:where(&)]:w-full","focus-visible:[outline:2px_solid_var(--n-ring,var(--neba-primary-ring))] focus-visible:[outline-offset:2px]",Re,K),style:X,onPointerEnter:xe,onFocus:xe,onTouchStart:xe,onClick:()=>{ve(!0),me(!0)},children:bt}),ge?e(o.Suspense,{fallback:null,children:e(x,{open:be,onOpenChange:me,size:"xl",title:C||ue.preview,children:t("span",{className:u("relative mx-auto block",De?"":"w-fit"),style:De?z($e??Ze):void 0,children:[e("img",{alt:C,className:u(De?"block object-contain":"mx-auto block max-h-[70vh] w-auto max-w-full",qe?.className),style:{filter:"none"===Me?void 0:Me,...Ee,...qe?.style},onContextMenu:qe?.onContextMenu,onDragStart:qe?.onDragStart,draggable:qe?.draggable,crossOrigin:ce.crossOrigin,referrerPolicy:ce.referrerPolicy,srcSet:Z,src:Y}),Xe]})})}):null]}):bt});function z(e){if(null===e)return{aspectRatio:"1",width:"min(100%, 70vh)",containerType:"size"};const t=e.height/e.width;return{aspectRatio:`${e.height} / ${e.width}`,width:`min(100%, ${e.height}px, calc(70vh * ${t}))`,containerType:"size"}}

package/dist/components/list/List.d.ts

@@ -17,6 +17,15 @@ export interface ListProps extends NebaStyleProps, Omit<React.ComponentPropsWith
      * @default false
      */
     dividers?: boolean;
+    /**
+     * The gap between the rows, on Tailwind's spacing scale: `1` is `0.25rem`,
+     * the same step `gap-1` is. Left out, the rows touch, and the padding inside
+     * each one is what keeps their text apart.
+     *
+     * Ignored with `dividers`, where the rule is what separates the rows: a rule
+     * with a gap on either side of it is a line floating between two tiles.
+     */
+    spacing?: number;
     /**
      * Renders something other than a `<ul>` — `render={<ol />}` for a list where
      * the order is the point. Base UI's own escape hatch.

package/dist/components/list/List.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{safeHref as s}from"../../internal/link.js";import{useRender as l}from"@base-ui/react/use-render";import{boxPaddingXClasses as i}from"../box/Box.js";import{cx as a,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as f,radiusClasses as p,sheetBodyClasses as x,surfaceClasses as u,surfaceSlots as h,transitionClasses as v}from"../../internal/styles.js";import{useStyleDefaults as b}from"../../internal/defaults.js";const g=/*@__PURE__*/t.createContext({size:"md",density:"default",dividers:!1}),y={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},N={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},j={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md};export const List=/*@__PURE__*/t.forwardRef(function List(n,r){const{variant:s="outline",size:i="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,render:f,className:x,style:u,children:N,...j}=b(n,["size","density","variant"]),w=t.useMemo(()=>({size:i,density:d,dividers:m}),[i,d,m]),k=a("flex flex-col",p[i],y[s],v,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",x??""),z=l({render:f,ref:r,props:{role:"list",className:k,style:{...h(o,c),...u},children:N,...j}});return e(g.Provider,{value:w,children:z})});export const ListItem=/*@__PURE__*/t.forwardRef(function ListItem({startIcon:l,endIcon:p,description:u,action:h,href:b,selected:y=!1,disabled:w=!1,className:k,children:z,onClick:C,...I},L){const{size:_,density:B,dividers:R}=t.useContext(g),$=s(b),F=Boolean(C||$)&&!w,M=i[B][_],P=N[B][_],q=a("flex min-w-0 flex-1 items-center text-start",M,P,d[_],x[_],v,m,R?"":j[_],w?"cursor-not-allowed text-(--neba-disabled-fg)":y?"bg-(--n-soft-press) font-medium text-(--n-on-tint)":"",F?`cursor-pointer ${R?"[outline:0_solid_var(--n-ring)] outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]":o}`:"",F&&!y?"hover:bg-(--n-soft)":"",F&&y?"hover:bg-(--n-soft-press)":""),A=n(r,{children:[c(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:l}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(z)?e("span",{className:"truncate",children:z}):null,c(u)?e("span",{className:a("truncate",f[_],y?"":"text-(--neba-muted-fg)"),children:u}):null]}),c(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:p}):null]});return n("li",{ref:L,className:a("flex w-full items-center",k??""),...I,children:[F&&$?e("a",{href:$,className:q,"aria-current":y?"page":void 0,onClick:C,children:A}):F?e("button",{type:"button",className:q,"aria-current":!!y||void 0,onClick:C,children:A}):e("div",{className:q,"aria-disabled":w||void 0,"aria-current":!!y||void 0,children:A}),c(h)?e("div",{className:`flex shrink-0 items-center ${M}`,children:h}):null]})});
+"use client";import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{safeHref as s}from"../../internal/link.js";import{useRender as i}from"@base-ui/react/use-render";import{boxPaddingXClasses as l}from"../box/Box.js";import{cx as a,focusRingClasses as o,gapClasses as d,hasContent as c,iconClasses as m,metaTextClasses as f,radiusClasses as p,sheetBodyClasses as x,surfaceClasses as u,surfaceSlots as v,transitionClasses as h}from"../../internal/styles.js";import{spacingValue as b}from"../../internal/grid.js";import{useStyleDefaults as g}from"../../internal/defaults.js";const y=/*@__PURE__*/t.createContext({size:"md",density:"default",dividers:!1}),N={solid:[u,"text-(--neba-fg) bg-(--n-panel-hover)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[u,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-transparent"},j={default:{xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"}},w={xs:p.xs,sm:p.xs,md:p.sm,lg:p.sm,xl:p.md};export const List=/*@__PURE__*/t.forwardRef(function List(n,r){const{variant:s="outline",size:l="md",color:o="primary",density:d="default",elevation:c=0,dividers:m=!1,spacing:f,render:x,className:u,style:j,children:w,...k}=g(n,["size","density","variant"]),z=t.useMemo(()=>({size:l,density:d,dividers:m}),[l,d,m]),C=a("flex flex-col",p[l],N[s],h,m?"overflow-hidden [&>li+li]:border-t [&>li+li]:[border-color:var(--n-line)]":"p-1",u??""),I=i({render:x,ref:r,props:{role:"list",className:C,style:{...v(o,c),...void 0===f||m?null:{gap:b(f)},...j},children:w,...k}});return e(y.Provider,{value:z,children:I})});export const ListItem=/*@__PURE__*/t.forwardRef(function ListItem({startIcon:i,endIcon:p,description:u,action:v,href:b,selected:g=!1,disabled:N=!1,className:k,children:z,onClick:C,...I},L){const{size:_,density:B,dividers:R}=t.useContext(y),$=s(b),F=Boolean(C||$)&&!N,M=l[B][_],P=j[B][_],q=a("flex min-w-0 flex-1 items-center text-start",M,P,d[_],x[_],h,m,R?"":w[_],N?"cursor-not-allowed text-(--neba-disabled-fg)":g?"bg-(--n-soft-press) font-medium text-(--n-on-tint)":"",F?`cursor-pointer ${R?"[outline:0_solid_var(--n-ring)] outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]":o}`:"",F&&!g?"hover:bg-(--n-soft)":"",F&&g?"hover:bg-(--n-soft-press)":""),A=n(r,{children:[c(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:i}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(z)?e("span",{className:"truncate",children:z}):null,c(u)?e("span",{className:a("truncate",f[_],g?"":"text-(--neba-muted-fg)"),children:u}):null]}),c(p)?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:p}):null]});return n("li",{ref:L,className:a("flex w-full items-center",k??""),...I,children:[F&&$?e("a",{href:$,className:q,"aria-current":g?"page":void 0,onClick:C,children:A}):F?e("button",{type:"button",className:q,"aria-current":!!g||void 0,onClick:C,children:A}):e("div",{className:q,"aria-disabled":N||void 0,"aria-current":!!g||void 0,children:A}),c(v)?e("div",{className:`flex shrink-0 items-center ${M}`,children:v}):null]})});

package/dist/components/menu/Menu.d.ts

@@ -53,6 +53,18 @@ export interface MenuProps extends MenuSurfaceProps {
     loopFocus?: boolean;
     /** Unavailable. The trigger stops opening anything. */
     disabled?: boolean;
+    /**
+     * Keeps the popup and its rows in the DOM while the menu is closed, hidden,
+     * rather than building them each time it opens. A submenu inside takes the
+     * same answer.
+     *
+     * For a menu of links that should be in the page a crawler renders. The
+     * popup is portalled, and a portal has nowhere to go until there is a
+     * document, so the rows arrive once the page has hydrated rather than in the
+     * server's HTML.
+     * @default false
+     */
+    keepMounted?: boolean;
     /** The rows. */
     children?: React.ReactNode;
 }
@@ -78,6 +90,11 @@ export interface ContextMenuProps extends MenuSurfaceProps, Omit<React.Component
     /** @default true */
     loopFocus?: boolean;
     disabled?: boolean;
+    /**
+     * Keeps the popup and its rows in the DOM while the menu is closed, hidden.
+     * @default false
+     */
+    keepMounted?: boolean;
 }
 export interface MenuItemProps {
     /** What the row does. Not given, and not a link, the row is a label. */