material-plus-ui 1.9.0 → 1.10.0

package/dist/hooks/index.d.ts

@@ -25,8 +25,10 @@
  * had the switch and nothing to drive it with, so every application wrote the
  * same state, the same storage round trip and the same `<head>` script.
  */
-export { useMPColorScheme, mpColorSchemeScript } from './useMPColorScheme.js';
-export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeOptions, MPColorSchemeResult } from './useMPColorScheme.js';
+export { useMPColorScheme } from './useMPColorScheme.js';
+export { mpColorSchemeScript } from './mpColorSchemeScript.js';
+export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeResult } from './useMPColorScheme.js';
+export type { MPColorSchemeOptions } from './mpColorSchemeScript.js';
 export { useMPWindowClass } from './useMPWindowClass.js';
 export { useMPReducedMotion } from './useMPReducedMotion.js';
 export { useMPShortcut, useMPPlatform } from './useMPShortcut.js';

package/dist/hooks/index.js

@@ -1 +1 @@
-export{useMPColorScheme,mpColorSchemeScript}from"./useMPColorScheme.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";export{useMPMediaQuery}from"./useMPMediaQuery.js";export{useMPElementSize}from"./useMPElementSize.js";export{useMPOnScreen}from"./useMPOnScreen.js";export{useMPDisclosure}from"./useMPDisclosure.js";
+export{useMPColorScheme}from"./useMPColorScheme.js";export{mpColorSchemeScript}from"./mpColorSchemeScript.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";export{useMPMediaQuery}from"./useMPMediaQuery.js";export{useMPElementSize}from"./useMPElementSize.js";export{useMPOnScreen}from"./useMPOnScreen.js";export{useMPDisclosure}from"./useMPDisclosure.js";

package/dist/hooks/mpColorSchemeScript.d.ts

@@ -0,0 +1,46 @@
+export interface MPColorSchemeOptions {
+    /**
+     * Where the choice is remembered, in `localStorage`.
+     *
+     * Change it to keep two applications on one origin from sharing a theme, or
+     * to namespace it under a product. It has to match the key given to
+     * `mpColorSchemeScript`, or the page paints one scheme and then corrects
+     * itself to the other.
+     * @default 'mp-color-scheme'
+     */
+    storageKey?: string;
+}
+/**
+ * The two lines that stop the first paint flashing, as a string to inline.
+ *
+ * A hook runs after the browser has already painted, so a reader who chose dark
+ * gets a white page for a frame and then the right one. The only thing that can
+ * run earlier is a **synchronous script in the `<head>`**, before the body is
+ * parsed, and this is that script.
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: mpColorSchemeScript() }} />
+ * </head>
+ * ```
+ *
+ * It reads the same key the hook does, writes the same attribute, and does
+ * nothing at all when the stored value is absent or `system` — leaving the media
+ * query to answer, which it does before the first paint anyway.
+ *
+ * Pass the same `storageKey` you pass the hook. Two different keys is a page
+ * that paints one scheme and then corrects itself to the other, which is the
+ * flash this exists to remove.
+ *
+ * The output is a JavaScript source string and contains no interpolated markup:
+ * the key is JSON-encoded, so a key with a quote in it cannot end the script
+ * early.
+ *
+ * ## It has to be inline
+ *
+ * A `<script src>` is fetched, and a fetch is exactly the delay being avoided.
+ * If the page has a Content Security Policy without `unsafe-inline`, give the
+ * tag a nonce — this returns the source, not the tag, so the tag is yours.
+ */
+export declare function mpColorSchemeScript(options?: MPColorSchemeOptions): string;

package/dist/hooks/mpColorSchemeScript.js

@@ -0,0 +1 @@
+import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as e}from"../internal/color-scheme-keys.js";export function mpColorSchemeScript(r={}){const{storageKey:o=t}=r;return`try{var s=localStorage.getItem(${JSON.stringify(o)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(e)},s)}catch(e){}`}

package/dist/hooks/useMPColorScheme.d.ts

@@ -1,17 +1,6 @@
 import { type MPColorScheme, type MPResolvedColorScheme } from '../internal/color-scheme.js';
-export type { MPColorScheme, MPResolvedColorScheme };
-export interface MPColorSchemeOptions {
-    /**
-     * Where the choice is remembered, in `localStorage`.
-     *
-     * Change it to keep two applications on one origin from sharing a theme, or
-     * to namespace it under a product. It has to match the key given to
-     * `mpColorSchemeScript`, or the page paints one scheme and then corrects
-     * itself to the other.
-     * @default 'mp-color-scheme'
-     */
-    storageKey?: string;
-}
+import type { MPColorSchemeOptions } from './mpColorSchemeScript.js';
+export type { MPColorScheme, MPColorSchemeOptions, MPResolvedColorScheme };
 export interface MPColorSchemeResult {
     /**
      * What has been **chosen** — including `'system'`, which is the absence of a
@@ -99,37 +88,3 @@ export interface MPColorSchemeResult {
  * for — see it for the two lines that go in the `<head>`.
  */
 export declare function useMPColorScheme(options?: MPColorSchemeOptions): MPColorSchemeResult;
-/**
- * The two lines that stop the first paint flashing, as a string to inline.
- *
- * A hook runs after the browser has already painted, so a reader who chose dark
- * gets a white page for a frame and then the right one. The only thing that can
- * run earlier is a **synchronous script in the `<head>`**, before the body is
- * parsed, and this is that script.
- *
- * ```tsx
- * // app/layout.tsx
- * <head>
- *   <script dangerouslySetInnerHTML={{ __html: mpColorSchemeScript() }} />
- * </head>
- * ```
- *
- * It reads the same key the hook does, writes the same attribute, and does
- * nothing at all when the stored value is absent or `system` — leaving the media
- * query to answer, which it does before the first paint anyway.
- *
- * Pass the same `storageKey` you pass the hook. Two different keys is a page
- * that paints one scheme and then corrects itself to the other, which is the
- * flash this exists to remove.
- *
- * The output is a JavaScript source string and contains no interpolated markup:
- * the key is JSON-encoded, so a key with a quote in it cannot end the script
- * early.
- *
- * ## It has to be inline
- *
- * A `<script src>` is fetched, and a fetch is exactly the delay being avoided.
- * If the page has a Content Security Policy without `unsafe-inline`, give the
- * tag a nonce — this returns the source, not the tag, so the tag is yours.
- */
-export declare function mpColorSchemeScript(options?: MPColorSchemeOptions): string;

package/dist/hooks/useMPColorScheme.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as r,setScheme as s,useChosenScheme as o,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(r={}){const{storageKey:m=t}=r,a=o(m),i=c(),l="system"===a?i:a,n=e.useCallback(e=>s(m,e),[m]),u=e.useCallback(()=>s(m,"dark"===l?"light":"dark"),[m,l]);return e.useMemo(()=>({scheme:a,resolved:l,isSystem:"system"===a,setScheme:n,toggle:u}),[a,l,n,u])}export function mpColorSchemeScript(e={}){const{storageKey:s=t}=e;return`try{var s=localStorage.getItem(${JSON.stringify(s)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(r)},s)}catch(e){}`}
+import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as s,applyScheme as o,setScheme as m,useChosenScheme as r,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(l={}){const{storageKey:n=t}=l,u=r(n),a=c(),i="system"===u?a:u;e.useEffect(()=>{"system"!==u&&null===document.documentElement.getAttribute(s)&&o(u)},[u]);const d=e.useCallback(e=>m(n,e),[n]),f=e.useCallback(()=>m(n,"dark"===i?"light":"dark"),[n,i]);return e.useMemo(()=>({scheme:u,resolved:i,isSystem:"system"===u,setScheme:d,toggle:f}),[u,i,d,f])}

package/dist/hooks/useMPMediaQuery.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export function useMPMediaQuery(t,a=!1){const r=e.useMemo(()=>function(e){if("undefined"==typeof window||!window.matchMedia)return null;let t=n.get(e);t||(t=window.matchMedia(e),n.set(e,t));return t}(t),[t]),c=e.useCallback(e=>r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{},[r]),o=e.useCallback(()=>r?r.matches:a,[r,a]),u=e.useCallback(()=>a,[a]);return e.useSyncExternalStore(c,o,u)}const n=new Map;
+import*as e from"react";import{mediaList as a}from"../internal/media.js";export function useMPMediaQuery(a,n=!1){const r=e.useMemo(()=>t(a),[a]),s=e.useCallback(e=>r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{},[r]),c=e.useCallback(()=>r?r.matches:n,[r,n]),o=e.useCallback(()=>n,[n]);return e.useSyncExternalStore(s,c,o)}const t=a;

package/dist/hooks/useMPOnScreen.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export function useMPOnScreen(r,{threshold:n=.2,once:t=!0,rootMargin:o}={}){const[s,c]=e.useState(!1);return e.useEffect(()=>{const e=r.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const s=new IntersectionObserver(([e])=>{e.isIntersecting?(c(!0),t&&s.disconnect()):t||c(!1)},{threshold:n,rootMargin:o});return s.observe(e),()=>s.disconnect()},[r,n,t,o]),s}
+import*as e from"react";import{watchIntersection as r}from"../internal/intersection.js";export function useMPOnScreen(t,{threshold:n=.2,once:o=!0,rootMargin:i}={}){const[s,c]=e.useState(!1);return e.useEffect(()=>{const e=t.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const s=r(e,e=>{e.isIntersecting?(c(!0),o&&s()):o||c(!1)},{threshold:n,rootMargin:i});return s},[t,n,o,i]),s}

package/dist/internal/Calendar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as b,calendarWeeks as y,compareDay as v,dateFormatter as w,isDayOutside as x,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as z,today as A,weekdayLabels as E,withTime as T,YEAR_PAGE_SIZE as F,yearPageStart as Y}from"./date.js";const B={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},R={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},H=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none p-0 font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" "),$={day:0,month:1,year:2};function K({children:n,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[H,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"border-0 bg-transparent cursor-default text-mp-on-surface/38":r?"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)":l?"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"border-0 bg-transparent text-mp-on-surface-variant":"border-0 bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function L({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:b,showNextButton:y,onStep:v,onViewChange:w}){const x=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),N=R[o],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(t,n)=>n?e(a,{size:N,color:u,label:P[-1===t?0:1],icon:e(l,{icon:-1===t?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>v(t)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=t=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",t?"rotate-180":""].filter(Boolean).join(" ")}),j=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>w("month"===d?"day":"month"),children:x},"month"),z=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>w("year"===d?"day":"year"),children:S},"year"),A=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,b),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[o]}`,children:`${A}–${A+F-1}`}):"month"===d?z:t(n,M?{children:[j,z]}:{children:[z,j]})}),_(1,y)]})}export function Calendar({size:n,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:y,showOutsideDays:v=!0,autoFocus:w=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,E]=o.useState(N),T=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(A(),s)?A():z(s)}),K=o.useRef(w),U=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,U.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const V=o.useCallback(e=>x(e,p,f)||(y?.(e)??!1),[p,f,y]),G=e=>{K.current=!0,E(e)},W=e=>{K.current=!0,c(e)};return t("div",{ref:U,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(L,{size:n,color:r,view:T,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===T?g(s,e):b(s,"month"===T?e:e*F))},onViewChange:G}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===T?e(I,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:v,isDisabled:V,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(z(e))}}):"month"===T?e(O,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),G("day")):d(t)}}):e(q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),G("month")):d(_(e,0,1))}})})]})}function U(e){return"rtl"===getComputedStyle(e).direction?-1:1}function I({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:b,onPreviewChange:x,onMoveFocus:D}){const N=E(r,l,"narrow"),_=E(r,l,"long"),C=(j=i,P(k=c)&&P(j)?v(k,j)<=0?[k,j]:[j,k]:null);var k,j;const z=A(),T=o.useMemo(()=>{const e=w(r,{dateStyle:"full"});return y(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),F=o.useRef(null),Y=o.useRef(a);o.useLayoutEffect(()=>{const e=F.current,t=Y.current;if(Y.current=a,!e||M(t,a))return;const n=t.getTime()<a.getTime(),o="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(n===o?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return t("div",{role:"grid","aria-label":w(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:N.map((t,n)=>e("span",{role:"columnheader","aria-label":_[n],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:t},n))})}),e("div",{ref:F,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:T.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&v(t,C[0])>=0&&v(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),y=null!==C&&i&&S(t,C[1]);return e(K,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:S(t,z)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>b(t),onPointerEnter:()=>x?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=U(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},o))})]})}function O({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=new Date,p=o.useMemo(()=>{const e=w(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=U(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(z(r),n)))};return e("div",{role:"grid","aria-label":String(m),className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(o=>{const c=3*n+o;return e(K,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function q({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=(new Date).getFullYear(),u=e=>{const t=U(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(b(z(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(K,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function V(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function G(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:b=!1,labels:y}){const v=l??a,x=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=x.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>G(e,"instant")),b){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[b]);const M=o.useMemo(()=>{const e=c?12:24,t=V(m,e),n=Array.from({length:Math.ceil(e/t)},(e,n)=>n*t);return c?n.map(e=>0===e?12:e):n},[c,m]),N=o.useMemo(()=>{const e=V(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=V(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?v.getHours()%12||12:v.getHours(),[j,z]=o.useState({}),A=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=j[o]??(d>=0?d:0);return e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","motion-safe:scroll-smooth","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),onKeyDown:e=>{const t={ArrowDown:1,ArrowUp:-1,PageDown:5,PageUp:-5}[e.key],n=void 0!==t?(e=>{const t=[...e.children].indexOf(document.activeElement);return t>=0?t:p})(e.currentTarget)+t:"Home"===e.key?0:"End"===e.key?a.length-1:null;null!==n&&(e.preventDefault(),((e,t)=>{const n=Math.min(a.length-1,Math.max(0,e)),r=t.children[n];z(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),G(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>T(v,"hour"===e?{hours:c?t%12+(v.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:v.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),b=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":b||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0 border-0",h[n],b?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>z(e=>({...e,[o]:a})),onClick:()=>{b||s(d)},children:[b?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:x,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[A("hour",y.hour,M,e=>e===k,e=>c?String(e):_(e)),A("minute",y.minute,N,e=>e===v.getMinutes(),_),i?A("second",y.second,P,e=>e===v.getSeconds(),_):null,c?A("meridiem",y.meridiem,[0,1],e=>(v.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":w(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as r}from"../components/button/MPButton.js";import{MPIcon as l}from"../components/icon/MPIcon.js";import{MPIconButton as a}from"../components/icon-button/MPIconButton.js";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons.js";import{MPStateLayer as u}from"./StateLayer.js";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale.js";import{VISUALLY_HIDDEN as p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as y,calendarWeeks as b,compareDay as v,dateFormatter as x,isDayOutside as w,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as T,today as z,weekdayLabels as A,withTime as E,YEAR_PAGE_SIZE as F,yearPageStart as Y}from"./date.js";const B={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},R={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},H=/*@__PURE__*/["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none p-0 font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" "),$={day:0,month:1,year:2};let K=null;function L(){const e=z();return null!==K&&K.getTime()===e.getTime()||(K=e),K}const U=()=>()=>{},I=()=>null;function O(){return o.useSyncExternalStore(U,L,I)}function q({children:n,label:o,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return t("button",{type:"button",role:"gridcell","aria-label":o,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[H,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"border-0 bg-transparent cursor-default text-mp-on-surface/38":r?"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)":l?"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"border-0 bg-transparent text-mp-on-surface-variant":"border-0 bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function V({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:y,showNextButton:b,onStep:v,onViewChange:x}){const w=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),N=R[o],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(t,n)=>n?e(a,{size:N,color:u,label:P[-1===t?0:1],icon:e(l,{icon:-1===t?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>v(t)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=t=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",t?"rotate-180":""].filter(Boolean).join(" ")}),j=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>x("month"===d?"day":"month"),children:w},"month"),T=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>x("year"===d?"day":"year"),children:S},"year"),z=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,y),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[o]}`,children:`${z}–${z+F-1}`}):"month"===d?T:t(n,M?{children:[j,T]}:{children:[T,j]})}),_(1,b)]})}export function Calendar({size:n,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:b,showOutsideDays:v=!0,autoFocus:x=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,A]=o.useState(N),E=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(z(),s)?z():T(s)}),K=o.useRef(x),L=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:T(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,L.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const U=o.useCallback(e=>w(e,p,f)||(b?.(e)??!1),[p,f,b]),I=e=>{K.current=!0,A(e)},O=e=>{K.current=!0,c(e)};return t("div",{ref:L,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(V,{size:n,color:r,view:E,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===E?g(s,e):y(s,"month"===E?e:e*F))},onViewChange:I}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===E?e(W,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:v,isDisabled:U,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(T(e))}}):"month"===E?e(J,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:O,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),I("day")):d(t)}}):e(Q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:O,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),I("month")):d(_(e,0,1))}})})]})}function G(e){return"rtl"===getComputedStyle(e).direction?-1:1}function W({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:y,onPreviewChange:w,onMoveFocus:D}){const N=A(r,l,"narrow"),_=A(r,l,"long"),C=(j=i,P(k=c)&&P(j)?v(k,j)<=0?[k,j]:[j,k]:null);var k,j;const T=O(),z=o.useMemo(()=>{const e=x(r,{dateStyle:"full"});return b(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),E=o.useRef(null),F=o.useRef(a);o.useLayoutEffect(()=>{const e=E.current,t=F.current;if(F.current=a,!e||M(t,a))return;const n=t.getTime()<a.getTime(),o="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(n===o?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return t("div",{role:"grid","aria-label":x(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:N.map((t,n)=>e("span",{role:"columnheader","aria-label":_[n],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:t},n))})}),e("div",{ref:E,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:z.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&v(t,C[0])>=0&&v(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),b=null!==C&&i&&S(t,C[1]);return e(q,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&b?"both":d?"start":b?"end":"middle":null,current:null!==T&&S(t,T)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>y(t),onPointerEnter:()=>w?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=G(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(t,6-n),PageUp:()=>g(t,e.shiftKey?-12:-1),PageDown:()=>g(t,e.shiftKey?12:1)}[e.key];r&&(e.preventDefault(),D(r()))})(e,t),children:t.getDate()},t.getTime())})},o))})]})}function J({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=O(),p=o.useMemo(()=>{const e=x(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=G(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(T(r),n)))};return e("div",{role:"grid","aria-label":String(m),className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(n=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(o=>{const c=3*n+o;return e(q,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:null!==d&&d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function Q({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=O()?.getFullYear(),u=e=>{const t=G(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(y(T(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(q,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function X(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function Z(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:y=!1,labels:b}){const v=l??a,w=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>Z(e,"instant")),y){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[y]);const M=o.useMemo(()=>{const e=c?12:24,t=X(m,e),n=Array.from({length:Math.ceil(e/t)},(e,n)=>n*t);return c?n.map(e=>0===e?12:e):n},[c,m]),N=o.useMemo(()=>{const e=X(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=X(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?v.getHours()%12||12:v.getHours(),[j,T]=o.useState({}),z=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=j[o]??(d>=0?d:0);return e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","motion-safe:scroll-smooth","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),onKeyDown:e=>{const t={ArrowDown:1,ArrowUp:-1,PageDown:5,PageUp:-5}[e.key],n=void 0!==t?(e=>{const t=[...e.children].indexOf(document.activeElement);return t>=0?t:p})(e.currentTarget)+t:"Home"===e.key?0:"End"===e.key?a.length-1:null;null!==n&&(e.preventDefault(),((e,t)=>{const n=Math.min(a.length-1,Math.max(0,e)),r=t.children[n];T(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),Z(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>E(v,"hour"===e?{hours:c?t%12+(v.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:v.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),y=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":y||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0 border-0",h[n],y?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>T(e=>({...e,[o]:a})),onClick:()=>{y||s(d)},children:[y?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:w,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[z("hour",b.hour,M,e=>e===k,e=>c?String(e):_(e)),z("minute",b.minute,N,e=>e===v.getMinutes(),_),i?z("second",b.second,P,e=>e===v.getSeconds(),_):null,c?z("meridiem",b.meridiem,[0,1],e=>(v.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":x(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}

package/dist/internal/ChartChrome.d.ts

@@ -90,6 +90,10 @@ export interface Visibility {
 export declare function useVisibility(series: readonly {
     hidden?: boolean;
 }[]): Visibility;
+/** `legend` left out or `true`, as one object for every render to share. */
+export declare const LEGEND_ON: MPChartLegend;
+/** `legend={false}`, the same way. */
+export declare const LEGEND_OFF: MPChartLegend;
 interface LegendProps {
     /**
      * What each entry is called. Names rather than series, because a pie's
@@ -129,7 +133,7 @@ interface LegendProps {
  * which a change of hue would not, and `aria-pressed` carries the same fact to
  * a reader who is not looking at all.
  */
-export declare function ChartLegend({ names, colors, options, visibility, size, values, swatch, colorNames }: LegendProps): React.JSX.Element;
+export declare const ChartLegend: React.MemoExoticComponent<({ names, colors, options, visibility, size, values, swatch, colorNames }: LegendProps) => React.JSX.Element>;
 interface PanelProps {
     heading?: React.ReactNode;
     items: readonly MPChartTooltipItem[];
@@ -192,8 +196,13 @@ interface TableProps {
  * Rendered rather than built on demand, because it is the description of a
  * focusable element: an `aria-describedby` pointing at an id that does not
  * exist yet is an `aria-describedby` pointing at nothing.
+ *
+ * Memoised, because it is the largest thing a chart renders and the one thing a
+ * hover never changes. Every column the pointer crosses re-renders the chart,
+ * and before this every one of them formatted every cell of the table again —
+ * half the cost of a hover on a line chart of a few hundred points.
  */
-export declare function ChartTable({ id, caption, corner, categories, names, values, format, locale, empty }: TableProps): React.JSX.Element;
+export declare const ChartTable: React.MemoExoticComponent<({ id, caption, corner, categories, names, values, format, locale, empty }: TableProps) => React.JSX.Element>;
 export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'color' | 'title'> {
     size: MPSize;
     /** The element the drawing is measured in and focused on. */

package/dist/internal/ChartChrome.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{VISUALLY_HIDDEN as n}from"./visually-hidden.js";import{cssLength as r}from"./length.js";import{PLOT_HEIGHT as i,formatCategory as s}from"./chart.js";export function useVisibility(e){const[t,l]=a.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[n,r]=a.useState(null),i=a.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]);return{visible:e.map((e,l)=>!t.has(l)),hovered:n,toggle:i,setHovered:r}}const o={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},c={start:"justify-start",center:"justify-center",end:"justify-end"};export function ChartLegend({names:a,colors:n,options:r,visibility:i,size:s,values:o,swatch:m,colorNames:d=!1}){const u=!1!==r.interactive,p="xs"===s||"sm"===s?"text-mp-label-small":"text-mp-label-medium";return e("ul",{className:["mp-chart__legend m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-1 p-0",c[r.align??"center"],p].join(" "),children:a.map((a,r)=>{const s=i.visible[r],c=s&&null!==i.hovered&&i.hovered!==r,p=a??`${r+1}`,h=l(t,{children:[e("span",{className:"shrink-0","aria-hidden":"true",children:m?m(r,n[r]):e("span",{className:"block size-2.5 rounded-mp-full",style:{background:n[r]}})}),e("span",{className:d?"truncate":"text-mp-on-surface-variant truncate",style:d?{color:n[r]}:void 0,children:p}),o?.[r]?e("span",{className:"text-mp-on-surface tabular-nums",children:o[r]}):null]}),f=s?c?"opacity-60":"":"opacity-38";return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":s,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:e=>{e.currentTarget.matches(":focus-visible")&&i.setHovered(r)},onBlur:()=>i.setHovered(null),className:["flex min-w-0 cursor-pointer items-center gap-1.5 rounded-mp-xs","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2",f].filter(Boolean).join(" "),children:h}):e("span",{className:`flex min-w-0 items-center gap-1.5 ${f}`,children:h})},r)})})}export function ChartTooltipPanel({heading:t,items:a,total:n,totalLabel:r,x:i,y:s,flip:o,size:c}){return l("div",{"aria-hidden":"true",className:["mp-chart__tooltip pointer-events-none absolute z-10 min-w-24 max-w-64","bg-mp-surface-container-high shadow-mp-2 rounded-mp-xs px-2.5 py-2","xs"===c||"sm"===c?"text-mp-label-small":"text-mp-label-medium"].join(" "),style:{left:i,top:s,transform:`translate(${o?"calc(-100% - 12px)":"12px"}, -50%)`},children:[null==t||""===t?null:e("div",{className:"text-mp-on-surface-variant mb-1 truncate",children:t}),l("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:[a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"block size-2 shrink-0 rounded-mp-full",style:{background:t.color}}),t.name?e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:t.name}):null,e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:t.label??t.formatted})]},t.seriesIndex)),void 0===n?null:l("li",{className:"border-mp-outline-variant mt-1 flex items-center gap-1.5 border-0 border-t border-solid pt-1",children:[e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:r}),e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:n})]})]})]})}export function ChartStatus({heading:r,items:i,total:s,totalLabel:o}){return e("span",{role:"status","aria-live":"polite",className:n,children:0===i.length?null:l(t,{children:[null==r||""===r?null:l(t,{children:[r,", "]}),i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex)),void 0===s?null:`, ${o}: ${s}`]})})}export function ChartTable({id:t,caption:a,corner:r,categories:i,names:o,values:c,format:m,locale:d,empty:u}){return e("div",{id:t,className:n,children:l("table",{children:[e("caption",{children:a}),e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:r}),o.map((t,l)=>e("th",{scope:"col",children:t??l+1},l))]})}),e("tbody",{children:0===i.length?e("tr",{children:e("td",{colSpan:o.length+1,children:u})}):i.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:s(t,d)}),o.map((t,l)=>{const n=c[l]?.[a];return e("td",{children:n?.label??(null===n?.value||void 0===n?u:m(n.value))},l)})]},a))})]})})}export function ChartShell({size:t,plotRef:a,name:n,describedBy:s,interactive:c,height:m,plotProps:d,children:u,tooltip:p,overlay:h,legend:f,legendSide:x="bottom",status:b,table:v,className:g,...N}){return l("div",{"data-mp-size":t,className:["mp-chart flex min-w-0 flex-col gap-3",g??""].filter(Boolean).join(" "),...N,children:[l("div",{className:`flex min-w-0 gap-3 ${o[x]}`,children:[l("div",{className:"relative flex min-w-0 flex-1",children:[l("div",{ref:a,role:"img",tabIndex:c?0:void 0,"aria-label":n,"aria-describedby":s,...d,className:["mp-chart__plot rounded-mp-xs relative min-w-0 flex-1","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),style:{height:r(m)??i[t]},children:[u,p]}),h]}),f]}),e(ChartStatus,{heading:b.heading,items:b.items,total:b.total,totalLabel:b.totalLabel}),v]})}
+import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{VISUALLY_HIDDEN as n}from"./visually-hidden.js";import{cssLength as r}from"./length.js";import{PLOT_HEIGHT as s,formatCategory as i}from"./chart.js";export function useVisibility(e){const[t,l]=a.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[n,r]=a.useState(null),s=a.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]),i=a.useMemo(()=>e.map((e,l)=>!t.has(l)),[e,t]);return a.useMemo(()=>({visible:i,hovered:n,toggle:s,setHovered:r}),[i,n,s])}export const LEGEND_ON={};export const LEGEND_OFF={interactive:!1};const o={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},c={start:"justify-start",center:"justify-center",end:"justify-end"};export const ChartLegend=/*@__PURE__*/a.memo(function({names:a,colors:n,options:r,visibility:s,size:i,values:o,swatch:m,colorNames:d=!1}){const u=!1!==r.interactive,p="xs"===i||"sm"===i?"text-mp-label-small":"text-mp-label-medium";return e("ul",{className:["mp-chart__legend m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-1 p-0",c[r.align??"center"],p].join(" "),children:a.map((a,r)=>{const i=s.visible[r],c=i&&null!==s.hovered&&s.hovered!==r,p=a??`${r+1}`,h=l(t,{children:[e("span",{className:"shrink-0","aria-hidden":"true",children:m?m(r,n[r]):e("span",{className:"block size-2.5 rounded-mp-full",style:{background:n[r]}})}),e("span",{className:d?"truncate":"text-mp-on-surface-variant truncate",style:d?{color:n[r]}:void 0,children:p}),o?.[r]?e("span",{className:"text-mp-on-surface tabular-nums",children:o[r]}):null]}),f=i?c?"opacity-60":"":"opacity-38";return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":i,onClick:()=>s.toggle(r),onPointerEnter:()=>s.setHovered(r),onPointerLeave:()=>s.setHovered(null),onFocus:e=>{e.currentTarget.matches(":focus-visible")&&s.setHovered(r)},onBlur:()=>s.setHovered(null),className:["flex min-w-0 cursor-pointer items-center gap-1.5 rounded-mp-xs","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2",f].filter(Boolean).join(" "),children:h}):e("span",{className:`flex min-w-0 items-center gap-1.5 ${f}`,children:h})},r)})})});export function ChartTooltipPanel({heading:t,items:a,total:n,totalLabel:r,x:s,y:i,flip:o,size:c}){return l("div",{"aria-hidden":"true",className:["mp-chart__tooltip pointer-events-none absolute z-10 min-w-24 max-w-64","bg-mp-surface-container-high shadow-mp-2 rounded-mp-xs px-2.5 py-2","xs"===c||"sm"===c?"text-mp-label-small":"text-mp-label-medium"].join(" "),style:{left:s,top:i,transform:`translate(${o?"calc(-100% - 12px)":"12px"}, -50%)`},children:[null==t||""===t?null:e("div",{className:"text-mp-on-surface-variant mb-1 truncate",children:t}),l("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:[a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"block size-2 shrink-0 rounded-mp-full",style:{background:t.color}}),t.name?e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:t.name}):null,e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:t.label??t.formatted})]},t.seriesIndex)),void 0===n?null:l("li",{className:"border-mp-outline-variant mt-1 flex items-center gap-1.5 border-0 border-t border-solid pt-1",children:[e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:r}),e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:n})]})]})]})}export function ChartStatus({heading:r,items:s,total:i,totalLabel:o}){return e("span",{role:"status","aria-live":"polite",className:n,children:0===s.length?null:l(t,{children:[null==r||""===r?null:l(t,{children:[r,", "]}),s.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex)),void 0===i?null:`, ${o}: ${i}`]})})}export const ChartTable=/*@__PURE__*/a.memo(function({id:t,caption:a,corner:r,categories:s,names:o,values:c,format:m,locale:d,empty:u}){return e("div",{id:t,className:n,children:l("table",{children:[e("caption",{children:a}),e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:r}),o.map((t,l)=>e("th",{scope:"col",children:t??l+1},l))]})}),e("tbody",{children:0===s.length?e("tr",{children:e("td",{colSpan:o.length+1,children:u})}):s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:i(t,d)}),o.map((t,l)=>{const n=c[l]?.[a];return e("td",{children:n?.label??(null===n?.value||void 0===n?u:m(n.value))},l)})]},a))})]})})});export function ChartShell({size:t,plotRef:a,name:n,describedBy:i,interactive:c,height:m,plotProps:d,children:u,tooltip:p,overlay:h,legend:f,legendSide:x="bottom",status:b,table:v,className:g,...N}){return l("div",{"data-mp-size":t,className:["mp-chart flex min-w-0 flex-col gap-3",g??""].filter(Boolean).join(" "),...N,children:[l("div",{className:`flex min-w-0 gap-3 ${o[x]}`,children:[l("div",{className:"relative flex min-w-0 flex-1",children:[l("div",{ref:a,role:"img",tabIndex:c?0:void 0,"aria-label":n,"aria-describedby":i,...d,className:["mp-chart__plot rounded-mp-xs relative min-w-0 flex-1","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),style:{height:r(m)??s[t]},children:[u,p]}),h]}),f]}),e(ChartStatus,{heading:b.heading,items:b.items,total:b.total,totalLabel:b.totalLabel}),v]})}

package/dist/internal/ChartFrame.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useMPElementSize as a}from"../hooks/useMPElementSize.js";import{useMPLocale as i,useMPMessages as o}from"./locale.js";import{useMPSize as r}from"./config.js";import{CHART as s}from"./messages/chart.js";import{TABLE as h}from"./messages/table.js";import{ChartLegend as c,ChartShell as u,ChartTable as d,ChartTooltipPanel as m,useVisibility as p}from"./ChartChrome.js";import{VISUALLY_HIDDEN as f}from"./visually-hidden.js";import{CHART_FONT_SIZE as x,MARKER_RADIUS as g,PLOT_HEIGHT as v,bandScale as y,categoryAt as b,categoryCount as k,categoryExtent as M,fitsLast as w,formatCategory as z,formatShare as S,formatStatistic as P,seriesColor as C,seriesExtent as A,showsTick as $,textWidth as _,tickStride as B,tickTurn as j,toNumber as R,toValues as N,truncate as W,turnedBand as I,turnedRoom as F,turnedStep as T,valueScale as D,withReferences as L}from"./chart.js";const X=[];function Y({text:e,along:l,top:n,turn:a,fontSize:i}){return t("text",a<=0?{x:l,y:n+i+6,textAnchor:"middle",fill:Z,fontSize:i,children:e}:{x:l,y:n+8,textAnchor:"end",dominantBaseline:"central",transform:`rotate(${-a} ${l} ${n+8})`,fill:Z,fontSize:i,children:e})}const E="var(--_mp-color-outline-variant)",V="var(--_mp-color-outline)",Z="var(--_mp-color-on-surface-variant)";function U({plot:l,scale:n,horizontal:a,categoryPx:i,categoryScale:o,categoryValuePx:r,valuePx:s,tickTexts:h,categoryTexts:c,valueAxis:u,categoryAxis:d,fontSize:m,zeroPx:p,turn:f,tickBand:x}){const g=!1!==u?.grid&&!u?.hidden,v=!d?.hidden&&(d?.grid??null!==o),y=t=>o?r(o.ticks[t]):(a?l.top:l.left)+i(t),b=(t,e)=>f>0?T(f,m):Math.max(...t.map(t=>_(t,m)),1)+e,k=B(c.length,a?l.height:l.width,a?1.8*m:b(c,12)),M=B(n.ticks.length,a?l.width:l.height,a?b(h,16):2*m),z=c.length>1?Math.abs(y(1)-y(0)):l.width,S=n.ticks.length>1?Math.abs(s(n.ticks[1])-s(n.ticks[0])):l.height,P=w(c.length,k,z,a?1.8*m:f>0?T(f,m):_(c[c.length-1]??"",m)),C=w(n.ticks.length,M,S,a?f>0?T(f,m):_(h[h.length-1]??"",m):1.6*m);return e("g",{className:"mp-chart__axes",children:[n.ticks.map((i,o)=>{const r=s(i),c=Math.abs(i)<1e-9&&n.min<0,d=!u?.hidden&&$(o,n.ticks.length,M,C);return e("g",{children:[g?t("line",a?{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:c?V:E,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:r,y2:r,stroke:c?V:E,strokeWidth:1}):null,d?a?t(Y,{text:h[o],along:r,top:l.top+l.height,turn:f,fontSize:m}):t("text",{x:l.left-8,y:r,textAnchor:"end",dominantBaseline:"central",fill:Z,fontSize:m,children:h[o]}):null]},`v${o}`)}),c.map((n,i)=>{const o=y(i),r=!d?.hidden&&$(i,c.length,k,P);return e("g",{children:[v?t("line",a?{x1:l.left,x2:l.left+l.width,y1:o,y2:o,stroke:E,strokeWidth:1}:{x1:o,x2:o,y1:l.top,y2:l.top+l.height,stroke:E,strokeWidth:1}):null,r?a?t("text",{x:l.left-8,y:o,textAnchor:"end",dominantBaseline:"central",fill:Z,fontSize:m,children:n}):t(Y,{text:n,along:o,top:l.top+l.height,turn:f,fontSize:m}):null]},`c${i}`)}),t("line",a?{x1:p,x2:p,y1:l.top,y2:l.top+l.height,stroke:V,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:p,y2:p,stroke:V,strokeWidth:1}),u?.label&&!u.hidden?t("text",{x:a?l.left+l.width/2:m,y:a?l.top+l.height+x+m:l.top+l.height/2,textAnchor:"middle",dominantBaseline:a?"auto":"central",fill:Z,fontSize:m,transform:a?void 0:`rotate(-90 ${m} ${l.top+l.height/2})`,children:u.label}):null,d?.label&&!d.hidden?t("text",{x:a?m:l.left+l.width/2,y:a?l.top+l.height/2:l.top+l.height+x+m,textAnchor:"middle",dominantBaseline:a?"central":"auto",fill:Z,fontSize:m,transform:a?`rotate(-90 ${m} ${l.top+l.height/2})`:void 0,children:d.label}):null]})}function H(t,e){try{e?t.currentTarget.setPointerCapture(t.pointerId):t.currentTarget.releasePointerCapture(t.pointerId)}catch{}}function K(t,e,l){return(t??[]).map(t=>({...t,at:R(t.value),end:void 0===t.to?null:R(t.to)})).filter(t=>null!==t.at).map(t=>({at:e(t.at),to:null===t.end?null:e(t.end),upright:l,label:t.label,color:t.color?C(0,t.color):"var(--_mp-color-outline)",dashed:!1!==t.dashed}))}function O({marks:l,plot:n,pass:a,fontSize:i}){return 0===l.length?null:t("g",{className:`mp-chart__references mp-chart__references--${a}`,"aria-hidden":"true",children:l.map((l,o)=>{if("band"===a)return null===l.to?null:t("rect",{...(r=l.at,s=l.to,l.upright?{x:Math.min(r,s),y:n.top,width:Math.abs(s-r),height:n.height}:{x:n.left,y:Math.min(r,s),width:n.width,height:Math.abs(s-r)}),fill:l.color,opacity:.12},o);var r,s;const h=null===l.to?[l.at]:[l.at,l.to];return e("g",{children:[h.map(e=>t("line",{x1:l.upright?e:n.left,x2:l.upright?e:n.left+n.width,y1:l.upright?n.top:e,y2:l.upright?n.top+n.height:e,stroke:l.color,strokeWidth:1,strokeDasharray:l.dashed?"4 3":void 0},e)),void 0===l.label||null===l.label||""===l.label?null:t("text",{x:l.upright?l.at+4:n.left+n.width,y:l.upright?n.top+i:l.at-4,textAnchor:l.upright?"start":"end",fill:l.color,fontSize:i,children:l.label})]},o)})})}export function CartesianFrame({series:w,categories:$,xAxis:B,yAxis:R,horizontal:T=!1,zoom:Y,stacked:E=!1,includeZero:q=!0,bandRatio:G=1,inset:J=!1,headroom:Q=0,markInset:tt=0,xScale:et="band",marks:lt,markRadius:nt=24,swatch:at,scale:it,table:ot,markTooltip:rt,height:st,format:ht,locale:ct,label:ut,legend:dt,tooltip:mt,empty:pt,labelColor:ft="ink",size:xt,className:gt,style:vt,children:yt,...bt}){const kt=r(xt),Mt=i(ct),wt=o(s,Mt),zt=o(h,Mt),St=n.useRef(null),Pt=a(St),Ct=Pt.width,At=n.useId(),$t=n.useId(),_t=p(w),[Bt,jt]=n.useState(null),[Rt,Nt]=n.useState(null),[Wt,It]=n.useState(null),[Ft,Tt]=n.useState(null),Dt=n.useRef(null),Lt=t=>{Dt.current=t,Tt(t)},Xt=n.useCallback(t=>P(t,Mt,ht,!0),[ht,Mt]),Yt=n.useMemo(()=>N(w),[w]),Et=n.useMemo(()=>w.map((t,e)=>C(e,t.color)),[w]),Vt=n.useMemo(()=>w.map(t=>t.name),[w]),Zt=k(w),Ut=n.useMemo(()=>Array.from({length:Zt},(t,e)=>b(e,$,Yt)),[Zt,$,Yt]),Ht=!0!==Y&&!1!==Y&&Y?Y:{},Kt=void 0!==Y&&!1!==Y&&"band"===et,[Ot,qt]=n.useState(()=>Ht.defaultRange??null),Gt=(void 0!==Ht.range?Ht.range:Ot)??null,Jt=Kt&&null!==Gt&&0!==Zt?[Math.max(0,Math.min(Zt-1,Math.min(Gt[0],Gt[1]))),Math.max(0,Math.min(Zt-1,Math.max(Gt[0],Gt[1])))]:null,Qt=Jt?Jt[0]:0,te=Jt?Jt[1]-Jt[0]+1:Zt,ee=Jt?Yt.map(t=>t.slice(Qt,Qt+te)):Yt,le=Jt?Ut.slice(Qt,Qt+te):Ut,ne=t=>{void 0===Ht.range&&qt(t),Ht.onRangeChange?.(t)},ae=ee.filter((t,e)=>_t.visible[e]),ie="percent"===E,oe=ie?{min:0,max:1}:A(ae,Boolean(E)),re=x[kt],se=R,he=B,ce=it??D(ie?oe:L(oe,se?.references),{min:ie?0:se?.min,max:ie?1:se?.max,tickCount:se?.tickCount??(ie?4:void 0),includeZero:q}),ue="value"===et?M(ae,$):null,de="value"===et?D(L(ue,he?.references),{min:he?.min,max:he?.max,tickCount:he?.tickCount,includeZero:!1}):null,me=ce.ticks.map((t,e)=>se?.tickFormat?String(se.tickFormat(t,e)):ie?S(t,Mt):Xt(t)),pe=de?de.ticks.map((t,e)=>he?.tickFormat?String(he.tickFormat(t,e)):P(t,Mt,void 0,!0)):le.map((t,e)=>he?.tickFormat?String(he.tickFormat(t,e)):z(t,Mt)),fe=me.reduce((t,e)=>Math.max(t,_(e,re)),0),xe=re+6,ge=se?.hidden?0:fe+10+(se?.label?xe:0),ve="number"==typeof st?st:void 0===st?v[kt]:Pt.height,ye=(Ct-(T?0:ge)-16)/Math.max(1,te),be=T?se:he,ke=T?me:pe,Me=T?he?.hidden?0:pe.reduce((t,e)=>Math.max(t,Math.min(150,_(e,re))),0)+10+(he?.label?xe:0):ge,we=ke.reduce((t,e)=>Math.max(t,_(e,re)),0),ze=T?12+Q:Math.max(8,we/2),Se=(Ct-Me-ze-2*tt)/Math.max(1,ke.length),Pe=T||null!==de,Ce=be?.hidden?0:j(be?.tickLabels??(Pe?"truncate":"auto"),ke,re,Se),Ae=Math.min(120,.5*ve),$e=Ce>0&&!T?pe.map((t,e)=>W(t,(t=>Math.min(F(Ce,Ae,re),Ce>=90?1/0:(Me+Se*(t+(J?0:.5)))/Math.cos(Ce*Math.PI/180)))(e),re)):de?pe:T||ye-6>=2.4*re?pe.map(t=>W(t,T?150:ye-6,re)):pe,_e=$e.reduce((t,e)=>Math.max(t,_(e,re)),0),Be=be?.hidden?0:Ce>0?8+Math.min(Ae,I(Ce,T?fe:_e,re))+4:re+12,je=T?he?.hidden?0:_e+10+(he?.label?xe:0):ge,Re=Be+(be?.hidden||!be?.label?0:xe),Ne=(T?he:se)?.thickness??je,We=be?.thickness??Re,Ie=(T||Ce>0?12+(T?Q:0):Math.max(8,_e/2))+tt,Fe=g[kt]+4+(T?0:Q)+tt,Te={left:Ne+tt,top:Fe,width:Math.max(0,Ct-Ne-tt-Ie),height:Math.max(0,ve-Fe-We-tt)},De=T?Te.height:Te.width,Le=y(J?Math.max(1,te-1):te,De,G),Xe=n.useCallback(t=>J?te<=1?De/2:De*t/(te-1):Le.centre(t),[J,te,De,Le]),Ye=n.useCallback(t=>T?Te.left+ce.fraction(t)*Te.width:Te.top+(1-ce.fraction(t))*Te.height,[T,Te.left,Te.top,Te.width,Te.height,ce]),Ee=n.useCallback(t=>T?Te.top+(1-(de?.fraction(t)??0))*Te.height:Te.left+(de?.fraction(t)??0)*Te.width,[T,Te.left,Te.top,Te.width,Te.height,de]),Ve=n.useCallback((t,e)=>T?{x:Ye(e),y:Te.top+Xe(t)}:{x:Te.left+Xe(t),y:Ye(e)},[T,Ye,Xe,Te.left,Te.top]),Ze=Ye(Math.min(Math.max(0,ce.min),ce.max)),Ue=[...K(se?.references,Ye,T),...de?K(he?.references,Ee,!T):[]],He=t=>t instanceof Date?z(t,Mt):Xt(t),Ke=[...se?.references??[],...de?he?.references??[]:[]].filter(t=>void 0!==t.label&&null!==t.label&&""!==t.label),Oe={plot:Te,values:ee,visible:_t.visible,colors:Et,labelInk:t=>"series"===ft?Et[t]??Z:"var(--_mp-color-on-surface)",scale:ce,band:Le,horizontal:T,valuePx:Ye,categoryPx:Xe,point:Ve,categoryScale:de,categoryValuePx:Ee,zeroPx:Ze,categories:le,format:Xt,share:t=>S(t,Mt),size:kt},qe=lt?lt(Oe):X,Ge=!1===mt?{mode:"none"}:!0===mt||void 0===mt?{}:mt,Je=Ge.mode??(lt?"item":"index"),Qe=(t,e)=>{const l=St.current;if(!l||0===te)return null;const n=l.getBoundingClientRect(),a=T?e-n.top-Te.top:t-n.left-Te.left;if(a<-Le.step||a>De+Le.step)return null;const i=J?te<=1?0:Math.round(a/De*(te-1)):Math.floor(a/Le.step);return Math.min(te-1,Math.max(0,i))},tl=null===Rt?null:qe[Rt]??null,el=lt?tl?tl.index:null:Bt,ll=lt?qe.length:te,nl=()=>{jt(null),Nt(null),It(null)},al=t=>{const e=Dt.current;if(null===e)return;H(t,!1);const l=Math.min(e.start,e.to),n=Math.max(e.start,e.to);Lt(null),n-l+1>=Math.max(2,Ht.min??2)&&ne([Qt+l,Qt+n])},il=t=>{const e=null===t?null:Math.min(ll-1,Math.max(0,t));lt?Nt(e):jt(e)},ol=t=>{It(null);il(((lt?Rt:Bt)??(t>0?-1:ll))+t)},rl=null!==el&&ie?ee.reduce((t,e,l)=>{const n=_t.visible[l]?e[el]?.value:null;return t+(null!=n&&n>0?n:0)},0):0,sl=null===el?[]:w.flatMap((t,e)=>{if(!_t.visible[e]||tl&&tl.series!==e)return[];const l=ee[e]?.[el];return l&&null!==l.value?[{seriesIndex:e,name:t.name,color:l.color??Et[e],value:l.value,formatted:ie&&rl>0&&l.value>0?`${Xt(l.value)} · ${S(l.value/rl,Mt)}`:Xt(l.value),label:l.label}]:[]}),hl=tl&&rt?rt(tl):null,cl=hl?hl.items:"item"===Je&&sl.length>1&&null!==Wt?[sl.reduce((t,e)=>Math.abs(Ye(e.value??0)-Wt)<Math.abs(Ye(t.value??0)-Wt)?e:t)]:sl,ul="value"===Ge.sort?[...cl].sort((t,e)=>(e.value??-1/0)-(t.value??-1/0)):cl,dl=!(Ge.total??!0===E)||hl||cl.length<2?void 0:Xt(cl.reduce((t,e)=>t+(e.value??0),0)),ml=hl?hl.heading:tl?z(ee[tl.series]?.[tl.index]?.x??$?.[tl.index]??tl.index,Mt):null===el?void 0:z(le[el]??el,Mt),pl=tl?tl.x:T?Ye(cl[0]?.value??0):Te.left+Xe(el??0),fl=tl?tl.y:T?Te.top+Xe(el??0):Te.top+Te.height/2,xl=tl?(tl.x-Te.left)/Math.max(1,Te.width)>.6:(T?ce.fraction(cl[0]?.value??0):Xe(el??0)/Math.max(1,De))>.6,gl=!1===dt?{interactive:!1}:!0===dt||void 0===dt?{}:dt,vl=!0===dt||!1!==dt&&w.length>1,yl=gl.side??"bottom",bl={...Oe,hovered:_t.hovered,activeIndex:el,marks:qe,activeMark:tl},kl=0===te||null===oe||"value"===et&&null===ue;return t(u,{...bt,size:kt,className:gt,style:vt,plotRef:St,name:ut??wt.label,describedBy:kl?void 0:Ke.length>0?`${At} ${$t}`:At,interactive:!kl,height:st,legendSide:yl,plotProps:{onPointerDown:Kt&&!kl?t=>{const e=Qe(t.clientX,t.clientY);null!==e&&(H(t,!0),nl(),Lt({start:e,to:e}))}:void 0,onPointerMove:kl?void 0:t=>{null===Dt.current?"none"!==Je&&(lt?Nt(((t,e)=>{const l=St.current;if(!l||0===qe.length)return null;const n=l.getBoundingClientRect(),a=t-n.left,i=e-n.top;let o=null,r=1/0,s=1/0;return qe.forEach((t,e)=>{const l=Math.hypot(t.x-a,t.y-i),n=void 0===t.rx?Math.max(0,l-t.r):Math.hypot(Math.max(0,Math.abs(t.x-a)-t.rx),Math.max(0,Math.abs(t.y-i)-(t.ry??t.rx)));n<=nt&&(n<r||n===r&&l<s)&&(r=n,s=l,o=e)}),o})(t.clientX,t.clientY)):jt(Qe(t.clientX,t.clientY)),"item"===Je&&It(((t,e)=>{const l=St.current;if(!l)return null;const n=l.getBoundingClientRect();return T?t-n.left:e-n.top})(t.clientX,t.clientY))):Lt({...Dt.current,to:Qe(t.clientX,t.clientY)??Dt.current.to})},onPointerUp:Kt&&!kl?al:void 0,onPointerCancel:Kt&&!kl?()=>Lt(null):void 0,onPointerLeave:t=>{Kt&&!kl&&al(t),nl()},onKeyDown:kl||"none"===Je&&!Kt?void 0:t=>{const e=T?"ArrowDown":"ArrowRight",l=T?"ArrowUp":"ArrowLeft";if(t.key===e)ol(1);else if(t.key===l)ol(-1);else if("Home"===t.key)il(0);else if("End"===t.key)il(ll-1);else{if("Escape"!==t.key)return;null===el&&null!==Jt?ne(null):nl()}t.preventDefault()},onBlur:nl},overlay:null===Jt||kl?null:t("button",{type:"button",onClick:()=>ne(null),className:["mp-chart__reset absolute end-0 top-0 z-10 cursor-pointer","text-mp-primary text-mp-label-medium rounded-mp-xs px-2 py-1","appearance-none border-0 bg-transparent [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),children:wt.showAll}),tooltip:null!==el&&cl.length>0&&"none"!==Je&&null===Ft?Ge.render?t("div",{"aria-hidden":"true",className:"pointer-events-none absolute z-10",style:{left:pl,top:fl,transform:`translate(${xl?"calc(-100% - 12px)":"12px"}, -50%)`},children:Ge.render({index:el,category:le[el]??el,items:ul,total:dl})}):t(m,{heading:ml,items:ul,total:dl,totalLabel:wt.total,x:pl,y:fl,flip:xl,size:kt}):null,legend:vl?t(c,{names:Vt,colors:Et,options:gl,visibility:_t,size:kt,swatch:at,colorNames:"series"===ft,values:gl.showValue&&null!==el?w.map((t,e)=>{const l=ee[e]?.[el]?.value;return null==l?void 0:Xt(l)}):void 0}):null,status:{heading:ml,items:ul,total:dl,totalLabel:wt.total},table:kl?null:e(l,{children:[ot?.(At)??t(d,{id:At,caption:ut??wt.table,corner:he?.label??wt.category,categories:le,names:Vt,values:ee,format:Xt,locale:Mt,empty:zt.empty}),0===Ke.length?null:t("ul",{id:$t,className:f,children:Ke.map((t,l)=>e("li",{children:[t.label,":"," ",void 0===t.to?He(t.value):`${He(t.value)}–${He(t.to)}`]},l))})]}),children:kl?t("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:pt??zt.empty}):Ct>0&&ve>0?e("svg",{width:Ct,height:ve,viewBox:`0 0 ${Ct} ${ve}`,"aria-hidden":"true",className:"block overflow-visible",children:[t(U,{plot:Te,scale:ce,horizontal:T,categoryPx:Xe,categoryScale:de,categoryValuePx:Ee,valuePx:Ye,tickTexts:me,categoryTexts:$e,valueAxis:se,categoryAxis:he,fontSize:re,zeroPx:Ze,turn:Ce,tickBand:Be}),t(O,{marks:Ue,plot:Te,pass:"band",fontSize:re}),null===el||lt||"index"!==Je||!1===Ge.crosshair?null:(()=>{const e=Xe(el);return t("line",T?{x1:Te.left,x2:Te.left+Te.width,y1:Te.top+e,y2:Te.top+e,stroke:V,strokeWidth:1}:{x1:Te.left+e,x2:Te.left+e,y1:Te.top,y2:Te.top+Te.height,stroke:V,strokeWidth:1})})(),yt(bl),t(O,{marks:Ue,plot:Te,pass:"line",fontSize:re}),null===Ft?null:(()=>{const e=[Ft.start,Ft.to].map(t=>(T?Te.top:Te.left)+Xe(t)).sort((t,e)=>t-e),l=Math.max(Le.step,1),n=e[0]-l/2,a=e[1]-e[0]+l;return t("rect",{x:T?Te.left:n,y:T?n:Te.top,width:T?Te.width:a,height:T?a:Te.height,fill:"var(--_mp-color-primary)",fillOpacity:.12,stroke:"var(--_mp-color-primary)",strokeWidth:1})})()]}):null})}
+import{jsx as t,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useBoxSize as a}from"./box-size.js";import{useMPLocale as o,useMPMessages as i}from"./locale.js";import{useMPSize as r}from"./config.js";import{CHART as s}from"./messages/chart.js";import{TABLE as h}from"./messages/table.js";import{ChartLegend as c,ChartShell as u,LEGEND_OFF as d,LEGEND_ON as m,ChartTable as p,ChartTooltipPanel as f,useVisibility as x}from"./ChartChrome.js";import{VISUALLY_HIDDEN as g}from"./visually-hidden.js";import{CHART_FONT_SIZE as v,MARKER_RADIUS as y,PLOT_HEIGHT as b,bandScale as k,categoryAt as M,categoryCount as w,categoryExtent as z,fitsLast as S,formatCategory as C,formatShare as P,formatStatistic as A,seriesColor as $,seriesExtent as _,showsTick as B,textWidth as j,tickStride as R,tickTurn as N,toNumber as W,toValues as I,truncate as F,turnedBand as T,turnedRoom as D,turnedStep as L,valueScale as X,withReferences as Y}from"./chart.js";const V=[];function E({text:e,along:l,top:n,turn:a,fontSize:o}){return t("text",a<=0?{x:l,y:n+o+6,textAnchor:"middle",fill:H,fontSize:o,children:e}:{x:l,y:n+8,textAnchor:"end",dominantBaseline:"central",transform:`rotate(${-a} ${l} ${n+8})`,fill:H,fontSize:o,children:e})}const Z="var(--_mp-color-outline-variant)",U="var(--_mp-color-outline)",H="var(--_mp-color-on-surface-variant)";function K({plot:l,scale:n,horizontal:a,categoryPx:o,categoryScale:i,categoryValuePx:r,valuePx:s,tickTexts:h,categoryTexts:c,valueAxis:u,categoryAxis:d,fontSize:m,zeroPx:p,turn:f,tickBand:x}){const g=!1!==u?.grid&&!u?.hidden,v=!d?.hidden&&(d?.grid??null!==i),y=t=>i?r(i.ticks[t]):(a?l.top:l.left)+o(t),b=(t,e)=>f>0?L(f,m):t.reduce((t,e)=>Math.max(t,j(e,m)),1)+e,k=R(c.length,a?l.height:l.width,a?1.8*m:b(c,12)),M=R(n.ticks.length,a?l.width:l.height,a?b(h,16):2*m),w=c.length>1?Math.abs(y(1)-y(0)):l.width,z=n.ticks.length>1?Math.abs(s(n.ticks[1])-s(n.ticks[0])):l.height,C=S(c.length,k,w,a?1.8*m:f>0?L(f,m):j(c[c.length-1]??"",m)),P=S(n.ticks.length,M,z,a?f>0?L(f,m):j(h[h.length-1]??"",m):1.6*m);return e("g",{className:"mp-chart__axes",children:[n.ticks.map((o,i)=>{const r=s(o),c=Math.abs(o)<1e-9&&n.min<0,d=!u?.hidden&&B(i,n.ticks.length,M,P);return e("g",{children:[g?t("line",a?{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:c?U:Z,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:r,y2:r,stroke:c?U:Z,strokeWidth:1}):null,d?a?t(E,{text:h[i],along:r,top:l.top+l.height,turn:f,fontSize:m}):t("text",{x:l.left-8,y:r,textAnchor:"end",dominantBaseline:"central",fill:H,fontSize:m,children:h[i]}):null]},`v${i}`)}),c.map((n,o)=>{const i=y(o),r=!d?.hidden&&B(o,c.length,k,C);return v||r?e("g",{children:[v?t("line",a?{x1:l.left,x2:l.left+l.width,y1:i,y2:i,stroke:Z,strokeWidth:1}:{x1:i,x2:i,y1:l.top,y2:l.top+l.height,stroke:Z,strokeWidth:1}):null,r?a?t("text",{x:l.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fill:H,fontSize:m,children:n}):t(E,{text:n,along:i,top:l.top+l.height,turn:f,fontSize:m}):null]},`c${o}`):null}),t("line",a?{x1:p,x2:p,y1:l.top,y2:l.top+l.height,stroke:U,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:p,y2:p,stroke:U,strokeWidth:1}),u?.label&&!u.hidden?t("text",{x:a?l.left+l.width/2:m,y:a?l.top+l.height+x+m:l.top+l.height/2,textAnchor:"middle",dominantBaseline:a?"auto":"central",fill:H,fontSize:m,transform:a?void 0:`rotate(-90 ${m} ${l.top+l.height/2})`,children:u.label}):null,d?.label&&!d.hidden?t("text",{x:a?m:l.left+l.width/2,y:a?l.top+l.height/2:l.top+l.height+x+m,textAnchor:"middle",dominantBaseline:a?"central":"auto",fill:H,fontSize:m,transform:a?`rotate(-90 ${m} ${l.top+l.height/2})`:void 0,children:d.label}):null]})}function O(t,e){try{e?t.currentTarget.setPointerCapture(t.pointerId):t.currentTarget.releasePointerCapture(t.pointerId)}catch{}}function q(t,e,l){return(t??[]).map(t=>({...t,at:W(t.value),end:void 0===t.to?null:W(t.to)})).filter(t=>null!==t.at).map(t=>({at:e(t.at),to:null===t.end?null:e(t.end),upright:l,label:t.label,color:t.color?$(0,t.color):"var(--_mp-color-outline)",dashed:!1!==t.dashed}))}function G({marks:l,plot:n,pass:a,fontSize:o}){return 0===l.length?null:t("g",{className:`mp-chart__references mp-chart__references--${a}`,"aria-hidden":"true",children:l.map((l,i)=>{if("band"===a)return null===l.to?null:t("rect",{...(r=l.at,s=l.to,l.upright?{x:Math.min(r,s),y:n.top,width:Math.abs(s-r),height:n.height}:{x:n.left,y:Math.min(r,s),width:n.width,height:Math.abs(s-r)}),fill:l.color,opacity:.12},i);var r,s;const h=null===l.to?[l.at]:[l.at,l.to];return e("g",{children:[h.map(e=>t("line",{x1:l.upright?e:n.left,x2:l.upright?e:n.left+n.width,y1:l.upright?n.top:e,y2:l.upright?n.top+n.height:e,stroke:l.color,strokeWidth:1,strokeDasharray:l.dashed?"4 3":void 0},e)),void 0===l.label||null===l.label||""===l.label?null:t("text",{x:l.upright?l.at+4:n.left+n.width,y:l.upright?n.top+o:l.at-4,textAnchor:l.upright?"start":"end",fill:l.color,fontSize:o,children:l.label})]},i)})})}export function CartesianFrame({series:S,categories:B,xAxis:R,yAxis:W,horizontal:L=!1,zoom:E,stacked:Z=!1,includeZero:J=!0,bandRatio:Q=1,inset:tt=!1,headroom:et=0,markInset:lt=0,xScale:nt="band",marks:at,markRadius:ot=24,swatch:it,scale:rt,table:st,markTooltip:ht,height:ct,format:ut,locale:dt,label:mt,legend:pt,tooltip:ft,empty:xt,labelColor:gt="ink",size:vt,className:yt,style:bt,children:kt,...Mt}){const wt=r(vt),zt=o(dt),St=i(s,zt),Ct=i(h,zt),Pt=n.useRef(null),At=a(Pt),$t=At.width,_t=n.useId(),Bt=n.useId(),jt=x(S),[Rt,Nt]=n.useState(null),[Wt,It]=n.useState(null),[Ft,Tt]=n.useState(null),[Dt,Lt]=n.useState(null),Xt=n.useRef(null),Yt=t=>{Xt.current=t,Lt(t)},Vt=n.useCallback(t=>A(t,zt,ut,!0),[ut,zt]),Et=n.useMemo(()=>I(S),[S]),Zt=n.useMemo(()=>S.map((t,e)=>$(e,t.color)),[S]),Ut=n.useMemo(()=>S.map(t=>t.name),[S]),Ht=w(S),Kt=n.useMemo(()=>Array.from({length:Ht},(t,e)=>M(e,B,Et)),[Ht,B,Et]),Ot=!0!==E&&!1!==E&&E?E:{},qt=void 0!==E&&!1!==E&&"band"===nt,[Gt,Jt]=n.useState(()=>Ot.defaultRange??null),Qt=(void 0!==Ot.range?Ot.range:Gt)??null,te=qt&&null!==Qt&&0!==Ht?[Math.max(0,Math.min(Ht-1,Math.min(Qt[0],Qt[1]))),Math.max(0,Math.min(Ht-1,Math.max(Qt[0],Qt[1])))]:null,ee=te?te[0]:0,le=te?te[1]-te[0]+1:Ht,ne=null!==te,ae=n.useMemo(()=>ne?Et.map(t=>t.slice(ee,ee+le)):Et,[Et,ne,ee,le]),oe=n.useMemo(()=>ne?Kt.slice(ee,ee+le):Kt,[Kt,ne,ee,le]),ie=t=>{void 0===Ot.range&&Jt(t),Ot.onRangeChange?.(t)},re=ae.filter((t,e)=>jt.visible[e]),se="percent"===Z,he=se?{min:0,max:1}:_(re,Boolean(Z)),ce=v[wt],ue=W,de=R,me=rt??X(se?he:Y(he,ue?.references),{min:se?0:ue?.min,max:se?1:ue?.max,tickCount:ue?.tickCount??(se?4:void 0),includeZero:J}),pe="value"===nt?z(re,B):null,fe="value"===nt?X(Y(pe,de?.references),{min:de?.min,max:de?.max,tickCount:de?.tickCount,includeZero:!1}):null,xe=me.ticks.map((t,e)=>ue?.tickFormat?String(ue.tickFormat(t,e)):se?P(t,zt):Vt(t)),ge=fe?fe.ticks.map((t,e)=>de?.tickFormat?String(de.tickFormat(t,e)):A(t,zt,void 0,!0)):oe.map((t,e)=>de?.tickFormat?String(de.tickFormat(t,e)):C(t,zt)),ve=xe.reduce((t,e)=>Math.max(t,j(e,ce)),0),ye=ce+6,be=ue?.hidden?0:ve+10+(ue?.label?ye:0),ke="number"==typeof ct?ct:void 0===ct?b[wt]:At.height,Me=($t-(L?0:be)-16)/Math.max(1,le),we=L?ue:de,ze=L?xe:ge,Se=L?de?.hidden?0:ge.reduce((t,e)=>Math.max(t,Math.min(150,j(e,ce))),0)+10+(de?.label?ye:0):be,Ce=ze.reduce((t,e)=>Math.max(t,j(e,ce)),0),Pe=L?12+et:Math.max(8,Ce/2),Ae=($t-Se-Pe-2*lt)/Math.max(1,ze.length),$e=L||null!==fe,_e=we?.hidden?0:N(we?.tickLabels??($e?"truncate":"auto"),ze,ce,Ae),Be=Math.min(120,.5*ke),je=_e>0&&!L?ge.map((t,e)=>F(t,(t=>Math.min(D(_e,Be,ce),_e>=90?1/0:(Se+Ae*(t+(tt?0:.5)))/Math.cos(_e*Math.PI/180)))(e),ce)):fe?ge:L||Me-6>=2.4*ce?ge.map(t=>F(t,L?150:Me-6,ce)):ge,Re=je.reduce((t,e)=>Math.max(t,j(e,ce)),0),Ne=we?.hidden?0:_e>0?8+Math.min(Be,T(_e,L?ve:Re,ce))+4:ce+12,We=L?de?.hidden?0:Re+10+(de?.label?ye:0):be,Ie=Ne+(we?.hidden||!we?.label?0:ye),Fe=(L?de:ue)?.thickness??We,Te=we?.thickness??Ie,De=(L||_e>0?12+(L?et:0):Math.max(8,Re/2))+lt,Le=y[wt]+4+(L?0:et)+lt,Xe={left:Fe+lt,top:Le,width:Math.max(0,$t-Fe-lt-De),height:Math.max(0,ke-Le-Te-lt)},Ye=L?Xe.height:Xe.width,Ve=k(tt?Math.max(1,le-1):le,Ye,Q),Ee=n.useCallback(t=>tt?le<=1?Ye/2:Ye*t/(le-1):Ve.centre(t),[tt,le,Ye,Ve]),Ze=n.useCallback(t=>L?Xe.left+me.fraction(t)*Xe.width:Xe.top+(1-me.fraction(t))*Xe.height,[L,Xe.left,Xe.top,Xe.width,Xe.height,me]),Ue=n.useCallback(t=>L?Xe.top+(1-(fe?.fraction(t)??0))*Xe.height:Xe.left+(fe?.fraction(t)??0)*Xe.width,[L,Xe.left,Xe.top,Xe.width,Xe.height,fe]),He=n.useCallback((t,e)=>L?{x:Ze(e),y:Xe.top+Ee(t)}:{x:Xe.left+Ee(t),y:Ze(e)},[L,Ze,Ee,Xe.left,Xe.top]),Ke=Ze(Math.min(Math.max(0,me.min),me.max)),Oe=[...q(ue?.references,Ze,L),...fe?q(de?.references,Ue,!L):[]],qe=t=>t instanceof Date?C(t,zt):Vt(t),Ge=[...ue?.references??[],...fe?de?.references??[]:[]].filter(t=>void 0!==t.label&&null!==t.label&&""!==t.label),Je={plot:Xe,values:ae,visible:jt.visible,colors:Zt,labelInk:t=>"series"===gt?Zt[t]??H:"var(--_mp-color-on-surface)",scale:me,band:Ve,horizontal:L,valuePx:Ze,categoryPx:Ee,point:He,categoryScale:fe,categoryValuePx:Ue,zeroPx:Ke,categories:oe,format:Vt,share:t=>P(t,zt),size:wt},Qe=at?at(Je):V,tl=!1===ft?{mode:"none"}:!0===ft||void 0===ft?{}:ft,el=tl.mode??(at?"item":"index"),ll=(t,e)=>{const l=Pt.current;if(!l||0===le)return null;const n=l.getBoundingClientRect(),a=L?e-n.top-Xe.top:t-n.left-Xe.left;if(a<-Ve.step||a>Ye+Ve.step)return null;const o=tt?le<=1?0:Math.round(a/Ye*(le-1)):Math.floor(a/Ve.step);return Math.min(le-1,Math.max(0,o))},nl=null===Wt?null:Qe[Wt]??null,al=at?nl?nl.index:null:Rt,ol=at?Qe.length:le,il=()=>{Nt(null),It(null),Tt(null)},rl=t=>{const e=Xt.current;if(null===e)return;O(t,!1);const l=Math.min(e.start,e.to),n=Math.max(e.start,e.to);Yt(null),n-l+1>=Math.max(2,Ot.min??2)&&ie([ee+l,ee+n])},sl=t=>{const e=null===t?null:Math.min(ol-1,Math.max(0,t));at?It(e):Nt(e)},hl=t=>{Tt(null);sl(((at?Wt:Rt)??(t>0?-1:ol))+t)},cl=null!==al&&se?ae.reduce((t,e,l)=>{const n=jt.visible[l]?e[al]?.value:null;return t+(null!=n&&n>0?n:0)},0):0,ul=null===al?[]:S.flatMap((t,e)=>{if(!jt.visible[e]||nl&&nl.series!==e)return[];const l=ae[e]?.[al];return l&&null!==l.value?[{seriesIndex:e,name:t.name,color:l.color??Zt[e],value:l.value,formatted:se&&cl>0&&l.value>0?`${Vt(l.value)} · ${P(l.value/cl,zt)}`:Vt(l.value),label:l.label}]:[]}),dl=nl&&ht?ht(nl):null,ml=dl?dl.items:"item"===el&&ul.length>1&&null!==Ft?[ul.reduce((t,e)=>Math.abs(Ze(e.value??0)-Ft)<Math.abs(Ze(t.value??0)-Ft)?e:t)]:ul,pl="value"===tl.sort?[...ml].sort((t,e)=>(e.value??-1/0)-(t.value??-1/0)):ml,fl=!(tl.total??!0===Z)||dl||ml.length<2?void 0:Vt(ml.reduce((t,e)=>t+(e.value??0),0)),xl=dl?dl.heading:nl?C(ae[nl.series]?.[nl.index]?.x??B?.[nl.index]??nl.index,zt):null===al?void 0:C(oe[al]??al,zt),gl=nl?nl.x:L?Ze(ml[0]?.value??0):Xe.left+Ee(al??0),vl=nl?nl.y:L?Xe.top+Ee(al??0):Xe.top+Xe.height/2,yl=nl?(nl.x-Xe.left)/Math.max(1,Xe.width)>.6:(L?me.fraction(ml[0]?.value??0):Ee(al??0)/Math.max(1,Ye))>.6,bl=!1===pt?d:!0===pt||void 0===pt?m:pt,kl=!0===pt||!1!==pt&&S.length>1,Ml=bl.side??"bottom",wl={...Je,hovered:jt.hovered,activeIndex:al,marks:Qe,activeMark:nl},zl=0===le||null===he||"value"===nt&&null===pe;return t(u,{...Mt,size:wt,className:yt,style:bt,plotRef:Pt,name:mt??St.label,describedBy:zl?void 0:Ge.length>0?`${_t} ${Bt}`:_t,interactive:!zl,height:ct,legendSide:Ml,plotProps:{onPointerDown:qt&&!zl?t=>{const e=ll(t.clientX,t.clientY);null!==e&&(O(t,!0),il(),Yt({start:e,to:e}))}:void 0,onPointerMove:zl?void 0:t=>{if(null!==Xt.current){const e=ll(t.clientX,t.clientY)??Xt.current.to;return void(e!==Xt.current.to&&Yt({...Xt.current,to:e}))}"none"!==el&&(at?It(((t,e)=>{const l=Pt.current;if(!l||0===Qe.length)return null;const n=l.getBoundingClientRect(),a=t-n.left,o=e-n.top;let i=null,r=1/0,s=1/0;return Qe.forEach((t,e)=>{const l=Math.hypot(t.x-a,t.y-o),n=void 0===t.rx?Math.max(0,l-t.r):Math.hypot(Math.max(0,Math.abs(t.x-a)-t.rx),Math.max(0,Math.abs(t.y-o)-(t.ry??t.rx)));n<=ot&&(n<r||n===r&&l<s)&&(r=n,s=l,i=e)}),i})(t.clientX,t.clientY)):Nt(ll(t.clientX,t.clientY)),"item"!==el||at||Tt(((t,e)=>{const l=Pt.current;if(!l)return null;const n=l.getBoundingClientRect();return L?t-n.left:e-n.top})(t.clientX,t.clientY)))},onPointerUp:qt&&!zl?rl:void 0,onPointerCancel:qt&&!zl?()=>Yt(null):void 0,onPointerLeave:t=>{qt&&!zl&&rl(t),il()},onKeyDown:zl||"none"===el&&!qt?void 0:t=>{const e=L?"ArrowDown":"ArrowRight",l=L?"ArrowUp":"ArrowLeft";if(t.key===e)hl(1);else if(t.key===l)hl(-1);else if("Home"===t.key)sl(0);else if("End"===t.key)sl(ol-1);else{if("Escape"!==t.key)return;null===al&&null!==te?ie(null):il()}t.preventDefault()},onBlur:il},overlay:null===te||zl?null:t("button",{type:"button",onClick:()=>ie(null),className:["mp-chart__reset absolute end-0 top-0 z-10 cursor-pointer","text-mp-primary text-mp-label-medium rounded-mp-xs px-2 py-1","appearance-none border-0 bg-transparent [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),children:St.showAll}),tooltip:null!==al&&ml.length>0&&"none"!==el&&null===Dt?tl.render?t("div",{"aria-hidden":"true",className:"pointer-events-none absolute z-10",style:{left:gl,top:vl,transform:`translate(${yl?"calc(-100% - 12px)":"12px"}, -50%)`},children:tl.render({index:al,category:oe[al]??al,items:pl,total:fl})}):t(f,{heading:xl,items:pl,total:fl,totalLabel:St.total,x:gl,y:vl,flip:yl,size:wt}):null,legend:kl?t(c,{names:Ut,colors:Zt,options:bl,visibility:jt,size:wt,swatch:it,colorNames:"series"===gt,values:bl.showValue&&null!==al?S.map((t,e)=>{const l=ae[e]?.[al]?.value;return null==l?void 0:Vt(l)}):void 0}):null,status:{heading:xl,items:pl,total:fl,totalLabel:St.total},table:zl?null:e(l,{children:[st?.(_t)??t(p,{id:_t,caption:mt??St.table,corner:de?.label??St.category,categories:oe,names:Ut,values:ae,format:Vt,locale:zt,empty:Ct.empty}),0===Ge.length?null:t("ul",{id:Bt,className:g,children:Ge.map((t,l)=>e("li",{children:[t.label,":"," ",void 0===t.to?qe(t.value):`${qe(t.value)}–${qe(t.to)}`]},l))})]}),children:zl?t("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:xt??Ct.empty}):$t>0&&ke>0?e("svg",{width:$t,height:ke,viewBox:`0 0 ${$t} ${ke}`,"aria-hidden":"true",className:"block overflow-visible",children:[t(K,{plot:Xe,scale:me,horizontal:L,categoryPx:Ee,categoryScale:fe,categoryValuePx:Ue,valuePx:Ze,tickTexts:xe,categoryTexts:je,valueAxis:ue,categoryAxis:de,fontSize:ce,zeroPx:Ke,turn:_e,tickBand:Ne}),t(G,{marks:Oe,plot:Xe,pass:"band",fontSize:ce}),null===al||at||"index"!==el||!1===tl.crosshair?null:(()=>{const e=Ee(al);return t("line",L?{x1:Xe.left,x2:Xe.left+Xe.width,y1:Xe.top+e,y2:Xe.top+e,stroke:U,strokeWidth:1}:{x1:Xe.left+e,x2:Xe.left+e,y1:Xe.top,y2:Xe.top+Xe.height,stroke:U,strokeWidth:1})})(),kt(wl),t(G,{marks:Oe,plot:Xe,pass:"line",fontSize:ce}),null===Dt?null:(()=>{const e=[Dt.start,Dt.to].map(t=>(L?Xe.top:Xe.left)+Ee(t)).sort((t,e)=>t-e),l=Math.max(Ve.step,1),n=e[0]-l/2,a=e[1]-e[0]+l;return t("rect",{x:L?Xe.left:n,y:L?n:Xe.top,width:L?Xe.width:a,height:L?a:Xe.height,fill:"var(--_mp-color-primary)",fillOpacity:.12,stroke:"var(--_mp-color-primary)",strokeWidth:1})})()]}):null})}

package/dist/internal/FieldOutline.d.ts

@@ -32,7 +32,15 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
      * for the type scale it rests at.
      */
     size: MPSize;
-    /** The control the label names. */
+    /**
+     * The control the label names, for a control that is not Base UI's own.
+     *
+     * Left out for a `Field.Control`, whose label follows the id the control is
+     * actually drawn with: a generated one in a server's markup, and the caller's
+     * `id` once the page has hydrated. Naming the caller's `id` here pointed the
+     * server's `<label for>` at an element that did not exist, so the label named
+     * nothing until hydration, and every field rendered once more to repair it.
+     */
     htmlFor?: string;
     /**
      * Whether the label is up in the notch. `false` rests it on the control's own

package/dist/internal/FieldOutline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,Fragment as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";const i={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(o,a){return e(t,{children:[o,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:e=!1,notched:o=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].filter(Boolean).join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",o?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(t,e)}):null})}export function MPFieldLabel({size:t,label:e,required:o=!1,htmlFor:p,shrunk:l=!0,multiline:u=!1}){return r(a.Label,{htmlFor:p,"data-mp-shrunk":l?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",i[t],l?"text-mp-body-small top-0 max-w-none":[n[t],"max-w-[calc(100%-2rem)] truncate",u?s[t]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(e,o)})}export function useFloatingLabel({floating:r,filled:t,pinned:e=!1}){const[a,n]=o.useState(!1);return{shrunk:!r||t||a||e,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}
+import{jsx as r,Fragment as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";const i={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(e,a){return o(t,{children:[e,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:o=!1,notched:e=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].filter(Boolean).join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",e?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(t,o)}):null})}export function MPFieldLabel({size:t,label:o,required:e=!1,htmlFor:p,shrunk:l=!0,multiline:u=!1}){return r(a.Label,{...void 0===p?null:{htmlFor:p},"data-mp-shrunk":l?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",i[t],l?"text-mp-body-small top-0 max-w-none":[n[t],"max-w-[calc(100%-2rem)] truncate",u?s[t]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(o,e)})}export function useFloatingLabel({floating:r,filled:t,pinned:o=!1}){const[a,n]=e.useState(!1);return{shrunk:!r||t||a||o,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}

package/dist/internal/RenderedLink.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+/**
+ * An `<a>`, or whatever a caller's `render` makes of it — a router's `Link`.
+ *
+ * A component rather than a `useRender` call where the link is drawn, because
+ * the link is one branch of a ternary and a hook cannot sit in one. The same
+ * shape as the control inside an `MPListItem`, which was the first `render` in
+ * the library to replace an inner link rather than a component's root.
+ *
+ * Under App Router a plain `<a>` to a page of the same site is a full page
+ * load: no client-side navigation, and no prefetch while the link is on
+ * screen. A router owns both through its own `Link`, which takes the same
+ * `href`, so `render={<Link />}` keeps the URL written once — on the
+ * component — and lets the router draw the element.
+ */
+export declare function RenderedLink({ render, props }: {
+    render: useRender.RenderProp | undefined;
+    props: Record<string, unknown>;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/internal/RenderedLink.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime";import{useRender as e}from"@base-ui/react/use-render";export function RenderedLink({render:n,props:o}){return e({render:n??r("a",{}),props:o})}

package/dist/internal/SupportingText.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{Field as t}from"@base-ui/react/field";import{META_TEXT as a,hasContent as n}from"./scale.js";export function MPSupportingText({description:o,errorMessage:s,className:i}){const m=n(s)?"error":n(o)?"description":"none",c=r.useRef(null),p=r.useRef(m);r.useLayoutEffect(()=>{const e=c.current,r=p.current;p.current=m,e&&m!==r&&"none"!==m&&(e.dataset.mpReveal="none"===r?"open":"swap",e.style.animationName="none",e.offsetWidth,e.style.animationName="")},[m]);const l=["mp-supporting-text block min-h-0",a,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return n(s)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`${l} text-mp-error`,children:s})}):n(o)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`${l} text-mp-on-surface-variant m-0`,children:o})}):e(t.Error,{className:`${l} text-mp-error`})}
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{Field as t}from"@base-ui/react/field";import{META_TEXT as s,hasContent as a}from"./scale.js";import{useMPConfig as n}from"./config.js";export function MPSupportingText({description:o,errorMessage:i,className:m}){const p=a(i)?"error":a(o)?"description":"none",c=r.useRef(null),l=r.useRef(p),u=!0===n().reserveSupportingText;r.useLayoutEffect(()=>{const e=c.current,r=l.current;l.current=p,e&&p!==r&&"none"!==p&&(e.dataset.mpReveal="none"!==r||u?"swap":"open",e.style.animationName="none",e.offsetWidth,e.style.animationName="")},[p,u]);const d=["mp-supporting-text block min-h-0",s,"data-disabled:text-mp-on-surface/38",m??""].filter(Boolean).join(" ");if(u){const r="block min-h-0 data-disabled:text-mp-on-surface/38";return e("div",{className:["mp-supporting-text__line block min-h-[1lh]",s,m??""].filter(Boolean).join(" "),children:a(i)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`mp-supporting-text ${r} text-mp-error`,children:i})}):a(o)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`mp-supporting-text ${r} text-mp-on-surface-variant m-0`,children:o})}):e(t.Error,{className:`mp-supporting-text ${r} text-mp-error`})})}return a(i)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`${d} text-mp-error`,children:i})}):a(o)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`${d} text-mp-on-surface-variant m-0`,children:o})}):e(t.Error,{className:`${d} text-mp-error`})}

package/dist/internal/animate.d.ts

@@ -107,6 +107,8 @@ export interface AnimationRun {
     state: 'running' | 'paused';
     /** Whether the animation has been let go at all. */
     started: boolean;
+    /** How many times it has been started, so a replay is something to depend on. */
+    run: number;
     /** Spread onto the element when `trigger` is `hover`; empty otherwise. */
     handlers: React.HTMLAttributes<HTMLElement>;
 }
@@ -164,6 +166,8 @@ export interface AnimateElement {
     props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
     /** The children, wrapped when there is a `stagger` and untouched otherwise. */
     children: React.ReactNode;
+    /** How many times the animation has been started; changes on every replay. */
+    run: number;
 }
 /**
  * Everything an `MPAnimate*` root needs, in one call.

package/dist/internal/animate.js

@@ -1,2 +1,2 @@
 "use client";
-import{ANIM_BASE as e,ANIMATION_CLASS as t,animationSlots as n,easingValue as r,isInfinite as a,lengthValue as s,repeatValue as o,revealClip as i,slideOffsets as c}from"./animate-core.js";export{e as ANIM_BASE,t as ANIMATION_CLASS,n as animationSlots,r as easingValue,a as isInfinite,s as lengthValue,o as repeatValue,i as revealClip,c as slideOffsets};import*as u from"react";export function staggerChildren(e,t,r,{stagger:a,durationStep:s=0,reverse:o=!1}){const i=u.Children.toArray(e);return i.map((e,c)=>{const d=o?i.length-1-c:c,f=n({...r,delay:r.delay+d*a,durationOffset:(r.durationOffset??0)+d*s});if(!u.isValidElement(e))return u.createElement("span",{key:c,className:t,style:f},e);const l=e.props;return u.cloneElement(e,{className:[t,l.className].filter(Boolean).join(" "),style:{...f,...l.style}})})}const d="(prefers-reduced-motion: reduce)";function f(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=window.matchMedia(d);return t.addEventListener("change",e),()=>t.removeEventListener("change",e)}function l(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(d).matches}function m(){return!1}export function usePrefersReducedMotion(){return u.useSyncExternalStore(f,l,m)}export function useAnimationRun({trigger:e,play:t,once:n,threshold:r,paused:a,infinite:s}){const o=u.useRef(null),[i,c]=u.useState("mount"===e),[d,f]=u.useState(0),l=u.useCallback(()=>{c(!0),f(e=>e+1)},[]);u.useLayoutEffect(()=>{const e=o.current;if(!e||0===d)return;const t=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[d]),u.useEffect(()=>{if("visible"!==e)return;const t=o.current;if(!t||"undefined"==typeof IntersectionObserver)return void c(!0);const a=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),n&&a.disconnect()):n||c(!1)},{threshold:r});return a.observe(t),()=>a.disconnect()},[e,n,r,l]),u.useEffect(()=>{"manual"===e&&(t?l():c(!1))},[e,t,l]);const m=u.useCallback(()=>{s&&c(!1)},[s]),p="hover"===e?{onPointerEnter:l,onFocus:l,onPointerLeave:m,onBlur:m}:{};return{ref:u.useCallback(e=>{o.current=e},[]),state:i&&!a?"running":"paused",started:i,handlers:p}}export function useAnimateElement(r){const{trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u,stagger:d=0,durationStep:f,reverse:l,effectClass:m,children:p,...h}=r,g=useAnimationRun({trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u}),y=`${e} ${m??t[h.effect]}`,v=function(e,t,n){return"view"!==t?e:n?"paused":"running"}(g.state,h.timeline,c);return d>0?{ref:g.ref,className:"",style:{"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:staggerChildren(p,y,h,{stagger:d,durationStep:f,reverse:l})}:{ref:g.ref,className:y,style:{...n(h),"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:p}}
+import{ANIM_BASE as e,ANIMATION_CLASS as t,animationSlots as n,easingValue as r,isInfinite as s,lengthValue as a,repeatValue as o,revealClip as i,slideOffsets as u}from"./animate-core.js";export{e as ANIM_BASE,t as ANIMATION_CLASS,n as animationSlots,r as easingValue,s as isInfinite,a as lengthValue,o as repeatValue,i as revealClip,u as slideOffsets};import*as c from"react";import{watchIntersection as f}from"./intersection.js";import{mediaList as l}from"./media.js";export function staggerChildren(e,t,r,{stagger:s,durationStep:a=0,reverse:o=!1}){const i=c.Children.toArray(e);return i.map((e,u)=>{const f=o?i.length-1-u:u,l=n({...r,delay:r.delay+f*s,durationOffset:(r.durationOffset??0)+f*a});if(!c.isValidElement(e))return c.createElement("span",{key:u,className:t,style:l},e);const d=e.props;return c.cloneElement(e,{className:[t,d.className].filter(Boolean).join(" "),style:{...l,...d.style}})})}const d="(prefers-reduced-motion: reduce)";function m(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=l(d);return t?.addEventListener("change",e),()=>t?.removeEventListener("change",e)}function p(){return l(d)?.matches??!1}function h(){return!1}export function usePrefersReducedMotion(){return c.useSyncExternalStore(m,p,h)}export function useAnimationRun({trigger:e,play:t,once:n,threshold:r,paused:s,infinite:a}){const o=c.useRef(null),[i,u]=c.useState("mount"===e),[l,d]=c.useState(0),m=c.useRef("mount"===e),p=c.useCallback(()=>{u(!0),d(e=>e+1)},[]);c.useLayoutEffect(()=>{const e=o.current;if(!e||0===l)return;if(!m.current)return void(m.current=!0);const t=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[l]),c.useEffect(()=>{if("visible"!==e)return;const t=o.current;if(!t||"undefined"==typeof IntersectionObserver)return void u(!0);const s=f(t,e=>{e.isIntersecting?(p(),n&&s()):n||u(!1)},{threshold:r});return s},[e,n,r,p]),c.useEffect(()=>{"manual"===e&&(t?p():u(!1))},[e,t,p]);const h=c.useCallback(()=>{a&&u(!1)},[a]),g="hover"===e?{onPointerEnter:p,onFocus:p,onPointerLeave:h,onBlur:h}:{};return{ref:c.useCallback(e=>{o.current=e},[]),state:i&&!s?"running":"paused",started:i,run:l,handlers:g}}export function useAnimateElement(r){const{trigger:s,play:a,once:o,threshold:i,paused:u,infinite:c,stagger:f=0,durationStep:l,reverse:d,effectClass:m,children:p,...h}=r,g=useAnimationRun({trigger:s,play:a,once:o,threshold:i,paused:u,infinite:c}),y=`${e} ${m??t[h.effect]}`,v=function(e,t,n){return"view"!==t?e:n?"paused":"running"}(g.state,h.timeline,u);return f>0?{ref:g.ref,className:"",style:{"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:staggerChildren(p,y,h,{stagger:f,durationStep:l,reverse:d}),run:g.run}:{ref:g.ref,className:y,style:{...n(h),"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:p,run:g.run}}

package/dist/internal/box-size.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The size a chart lays itself out against: its box's own layout size, read
+ * before the browser paints.
+ *
+ * `useMPElementSize` answers the question a caller asks of it — how big the box
+ * looks — and two things about that answer are wrong for a chart:
+ *
+ * - **It is read in an effect**, which runs after the browser has painted. A
+ *   chart mounted in the browser drew one frame with no width, an empty box,
+ *   and then its picture. Read in a layout effect the first paint already has
+ *   the picture, and a server-rendered chart draws in the frame it hydrates in.
+ * - **It includes transforms.** A chart mounted inside a surface that enters
+ *   from `scale(0.95)` — `MPDialog` does — measured the shrunken box, drew its
+ *   paths to fit that, and was never told otherwise: a transform finishing is
+ *   not a resize, so the observer stays silent and the plot stays five per cent
+ *   narrower than the room it has. The layout size is the room.
+ *
+ * Rounded, and the rounding is what makes the bail-out meaningful.
+ */
+import * as React from 'react';
+import type { MPElementSize } from '../hooks/useMPElementSize.js';
+export declare function useBoxSize(ref: React.RefObject<Element | null>): MPElementSize;

package/dist/internal/box-size.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";import{useBrowserLayoutEffect as e}from"./layout-effect.js";const i={width:0,height:0};function n(t,e){const i=e?.borderBoxSize?.[0];if(i)return{width:Math.round(i.inlineSize),height:Math.round(i.blockSize)};if(t instanceof HTMLElement)return{width:t.offsetWidth,height:t.offsetHeight};const n=t.getBoundingClientRect();return{width:Math.round(n.width),height:Math.round(n.height)}}export function useBoxSize(r){const[o,h]=t.useState(i);return e(()=>{const t=r.current;if(!t)return;const e=t=>h(e=>e.width===t.width&&e.height===t.height?e:t);if(e(n(t)),"undefined"==typeof ResizeObserver)return;const i=new ResizeObserver(([i])=>e(n(t,i)));return i.observe(t),()=>i.disconnect()},[r]),o}

package/dist/internal/chart.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { MPChartCategory, MPChartCurve, MPChartDatum, MPChartSeries, MPChartTickLabels, MPSize } from '../types.js';
+import type { MPChartCategory, MPChartCurve, MPChartDatum, MPChartSeries, MPChartTickLabels, MPChartValueLabels, MPSize } from '../types.js';
 /**
  * The arithmetic and the vocabulary the charts share.
  *
@@ -257,18 +257,16 @@ export interface BandScale {
 }
 export declare function bandScale(count: number, length: number, ratio: number): BandScale;
 /**
- * Roughly how wide a string renders at a given font size.
+ * The lowest and highest of a list, in one pass and without spreading it.
  *
- * An estimate on purpose. The exact answer is a canvas measurement per label
- * per render, on a path that runs again on every resize — and what the number
- * is used for is deciding how much room to reserve, where a few pixels of
- * generosity cost nothing and a reflow costs a frame.
- *
- * 0.6em is about the advance of a digit in the sans-serifs a UI runs in.
- * Anything CJK is close to a full em, so the wider characters are counted as
- * one: a Korean axis reserving 60% of the room it needs is an axis that
- * overlaps itself.
+ * `Math.min(...values)` passes every value as an argument, and an engine runs
+ * out of argument room somewhere past a hundred thousand — the chart then throws
+ * a `RangeError` instead of drawing. `null` for an empty list.
  */
+export declare function bounds(values: Iterable<number>): {
+    min: number;
+    max: number;
+} | null;
 export declare function textWidth(text: string, fontSize: number): number;
 /**
  * A label cut to the room it has.
@@ -388,6 +386,18 @@ export declare function categoryCount(series: readonly MPChartSeries[]): number;
  * a numbered axis is a great deal better than a blank one.
  */
 export declare function categoryAt(index: number, categories: readonly MPChartCategory[] | undefined, values: readonly (readonly ChartValue[])[]): MPChartCategory;
+/**
+ * Which points of one series `valueLabels` writes a number beside, as a test
+ * on a point's index.
+ *
+ * Worked out once per series. Asked of each point in turn, the extremes meant
+ * filtering and spreading the whole series again for every point — quadratic in
+ * its length, on every render a hover makes.
+ *
+ * `last` is the index `last` names. Left out, it is the last point that has a
+ * value, which is what a line means by it; a bar chart names its last slot.
+ */
+export declare function valueLabelTest(series: readonly ChartValue[], mode: MPChartValueLabels, last?: number): (index: number) => boolean;
 /**
  * A category as the axis writes it.
  *