plass-ui 1.5.0 → 1.7.0

package/dist/components/window-pane/PlWindowPane.d.ts

@@ -74,8 +74,8 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
      *
      * What being in front looks like is the system's: coloured traffic lights on
      * macOS against grey ones, an accent title bar and an accent border on
-     * Windows 10, a tinted header bar on GNOME — and, on all four, a window one
-     * step further off the page than the ones behind it.
+     * Windows 10, a tinted header bar on GNOME — and, on every one of them, a
+     * window one step further off the page than the ones behind it.
      */
     active?: boolean;
     /**
@@ -94,7 +94,11 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
      * @default 'static'
      */
     position?: PlWindowPanePosition;
-    /** Lets the title bar be dragged. @default false */
+    /**
+     * Lets the title bar be dragged. The bar also becomes a stop in the tab
+     * order, where the arrow keys move the window.
+     * @default false
+     */
     draggable?: boolean;
     /** Lets the edges and corners be dragged. @default false */
     resizable?: boolean;
@@ -104,7 +108,10 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
     height?: number | string;
     /** How small it may be dragged, in pixels. @default 180 */
     minWidth?: number;
-    /** The same downward. Defaults to the title bar's own height. */
+    /**
+     * The same downward. Never less than the title bar and the frame round it,
+     * which is also the default.
+     */
     minHeight?: number;
     /** How far it has been dragged from where the layout put it. */
     offset?: PlWindowOffset;
@@ -130,7 +137,8 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
     onMinimizedChange?: (minimized: boolean) => void;
     /**
      * Whether the window fills whatever is holding it. Its corners go square
-     * while it does, as they do on every system.
+     * while it does, as they do on every system. A window that is also
+     * `minimized` fills it across and is rolled up to its bar.
      */
     maximized?: boolean;
     /** @default false */
@@ -150,13 +158,15 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
     restoreLabel?: string;
     closeLabel?: string;
     resizeLabel?: string;
+    /** What the title bar of a `draggable` window is called where the keyboard reaches it. */
+    moveLabel?: string;
     /** Renders something other than a `<div>`: `render={<section />}`. */
     render?: useRender.RenderProp;
     /** What is in the window. */
     children?: React.ReactNode;
 }
 /**
- * A window, drawn the way one of four systems draws it, with anything at all
+ * A window, drawn the way one of eight systems draws it, with anything at all
  * inside it.
  *
  * It is not a real window and does not pretend to be one: there is no desktop,

package/dist/components/window-pane/PlWindowPane.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as c,iconClasses as d}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as f,windowSlots as g}from"../../internal/window.js";import{useDefaults as w}from"../../internal/defaults.js";import{inertProps as p}from"../../internal/inert.js";import{focusablesIn as b}from"../../internal/focusable.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const v=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(x,z){const{os:y="macos",title:N,icon:E,actions:L,controls:M=!0,size:S,color:C,accent:k=!1,transparency:T=0,active:I,elevation:j=2,position:R="static",draggable:D=!1,resizable:P=!1,width:O,height:W,minWidth:B=180,minHeight:H,offset:A,defaultOffset:G,onOffsetChange:X,onResize:$,open:_,defaultOpen:F=!0,onOpenChange:U,minimized:Y,defaultMinimized:q=!1,onMinimizedChange:K,maximized:J,defaultMaximized:Q=!1,onMaximizedChange:V,scroll:Z=!0,minimizeLabel:ee,maximizeLabel:te,restoreLabel:ne,closeLabel:ie,resizeLabel:oe,render:re,className:se,style:ae,children:le,...ce}=x,de=w(),ue=S??de.size??"md",me=C??de.color??"primary",he=s(),fe=h(y),ge=f(y,ue),we=i.useId(),[pe,be]=useLatched(_,F,U),[ve,xe]=useLatched(Y,q,K),[ze,ye]=useLatched(J,Q,V),[Ne,Ee]=useLatched(A,G??{x:0,y:0},X),[Le,Me]=i.useState(null),[Se,Ce]=i.useState(!0),ke=I??Se,[Te,Ie]=i.useState(null),[je,Re]=i.useState(null),[De,Pe]=i.useState(!1),[Oe,We]=i.useState(!1),[Be,He]=i.useState(pe);Be!==pe&&(He(pe),We(!pe)),i.useEffect(()=>{if(!Oe)return;const e=window.setTimeout(()=>We(!1),260);return()=>window.clearTimeout(e)},[Oe]);const Ae=i.useRef(null),Ge=i.useCallback(e=>{Ae.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),Xe=i.useRef(null),$e=pe||Oe;i.useEffect(()=>{const e=Ae.current;if(!$e||!e)return;const arrive=t=>{const n=t.relatedTarget;n instanceof Node&&e.contains(n)||(Xe.current=n instanceof HTMLElement?n:null)};return e.addEventListener("focusin",arrive),()=>e.removeEventListener("focusin",arrive)},[$e]),i.useLayoutEffect(()=>{const e=Ae.current,t=document.activeElement;if(pe||!e||!(t instanceof HTMLElement)||!e.contains(t))return;const n=Xe.current;if(n?.isConnected&&!e.contains(n)&&!n.closest("[inert]")&&(n.focus({preventScroll:!0}),document.activeElement===n))return;const i=b(document).filter(t=>!e.contains(t)),o=i.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??i.at(-1);o?o.focus({preventScroll:!0}):t.blur()},[pe]),i.useEffect(()=>{if(void 0!==I)return;const e=Ae.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Ce(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Ce(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[I]);const _e=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;_e.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;Pe(!0);const finish=()=>{_e.current=null,Pe(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});_e.current=()=>{s(),finish()}}i.useEffect(()=>()=>_e.current?.(),[]);const Fe={width:Math.max(0,B),height:Math.max(ge.bar,H??ge.bar)};function resizeTo(e){Me(e),$?.(e)}const Ue=m(y,!0===M?["minimize","maximize","close"]:!1===M?[]:M),Ye=Ue.includes("maximize");i.useEffect(()=>{if(ve||null===je)return;const e=window.setTimeout(()=>Re(null),400);return()=>window.clearTimeout(e)},[ve,je]);const qe={minimize:ee??he.minimize,maximize:te??he.maximize,restore:ne??he.restore,close:ie??he.close},Ke=e(u,{os:y,metrics:ge,controls:Ue,maximized:ze,active:ke,labels:qe,onCommand:function command(e){"close"===e?be(!1):"minimize"===e?function rollUp(e){const t=Ae.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&Ie(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Le?.height??W)&&t)return Re(t.getBoundingClientRect().height),void requestAnimationFrame(()=>xe(!0));xe(e)}(!ve):ye(!ze)}}),Je=c(N)?e("span",{id:we,className:"min-w-0 truncate",children:N}):null,Qe=c(E)?e("span",{className:"flex shrink-0 items-center",children:E}):null,Ve=t("div",{className:a("relative flex shrink-0 items-center select-none",d,D&&!ze?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:ge.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:ge.weight,paddingInlineStart:ge.padX,paddingInlineEnd:ge.padEnd,gap:Math.round(.7*ge.title),fontSize:ge.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:fe.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!D||ze)return;const t={...Ne};beginGesture(e,(e,n)=>Ee({x:t.x+e,y:t.y+n}))},onDoubleClick:Ye?()=>ye(!ze):void 0,children:["start"===fe.controlsSide?Ke:null,"center"===fe.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:ge.controlsWidth(Ue.length)+2*ge.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*ge.title)},children:[Qe,Je]})}):t(n,{children:[Qe,Je]}),e("span",{className:"flex-1"}),c(L)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*ge.title)},onPointerDown:e=>e.stopPropagation(),children:L}):null,"end"===fe.controlsSide?Ke:null]}),Ze=ze?{left:0,top:0,width:"100%",height:"100%"}:{left:Ne.x,top:Ne.y,width:Le?.width??O,height:ve?Te??ge.bar:Le?.height??W??je??void 0},et=o({render:re,ref:Ge,props:{role:"group","aria-labelledby":Je?we:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",T>0?l:"",fe.glass&&0===T?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",se),"data-gesture":De?"":void 0,...p(!pe),style:{opacity:pe?void 0:0,...g({os:y,color:me,accent:k,transparency:T,active:ke,elevation:j}),position:"static"===R?"relative":R,...Ze,borderRadius:ze?0:`${ge.radius}px ${ge.radius}px ${ge.radiusBottom}px ${ge.radiusBottom}px`,borderStyle:"solid",borderWidth:ge.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...ae},children:t(n,{children:[Ve,e("div",{className:a("min-h-0 flex-1",Z?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:ge.band.side,marginBottom:ge.band.bottom,boxShadow:ge.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},...p(ve),children:le}),!P||ze||ve?null:v.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?oe??he.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=Ae.current;if(!n||ze)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:Ne.x,y:Ne.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:c,y:d}=o;r&&(n=Math.max(Fe.width,o.width+e)),l&&(i=Math.max(Fe.height,o.height+t)),s&&(n=Math.max(Fe.width,o.width-e),c=o.x+(o.width-n)),a&&(i=Math.max(Fe.height,o.height-t),d=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&Ee({x:c,y:d})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=Ae.current;if(!n)return;const i=n.getBoundingClientRect();resizeTo({width:Math.max(Fe.width,i.width+e),height:Math.max(Fe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ce}});return pe||Oe?et:null});
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as c,iconClasses as d}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as f,windowSlots as p}from"../../internal/window.js";import{useDefaults as g}from"../../internal/defaults.js";import{inertProps as w}from"../../internal/inert.js";import{focusablesIn as b}from"../../internal/focusable.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const v={ArrowRight:[1,0],ArrowLeft:[-1,0],ArrowDown:[0,1],ArrowUp:[0,-1]};function stepWithin({step:e,start:t,end:n,limit:i}){return e>0?Math.min(e,Math.max(0,i-n)):-Math.min(-e,Math.max(0,t))}const x=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(y,z){const{os:N="macos",title:M,icon:E,actions:L,controls:C=!0,size:S,color:k,accent:R=!1,transparency:D=0,active:I,elevation:T=2,position:W="static",draggable:j=!1,resizable:P=!1,width:A,height:B,minWidth:O=180,minHeight:$,offset:K,defaultOffset:_,onOffsetChange:F,onResize:G,open:H,defaultOpen:U=!0,onOpenChange:X,minimized:Y,defaultMinimized:q=!1,onMinimizedChange:J,maximized:Q,defaultMaximized:V=!1,onMaximizedChange:Z,scroll:ee=!0,minimizeLabel:te,maximizeLabel:ne,restoreLabel:ie,closeLabel:oe,resizeLabel:re,moveLabel:se,render:ae,className:le,style:ce,children:de,...ue}=y,me=g(),he=S??me.size??"md",fe=k??me.color??"primary",pe=s(),ge=h(N),we=f(N,he),be=i.useId(),[ve,xe]=useLatched(H,U,X),[ye,ze]=useLatched(Y,q,J),[Ne,Me]=useLatched(Q,V,Z),[Ee,Le]=useLatched(K,_??{x:0,y:0},F),[Ce,Se]=i.useState(null),[ke,Re]=i.useState(!0),De=I??ke,[Ie,Te]=i.useState(null),[We,je]=i.useState(!1),[Pe,Ae]=i.useState(!1),[Be,Oe]=i.useState(ve);Be!==ve&&(Oe(ve),Ae(!ve)),i.useEffect(()=>{if(!Pe)return;const e=window.setTimeout(()=>Ae(!1),260);return()=>window.clearTimeout(e)},[Pe]);const $e=i.useRef(null),Ke=i.useCallback(e=>{$e.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),_e=i.useRef(null),Fe=i.useRef(null),Ge=ve||Pe;i.useEffect(()=>{const e=$e.current;if(!Ge||!e)return;const arrive=t=>{const n=t.relatedTarget;n instanceof Node&&e.contains(n)||(Fe.current=n instanceof HTMLElement?n:null)};return e.addEventListener("focusin",arrive),()=>e.removeEventListener("focusin",arrive)},[Ge]),i.useLayoutEffect(()=>{const e=$e.current,t=document.activeElement;if(ve||!e||!(t instanceof HTMLElement)||!e.contains(t))return;const n=Fe.current;if(n?.isConnected&&!e.contains(n)&&!n.closest("[inert]")&&(n.focus({preventScroll:!0}),document.activeElement===n))return;const i=b(document).filter(t=>!e.contains(t)),o=i.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??i.at(-1);o?o.focus({preventScroll:!0}):t.blur()},[ve]),i.useEffect(()=>{if(void 0!==I)return;const e=$e.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Re(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Re(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[I]);const He=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;He.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;je(!0);const finish=()=>{He.current=null,je(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});He.current=()=>{s(),finish()}}i.useEffect(()=>()=>He.current?.(),[]);const Ue=we.bar+2*we.frame,Xe={width:Math.max(0,O),height:Math.max(Ue,$??Ue)};function resizeTo(e){Se(e),G?.(e)}const Ye=m(N,!0===C?["minimize","maximize","close"]:!1===C?[]:C),qe=Ye.includes("maximize");i.useEffect(()=>{if(ye||null===Ie)return;const e=window.setTimeout(()=>Te(null),400);return()=>window.clearTimeout(e)},[ye,Ie]);const Je={minimize:te??pe.minimize,maximize:ne??pe.maximize,restore:ie??pe.restore,close:oe??pe.close},Qe=e(u,{os:N,metrics:we,controls:Ye,maximized:Ne,active:De,labels:Je,onCommand:function command(e){"close"===e?xe(!1):"minimize"===e?function rollUp(e){const t=$e.current;if(e&&void 0===(Ce?.height??B)&&!Ne&&t)return Te(t.getBoundingClientRect().height),void requestAnimationFrame(()=>ze(!0));ze(e)}(!ye):Me(!Ne)}}),Ve=c(M)?e("span",{id:be,className:"min-w-0 truncate",children:M}):null,Ze=c(E)?e("span",{className:"flex shrink-0 items-center",children:E}):null,et=j&&!Ne,tt=Math.max(0,we.radius-we.frame),nt=ye?Math.max(0,we.radiusBottom-we.frame):0,it=et?e("span",{role:"button",tabIndex:0,"aria-label":se??pe.moveWindow,className:"pointer-events-none absolute inset-0 focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]",style:{borderRadius:`${tt}px ${tt}px ${nt}px ${nt}px`},onKeyDown:function step(e){const t=v[e.key],n=$e.current,i=_e.current;if(!t||!n||!i||e.altKey||e.ctrlKey||e.metaKey)return;e.preventDefault();const o=e.shiftKey?64:16,r=n.getBoundingClientRect(),s=i.getBoundingClientRect().bottom,a=document.documentElement,l=getComputedStyle(n),lag=(e,t)=>{const n=parseFloat(e);return Number.isNaN(n)?0:t-n},c=lag(l.left,Ee.x),d=lag(l.top,Ee.y),u=stepWithin({step:t[0]*o,start:r.left+c,end:r.right+c,limit:a.clientWidth}),m=stepWithin({step:t[1]*o,start:r.top+d,end:s+d,limit:a.clientHeight});0===u&&0===m||Le({x:Ee.x+u,y:Ee.y+m})}}):null,ot=t("div",{ref:_e,className:a("relative flex shrink-0 items-center select-none",d,et?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:we.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:we.weight,paddingInlineStart:we.padX,paddingInlineEnd:we.padEnd,gap:Math.round(.7*we.title),fontSize:we.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:ge.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!j||Ne)return;const t={...Ee};beginGesture(e,(e,n)=>Le({x:t.x+e,y:t.y+n}))},onDoubleClick:qe?()=>Me(!Ne):void 0,children:[it,"start"===ge.controlsSide?Qe:null,"center"===ge.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:we.controlsWidth(Ye.length)+2*we.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*we.title)},children:[Ze,Ve]})}):t(n,{children:[Ze,Ve]}),e("span",{className:"flex-1"}),c(L)?e("span",{className:"flex shrink-0 cursor-default items-center",style:{gap:Math.round(.5*we.title)},onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:L}):null,"end"===ge.controlsSide?Qe:null]}),rt=Ne?{left:0,top:0,width:"100%",height:ye?Ue:"100%"}:{left:Ee.x,top:Ee.y,width:Ce?.width??A,height:ye?Ue:Ce?.height??B??Ie??void 0},st=o({render:ae,ref:Ke,props:{role:"group","aria-labelledby":Ve?be:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",D>0?l:"",ge.glass&&0===D?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",le),"data-gesture":We?"":void 0,...w(!ve),style:{opacity:ve?void 0:0,...p({os:N,color:fe,accent:R,transparency:D,active:De,elevation:T}),position:"static"===W?"relative":W,...rt,borderRadius:Ne?0:`${we.radius}px ${we.radius}px ${we.radiusBottom}px ${we.radiusBottom}px`,borderStyle:"solid",borderWidth:we.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...ce},children:t(n,{children:[ot,e("div",{className:a("min-h-0 flex-1",ee?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:we.band.side,marginBottom:we.band.bottom,boxShadow:we.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},...w(ye),children:de}),!P||Ne||ye?null:x.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?re??pe.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=$e.current;if(!n||Ne)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:Ee.x,y:Ee.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:c,y:d}=o;r&&(n=Math.max(Xe.width,o.width+e)),l&&(i=Math.max(Xe.height,o.height+t)),s&&(n=Math.max(Xe.width,o.width-e),c=o.x+(o.width-n)),a&&(i=Math.max(Xe.height,o.height-t),d=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&Le({x:c,y:d})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=$e.current;if(!n)return;const i=n.getBoundingClientRect(),o=Math.max(Xe.width,i.width+e),r=Math.max(Xe.height,i.height+t);o===i.width&&r===i.height||resizeTo({width:o,height:r})}(t[0],t[1]))}:void 0},t.edge)})]}),...ue}});return ve||Pe?st:null});

package/dist/internal/animate.d.ts

@@ -171,31 +171,6 @@ export interface AnimationRun {
      */
     handlers: React.HTMLAttributes<HTMLElement>;
 }
-/**
- * Starts, restarts and holds an animation.
- *
- * Two things here are less obvious than they look.
- *
- * **Waiting is `animation-play-state: paused`, not a second class.** An element
- * that has not been triggered yet has to already look like its own first frame,
- * or a `visible` fade would be fully drawn until it scrolled into view and then
- * blink out to start. With `fill-mode: both` a paused animation shows exactly
- * that frame, so waiting and running are one animation in two states rather
- * than two states to keep in step.
- *
- * **Restarting reaches for the DOM.** There is no way to rewind a CSS animation
- * from React: re-rendering with the same class changes nothing, and a `key`
- * would restart the animation by unmounting the children, taking their state
- * with it. Clearing `animation-name`, reading a layout property to force the
- * style to settle, and putting it back is the one move that rewinds the element
- * and leaves everything inside it alone.
- *
- * **`visible` is measured rather than observed.** Two observers report and
- * neither decides: what they say is that the view has moved, and the answer is
- * then read off the element's own resting box. An `IntersectionObserver` sees
- * the element where its first frame is holding it, which for a slide is a
- * screen from where it lives, so the box it reports on is the wrong box.
- */
 export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite, nonce }: AnimationRunOptions): AnimationRun;
 export interface StaggerPosition extends Required<PlassAnimateStaggerProps> {
     index: number;

package/dist/internal/animate.js

@@ -1 +1 @@
-import*as e from"react";import{cx as t}from"./styles.js";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink",reveal:"plass-anim-reveal"};export const animBaseClass="plass-anim";export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,t){return"out"===e?t?"alternate-reverse":"reverse":t?"alternate":"normal"}export const defaultViewRange="entry 0% cover 45%";export function animationSlots(e){const t={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return e.easing&&(t["--p-anim-ease"]=e.easing),"view"===e.timeline&&(t["--p-anim-timeline"]="view()",t["--p-anim-range"]=e.range??defaultViewRange),void 0!==e.opacity&&(t["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(t["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(t["--p-anim-x"]=e.x),void 0!==e.y&&(t["--p-anim-y"]=e.y),void 0!==e.angle&&(t["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(t["--p-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(t["--p-anim-clip"]=e.clip),t}export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function slideOffsets(e,t){const n=lengthValue(t),r="number"==typeof t?-t+"px":`calc(-1 * ${n})`;switch(e){case"top":return{x:"0px",y:r};case"bottom":return{x:"0px",y:n};case"left":return{x:r,y:"0px"};default:return{x:n,y:"0px"}}}function viewportRect(){const e=document.documentElement;return new DOMRect(0,0,e.clientWidth,e.clientHeight)}function holds(e,t){return null!==e&&t instanceof Node&&e.contains(t)}export function useAnimationRun({trigger:t,play:n,once:r,threshold:i,paused:a,infinite:o,nonce:s}){const l=e.useRef(null),[c,u]=e.useState("mount"===t),[m,p]=e.useState(0),f=e.useCallback(()=>{u(!0),p(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=l.current;if(!e||0===m)return;const t=[e];for(const n of e.querySelectorAll(".plass-anim, .plass-marquee-track"))n.closest("[data-plass-animation]")===e&&t.push(n);for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[m]);const d=e.useRef("mount"!==t);e.useEffect(()=>{d.current=!c},[c]),e.useEffect(()=>{if("visible"!==t)return;const e=l.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const n=[],a=e.parentElement;let o=a?null:viewportRect();const check=()=>{if(!o)return;const t=function visibleShare(e,t){const n=e.width*e.height;if(n<=0)return 0;const r=Math.min(e.right,t.right)-Math.max(e.left,t.left),i=Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top);return Math.max(0,r)*Math.max(0,i)/n}(function restingRect(e,t){if(!t)return e.getBoundingClientRect();const n=e.style.animationName;e.style.animationName="none";const r=e.getBoundingClientRect();return e.style.animationName=n,r}(e,d.current),o);if(t>0&&t>=i){if(f(),r)for(const e of n)e.disconnect()}else r||u(!1)},s=function measureSteps(e){const t=Array.from({length:21},(e,t)=>t/20);return e>0&&e<1?[...t,e]:t}(i);if(a){const e=new IntersectionObserver(([e])=>{o=function clipRect(e){const t=e.boundingClientRect;return t.width*t.height>0?e.intersectionRect:e.rootBounds??viewportRect()}(e),check()},{threshold:s});n.push(e),e.observe(a)}const c=new IntersectionObserver(check,{threshold:s});return n.push(c),c.observe(e),()=>{for(const e of n)e.disconnect()}},[t,r,i,f]);const g=e.useRef(s);e.useEffect(()=>{Object.is(s,g.current)||(g.current=s,f())},[s,f]),e.useEffect(()=>{"manual"===t&&(n?f():u(!1))},[t,n,f]);const h="hover"===t?{onPointerEnter:f,onFocus:e=>{holds(l.current,e.relatedTarget)||f()},onPointerLeave:()=>{o&&u(!1)},onBlur:e=>{o&&!holds(l.current,e.relatedTarget)&&u(!1)}}:{};return{ref:e.useCallback(e=>{l.current=e},[]),state:c&&!a?"running":"paused",started:c,runs:m,handlers:h}}export function staggerSlots(e,{index:t,count:n,stagger:r,durationStep:i,reverse:a}){const o=a?n-1-t:t;return{...e,delay:e.delay+o*r,duration:Math.max(0,e.duration+o*i)}}export function animateChildren(n,r,i){const a=e.Children.toArray(n);return a.map((n,o)=>{const s=i(o,a.length);if(!e.isValidElement(n))return e.createElement("span",{key:o,className:r,style:s},n);const l=n.props;return e.cloneElement(n,{className:t(r,l.className),style:{...s,...l.style}})})}export function useAnimateElement(e){const{effect:t,trigger:n,play:r,once:i,threshold:a,paused:o,infinite:s,nonce:l,stagger:c=0,durationStep:u=0,reverse:m=!1,origin:p,children:f,...d}=e,g=useAnimationRun({trigger:"view"===d.timeline?"mount":n,play:r,once:i,threshold:a,paused:o,infinite:s,nonce:l}),h=t?`plass-anim ${animationClasses[t]}`:"",y=0!==c&&null!==t,v=void 0===p?null:{transformOrigin:p};return{ref:g.ref,className:y?"":h,style:{...v,...y?null:animationSlots(d),"--p-anim-state":g.state},props:{...g.handlers,"data-plass-animation":t??void 0,"data-state":g.state},children:y?animateChildren(f,h,(e,t)=>({...v,...animationSlots(staggerSlots(d,{index:e,count:t,stagger:c,durationStep:u,reverse:m}))})):f}}
+import*as e from"react";import{cx as t}from"./styles.js";export const animationClasses={fade:"plass-anim-fade",grow:"plass-anim-scale",slide:"plass-anim-slide",zoom:"plass-anim-scale",rotate:"plass-anim-rotate",blink:"plass-anim-blink",reveal:"plass-anim-reveal"};export const animBaseClass="plass-anim";export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,t){return"out"===e?t?"alternate-reverse":"reverse":t?"alternate":"normal"}export const defaultViewRange="entry 0% cover 45%";export function animationSlots(e){const t={"--p-anim-duration":`${e.duration}ms`,"--p-anim-delay":`${e.delay}ms`,"--p-anim-repeat":repeatValue(e.repeat),"--p-anim-direction":directionValue(e.mode??"in",e.alternate)};return isInfinite(e.repeat)&&(t["--p-anim-still-repeat"]="1"),e.easing&&(t["--p-anim-ease"]=e.easing),"view"===e.timeline&&(t["--p-anim-timeline"]="view()",t["--p-anim-range"]=e.range??defaultViewRange),void 0!==e.opacity&&(t["--p-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(t["--p-anim-scale"]=String(e.scale)),void 0!==e.x&&(t["--p-anim-x"]=e.x),void 0!==e.y&&(t["--p-anim-y"]=e.y),void 0!==e.angle&&(t["--p-anim-angle"]=e.angle),void 0!==e.angleTo&&(t["--p-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(t["--p-anim-clip"]=e.clip),t}export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}export function slideOffsets(e,t){const n=lengthValue(t),i="number"==typeof t?-t+"px":`calc(-1 * ${n})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:n};case"left":return{x:i,y:"0px"};default:return{x:n,y:"0px"}}}function viewportRect(){const e=document.documentElement;return new DOMRect(0,0,e.clientWidth,e.clientHeight)}function holds(e,t){return null!==e&&t instanceof Node&&e.contains(t)}const n="data-plass-rewind";export function useAnimationRun({trigger:t,play:i,once:r,threshold:a,paused:o,infinite:s,nonce:l}){const c=e.useRef(null),[u,p]=e.useState("mount"===t),[m,f]=e.useState(0),d=e.useCallback(()=>{p(!0),f(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=c.current;if(!e||0===m)return;const t=[e];for(const n of e.querySelectorAll(".plass-anim, .plass-marquee-track"))n.closest("[data-plass-animation]")===e&&t.push(n);e.setAttribute(n,"");for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName="";e.removeAttribute(n)},[m]);const g=e.useRef("mount"!==t);e.useEffect(()=>{g.current=!u},[u]),e.useEffect(()=>{if("visible"!==t)return;const e=c.current;if(!e||"undefined"==typeof IntersectionObserver)return void p(!0);const n=[],i=e.parentElement;let o=i?null:viewportRect();const check=()=>{if(!o)return;const t=function visibleShare(e,t){const n=e.width*e.height;if(n<=0)return 0;const i=Math.min(e.right,t.right)-Math.max(e.left,t.left),r=Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top);return Math.max(0,i)*Math.max(0,r)/n}(function restingRect(e,t){if(!t)return e.getBoundingClientRect();const n=e.style.animationName;e.style.animationName="none";const i=e.getBoundingClientRect();return e.style.animationName=n,i}(e,g.current),o);if(t>0&&t>=a){if(d(),r)for(const e of n)e.disconnect()}else r||p(!1)},s=function measureSteps(e){const t=Array.from({length:21},(e,t)=>t/20);return e>0&&e<1?[...t,e]:t}(a);if(i){const e=new IntersectionObserver(([e])=>{o=function clipRect(e){const t=e.boundingClientRect;return t.width*t.height>0?e.intersectionRect:e.rootBounds??viewportRect()}(e),check()},{threshold:s});n.push(e),e.observe(i)}const l=new IntersectionObserver(check,{threshold:s});return n.push(l),l.observe(e),()=>{for(const e of n)e.disconnect()}},[t,r,a,d]);const h=e.useRef(l);e.useEffect(()=>{Object.is(l,h.current)||(h.current=l,d())},[l,d]),e.useEffect(()=>{"manual"===t&&(i?d():p(!1))},[t,i,d]);const y="hover"===t?{onPointerEnter:d,onFocus:e=>{holds(c.current,e.relatedTarget)||d()},onPointerLeave:()=>{s&&p(!1)},onBlur:e=>{s&&!holds(c.current,e.relatedTarget)&&p(!1)}}:{};return{ref:e.useCallback(e=>{c.current=e},[]),state:u&&!o?"running":"paused",started:u,runs:m,handlers:y}}export function staggerSlots(e,{index:t,count:n,stagger:i,durationStep:r,reverse:a}){const o=a?n-1-t:t;return{...e,delay:e.delay+o*i,duration:Math.max(0,e.duration+o*r)}}export function animateChildren(n,i,r){const a=e.Children.toArray(n);return a.map((n,o)=>{const s=r(o,a.length);if(!e.isValidElement(n))return e.createElement("span",{key:o,className:i,style:s},n);const l=n.props;return e.cloneElement(n,{className:t(i,l.className),style:{...s,...l.style}})})}export function useAnimateElement(e){const{effect:t,trigger:n,play:i,once:r,threshold:a,paused:o,infinite:s,nonce:l,stagger:c=0,durationStep:u=0,reverse:p=!1,origin:m,children:f,...d}=e,g=useAnimationRun({trigger:"view"===d.timeline?"mount":n,play:i,once:r,threshold:a,paused:o,infinite:s,nonce:l}),h=t?`plass-anim ${animationClasses[t]}`:"",y=0!==c&&null!==t,v=void 0===m?null:{transformOrigin:m};return{ref:g.ref,className:y?"":h,style:{...v,...y?null:animationSlots(d),"--p-anim-state":g.state},props:{...g.handlers,"data-plass-animation":t??void 0,"data-state":g.state},children:y?animateChildren(f,h,(e,t)=>({...v,...animationSlots(staggerSlots(d,{index:e,count:t,stagger:c,durationStep:u,reverse:p}))})):f}}

package/dist/internal/bottom-bar.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/**
+ * The room a `fixed` bottom bar takes, published for the page to reserve.
+ *
+ * `PlBottomNavigation` and `PlFloatingBottomNavigation` are held against the
+ * bottom of the window and out of the flow, so the end of the page is always
+ * under them, and so is a link a reader tabs to down there. The page is the
+ * only thing that can make room — the bar cannot pad something it is not
+ * inside — and it can only make exactly the right amount if it is told how
+ * much. That depends on the size, the density, which names are drawn and the
+ * home indicator, so it is measured rather than declared, and written onto the
+ * root element where every rule on the page can read it.
+ *
+ * Written straight to the DOM rather than through state, for the reason
+ * `PlPageLayout` gives for its own measurements: nothing in the tree reads the
+ * number except CSS declarations, and a `setState` would re-render on every
+ * resize to change nothing.
+ */
+/** The token the height is published as. Declared as `0px` in `styles.css`. */
+export declare const bottomBarToken = "--plass-bottom-navigation-height";
+/**
+ * Publishes the element's height while `active`, which is while the bar is
+ * `fixed`. A `sticky` or `static` bar is in the flow and covers nothing at the
+ * end of the page, so it takes nothing.
+ *
+ * In a layout effect so the room is there on the frame the bar first paints,
+ * rather than one frame after it has covered something.
+ */
+export declare function useBottomBarHeight(node: React.RefObject<HTMLElement | null>, active: boolean): void;

package/dist/internal/bottom-bar.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export const bottomBarToken="--plass-bottom-navigation-height";const t=new Set;let o=null;function publish(){const e=document.documentElement;if(0===t.size)return void e.style.removeProperty(bottomBarToken);let o=0;for(const e of t)o=Math.max(o,e.getBoundingClientRect().height);e.style.setProperty(bottomBarToken,`${o}px`)}export function useBottomBarHeight(n,r){e.useLayoutEffect(()=>{const e=n.current;if(r&&e)return t.add(e),"undefined"!=typeof ResizeObserver&&(o??=new ResizeObserver(publish),o.observe(e,{box:"border-box"})),publish(),()=>{t.delete(e),o?.unobserve(e),0===t.size&&(o?.disconnect(),o=null),publish()}},[r,n])}

package/dist/internal/calendar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{defaultLabels as t,useLabels as n}from"./labels.js";import{PlButton as l}from"../components/button/PlButton.js";import{ChevronIcon as s}from"./icons.js";import{dateFormatter as a}from"./format.js";import{addDays as i,addMonths as c,addYears as d,calendarWeeks as u,compareDay as m,isDayOutside as h,isMonthBeforeYear as p,isMonthOutside as g,isSameDay as f,isSameMonth as b,isValidDate as v,isYearOutside as y,makeDate as x,meridiemLabels as w,monthLabels as D,startOfDay as N,startOfMonth as S,today as k,weekdayLabels as C,withTime as M,YEAR_PAGE_SIZE as P,yearPageStart as z}from"./date.js";import{controlHeightClasses as A,controlTextClasses as $,cx as Y,forcedFillClasses as j,gapClasses as B,metaTextClasses as E,srOnlyClasses as F,transitionClasses as I}from"./styles.js";export const defaultPickerLabels=t;export function usePickerLabels(e){const r=n();return o.useMemo(()=>e?{...r,...e}:r,[r,e])}const H={year:0,month:1,day:2},T={xs:"1.5rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},R={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-xs)",md:"rounded-(--plass-radius-sm)",lg:"rounded-(--plass-radius-md)",xl:"rounded-(--plass-radius-lg)"},K={xs:"rounded-s-(--plass-radius-xs)",sm:"rounded-s-(--plass-radius-xs)",md:"rounded-s-(--plass-radius-sm)",lg:"rounded-s-(--plass-radius-md)",xl:"rounded-s-(--plass-radius-lg)"},O={xs:"rounded-e-(--plass-radius-xs)",sm:"rounded-e-(--plass-radius-xs)",md:"rounded-e-(--plass-radius-sm)",lg:"rounded-e-(--plass-radius-md)",xl:"rounded-e-(--plass-radius-lg)"},G=/* @__PURE__ */["relative flex items-center justify-center tabular-nums select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",I,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:o,label:t,selected:n,inRange:l=!1,rangeEdge:s=null,current:a=!1,muted:i=!1,disabled:c=!1,focused:d=!1,size:u,className:m,onClick:h,onPointerEnter:p,onKeyDown:g}){return r("button",{type:"button",role:"gridcell","aria-label":t,"aria-selected":n,"aria-current":a?"date":void 0,"aria-disabled":c||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:Y(G,"start"===s?K[u]:"end"===s?O[u]:"middle"===s?"rounded-none":R[u],c?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":n?`cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95 ${j}`:l?"cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press) forced-colors:border-y forced-colors:[border-color:Highlight]":a?"cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":i?"cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)",m),onClick:()=>{c||h()},onPointerEnter:p,onKeyDown:g,children:[o,a?e("span",{"aria-hidden":"true",className:Y("absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current",n?"forced-colors:[background-color:HighlightText]":"forced-colors:[background-color:CanvasText]")}):null]})}function headingIds(e,r,o){return"year"===r?`${e}-range`:"month"===r?`${e}-year`:p(o)?`${e}-month ${e}-year`:`${e}-year ${e}-month`}function Header({size:t,color:n,view:a,precision:i,month:c,locale:d,labels:u,showPreviousButton:m,showNextButton:h,onStep:g,onViewChange:f,id:b}){const v=D(d,"long")[c.getMonth()],y=String(c.getFullYear()),x=p(d),w="day"===a?[u.previousMonth,u.nextMonth]:"month"===a?[u.previousYear,u.nextYear]:[u.previousYears,u.nextYears],stepper=(r,o)=>o?e(l,{variant:"ghost",size:t,color:n,density:"compact","aria-label":w[-1===r?0:1],onClick:()=>g(r),startIcon:e("span",{className:Y("flex items-center",-1===r?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(s,{})})}):e("span",{"aria-hidden":"true",className:Y(A[t],"w-(--p-cell)")}),disclosure=r=>e("span",{className:Y("flex items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",r&&"rotate-180"),children:e(s,{})}),N=e(l,{id:`${b}-month`,variant:"ghost",size:t,color:n,density:"compact","aria-describedby":`${b}-month-hint`,"aria-expanded":"month"===a,onClick:()=>f("month"===a?i:"month"),endIcon:disclosure("month"===a),children:v},"month"),S=e(l,{id:`${b}-year`,variant:"ghost",size:t,color:n,density:"compact",className:"tabular-nums","aria-describedby":`${b}-year-hint`,"aria-expanded":"year"===a,onClick:()=>f("year"===a?i:"year"),endIcon:disclosure("year"===a),children:y},"year"),k=z(c.getFullYear());return r("div",{className:"flex items-center justify-between gap-1",children:[stepper(-1,m),e("div",{className:Y("flex min-w-0 flex-1 items-center justify-center",B[t]),children:"year"===a?e("span",{id:`${b}-range`,className:Y("flex items-center font-semibold tabular-nums text-(--plass-fg)",A[t],$[t]),children:`${k}–${k+P-1}`}):"month"===a?S:r(o.Fragment,x?{children:[N,S]}:{children:[S,N]})}),stepper(1,h),e("span",{id:`${b}-month-hint`,hidden:!0,children:u.chooseMonth}),e("span",{id:`${b}-year-hint`,hidden:!0,children:u.chooseYear})]})}export function Calendar({size:t,color:n,locale:l,weekStartsOn:s,month:a,onMonthChange:i,precision:u="day",selected:m,rangeStart:p=null,rangeEnd:g=null,onSelect:f,onPreviewChange:y,minDate:w,maxDate:D,shouldDisableDate:C,showOutsideDays:M=!0,autoFocus:z=!1,showPreviousButton:A=!0,showNextButton:$=!0,labels:j,className:E}){const F=o.useId(),[I,R]=o.useState(u),K=H[I]>H[u]?u:I,O=o.useMemo(()=>m.filter(v),[m]),[G,L]=o.useState(()=>{const e=O.find(e=>b(e,a));return e?N(e):b(k(),a)?k():S(a)}),U=o.useRef(z),q=o.useRef(null);o.useEffect(()=>{L(e=>b(e,a)?e:S(a))},[a]),o.useLayoutEffect(()=>{U.current&&(U.current=!1,q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const _=o.useCallback(e=>h(e,w,D)||(C?.(e)??!1),[w,D,C]),changeView=e=>{U.current=!0,R(e)},moveCursor=e=>{U.current=!0,i(e)};return r("div",{ref:q,className:Y("flex flex-col",B[t],E),style:{"--p-cell":T[t]},onPointerLeave:()=>y?.(null),children:[e(Header,{size:t,color:n,view:K,precision:u,month:a,locale:l,labels:j,showPreviousButton:A,showNextButton:$,onStep:e=>{i("day"===K?c(a,e):d(a,"month"===K?e:e*P))},onViewChange:changeView,id:F}),e("div",{className:"h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]",children:"day"===K?e(DayGrid,{labelledBy:headingIds(F,K,l),size:t,locale:l,weekStartsOn:s,month:a,chosen:O,rangeStart:p,rangeEnd:g,focusedDate:G,showOutsideDays:M,isDisabled:_,onSelect:e=>{L(e),f(e)},onPreviewChange:y,onMoveFocus:e=>{U.current=!0,L(e),b(e,a)||i(S(e))}}):"month"===K?e(MonthGrid,{labelledBy:headingIds(F,K,l),size:t,locale:l,month:a,chosen:O,minDate:w,maxDate:D,onMoveCursor:moveCursor,onPick:e=>{const r=x(a.getFullYear(),e,1);i(r),"month"===u?f(r):changeView("day")}}):e(YearGrid,{labelledBy:headingIds(F,K,l),size:t,month:a,chosen:O,minDate:w,maxDate:D,onMoveCursor:moveCursor,onPick:e=>{const r=x(e,"year"===u?0:a.getMonth(),1);i(r),"year"===u?f(r):changeView("month")}})})]})}function DayGrid({labelledBy:o,size:t,locale:n,weekStartsOn:l,month:s,chosen:d,rangeStart:h,rangeEnd:p,focusedDate:g,showOutsideDays:y,isDisabled:x,onSelect:w,onPreviewChange:D,onMoveFocus:N}){const S=u(s,l),M=C(n,l,"short"),P=C(n,l,"long"),z=a(n,{dateStyle:"full"}),A=function orderedRange(e,r){return v(e)&&v(r)?m(e,r)<=0?[e,r]:[r,e]:null}(h,p),j=k();return r("div",{role:"grid","aria-labelledby":o,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:M.map((r,o)=>e("span",{role:"columnheader","aria-label":P[o],className:Y("flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none",E[t]),children:r},o))}),S.map((r,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:r.map(r=>{const o=!b(r,s);if(o&&!y)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--p-cell)"},r.getTime());const n=d.some(e=>f(e,r)),a=null!==A&&m(r,A[0])>=0&&m(r,A[1])<=0,u=null!==A&&a&&f(r,A[0]),h=null!==A&&a&&f(r,A[1]);return e(Cell,{size:t,label:z.format(r),selected:n,inRange:a&&!n,rangeEdge:a?u&&h?"both":u?"start":h?"end":"middle":null,current:f(r,j)&&!n,muted:o,disabled:x(r),focused:f(r,g),className:Y("size-(--p-cell)",$[t]),onClick:()=>w(r),onPointerEnter:()=>D?.(r),onKeyDown:e=>((e,r)=>{const o=(r.getDay()-l+7)%7,t={ArrowLeft:()=>i(r,-1),ArrowRight:()=>i(r,1),ArrowUp:()=>i(r,-7),ArrowDown:()=>i(r,7),Home:()=>i(r,-o),End:()=>i(r,6-o),PageUp:()=>c(r,e.shiftKey?-12:-1),PageDown:()=>c(r,e.shiftKey?12:1)}[e.key];t&&(e.preventDefault(),N(t()))})(e,r),children:r.getDate()},r.getTime())})},o))]})}function MonthGrid({labelledBy:r,size:o,locale:t,month:n,chosen:l,minDate:s,maxDate:a,onMoveCursor:i,onPick:d}){const u=D(t,"short"),m=D(t,"long"),h=n.getFullYear(),p=new Date,onKeyDown=e=>{const r={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==r&&(e.preventDefault(),i(c(S(n),r)))};return e("div",{role:"grid","aria-labelledby":r,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(r=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(t=>{const i=3*r+t;return e(Cell,{size:o,label:`${m[i]} ${h}`,selected:l.some(e=>e.getFullYear()===h&&e.getMonth()===i),current:p.getFullYear()===h&&p.getMonth()===i,disabled:g(x(h,i,1),s,a),focused:i===n.getMonth(),className:Y("h-(--p-cell) w-full",$[o]),onClick:()=>d(i),onKeyDown,children:u[i]},i)})},r))})}function YearGrid({labelledBy:r,size:o,month:t,chosen:n,minDate:l,maxDate:s,onMoveCursor:a,onPick:i}){const c=z(t.getFullYear()),u=(new Date).getFullYear(),onKeyDown=e=>{const r={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-P,PageDown:P}[e.key];void 0!==r&&(e.preventDefault(),a(d(S(t),r)))};return e("div",{role:"grid","aria-labelledby":r,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(r=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(a=>{const d=c+4*r+a;return e(Cell,{size:o,label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===u,disabled:y(x(d,0,1),l,s),focused:d===t.getFullYear(),className:Y("h-(--p-cell) w-full",$[o]),onClick:()=>i(d),onKeyDown,children:d},d)})},r))})}function revealInColumn(e){const r=e.parentElement;if(!r)return;const o=e.getBoundingClientRect(),t=r.getBoundingClientRect(),n=o.top-t.top-r.clientTop+r.scrollTop,l=n+o.height;n<r.scrollTop?r.scrollTop=n:l>r.scrollTop+r.clientHeight&&(r.scrollTop=l-r.clientHeight)}export function TimeGrid({size:t,density:n,locale:l,value:s,referenceDate:i,onChange:c,hour12:d,showSeconds:u,hourStep:m,minuteStep:h,secondStep:p,shouldDisableTime:g,autoFocus:f=!1,labels:b,className:v}){const y=s??i,x=o.useRef(null),[D,N]=o.useMemo(()=>w(l),[l]);o.useEffect(()=>{const e=x.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn),f){const r=e?.querySelector('[role="listbox"]');(r?.querySelector('[data-chosen="true"]')??r?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[f]);const S=o.useMemo(()=>{const e=Math.ceil((d?12:24)/m),r=Array.from({length:e},(e,r)=>r*m);return d?r.map(e=>0===e?12:e):r},[d,m]),k=o.useMemo(()=>Array.from({length:Math.ceil(60/h)},(e,r)=>r*h),[h]),C=o.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,r)=>r*p),[p]),candidate=(e,r)=>M(y,"hour"===e?{hours:d?r%12+(y.getHours()>=12?12:0):r}:"minute"===e?{minutes:r}:"second"===e?{seconds:r}:{hours:y.getHours()%12+12*r}),pad=e=>String(e).padStart(2,"0"),P=d?y.getHours()%12||12:y.getHours(),column=(r,o,n,l,a)=>{const i=n.map(e=>g?.(candidate(r,e),r)??!1),d=null===s?-1:n.findIndex(l),u=d>=0?d:Math.max(0,i.indexOf(!1)),nearest=(e,r)=>{for(let o=e;o>=0&&o<n.length;o+=r)if(!i[o])return o;return-1};return e("div",{role:"listbox","aria-label":o,onKeyDown:e=>{const o=[...e.currentTarget.querySelectorAll('[role="option"]')],t=o.indexOf(e.target);if(t<0)return;const l="ArrowDown"===e.key?nearest(t+1,1):"ArrowUp"===e.key?nearest(t-1,-1):"Home"===e.key?nearest(0,1):"End"===e.key?nearest(n.length-1,-1):null;null!==l&&(e.preventDefault(),l<0||l===t||(c(candidate(r,n[l])),o[l].focus({preventScroll:!0}),revealInColumn(o[l])))},className:Y("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"),children:n.map((o,n)=>{const d=candidate(r,o),m=null!==s&&l(o),h=i[n];return e("button",{type:"button",role:"option",tabIndex:n===u?0:-1,"aria-selected":m,"aria-disabled":h||void 0,"data-chosen":m?"true":void 0,className:Y(G,R[t],A[t],$[t],"w-full shrink-0",h?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":m?`cursor-pointer font-semibold text-(--p-on-solid) [background-image:var(--p-fill)] hover:brightness-105 active:brightness-95 ${j}`:"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)"),onClick:()=>{h||c(d)},children:a(o)},o)})},r)};return r("div",{ref:x,className:Y("flex","compact"===n?"gap-0.5":"gap-1",v),style:{"--p-cell":T[t]},children:[column("hour",b.hour,S,e=>e===P,e=>d?String(e):pad(e)),column("minute",b.minute,k,e=>e===y.getMinutes(),pad),u?column("second",b.second,C,e=>e===y.getSeconds(),pad):null,d?column("meridiem",b.meridiem,[0,1],e=>(y.getHours()>=12?1:0)===e,e=>0===e?D:N):null,e("span",{className:F,"aria-live":"polite",children:null===s?"":a(l,{hour:"numeric",minute:"2-digit",...u?{second:"2-digit"}:{}}).format(s)})]})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{defaultLabels as t,useLabels as n}from"./labels.js";import{PlButton as l}from"../components/button/PlButton.js";import{ChevronIcon as s}from"./icons.js";import{dateFormatter as a}from"./format.js";import{addDays as i,addMonths as c,addYears as d,calendarWeeks as u,compareDay as m,isDayOutside as h,isMonthBeforeYear as p,isMonthOutside as g,isSameDay as f,isSameMonth as b,isValidDate as v,isYearOutside as y,makeDate as x,meridiemLabels as w,monthLabels as D,startOfDay as N,startOfMonth as S,today as C,weekdayLabels as k,withTime as M,YEAR_PAGE_SIZE as P,yearPageStart as z}from"./date.js";import{controlHeightClasses as A,controlTextClasses as $,cx as Y,forcedFillClasses as j,gapClasses as B,metaTextClasses as E,srOnlyClasses as F,transitionClasses as I}from"./styles.js";export const defaultPickerLabels=t;export function usePickerLabels(e){const r=n();return o.useMemo(()=>e?{...r,...e}:r,[r,e])}const H={year:0,month:1,day:2},T={xs:"1.5rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},R={xs:"rounded-(--plass-radius-xs)",sm:"rounded-(--plass-radius-xs)",md:"rounded-(--plass-radius-sm)",lg:"rounded-(--plass-radius-md)",xl:"rounded-(--plass-radius-lg)"},K={xs:"rounded-s-(--plass-radius-xs)",sm:"rounded-s-(--plass-radius-xs)",md:"rounded-s-(--plass-radius-sm)",lg:"rounded-s-(--plass-radius-md)",xl:"rounded-s-(--plass-radius-lg)"},O={xs:"rounded-e-(--plass-radius-xs)",sm:"rounded-e-(--plass-radius-xs)",md:"rounded-e-(--plass-radius-sm)",lg:"rounded-e-(--plass-radius-md)",xl:"rounded-e-(--plass-radius-lg)"},G=/* @__PURE__ */["relative flex items-center justify-center tabular-nums select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill",I,"focus-visible:z-10 focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:-2px]"].join(" ");function Cell({children:o,label:t,selected:n,inRange:l=!1,rangeEdge:s=null,current:a=!1,muted:i=!1,disabled:c=!1,focused:d=!1,size:u,className:m,onClick:h,onPointerEnter:p,onKeyDown:g}){return r("button",{type:"button",role:"gridcell","aria-label":t,"aria-selected":n,"aria-current":a?"date":void 0,"aria-disabled":c||void 0,tabIndex:d?0:-1,"data-focus-target":d?"true":void 0,className:Y(G,"start"===s?K[u]:"end"===s?O[u]:"middle"===s?"rounded-none":R[u],c?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":n?`cursor-pointer font-semibold text-(--p-on-solid) [--p-fill-on:1] hover:brightness-105 active:brightness-95 ${j}`:l?"cursor-pointer bg-(--p-soft) text-(--plass-fg) hover:bg-(--p-soft-hover) active:bg-(--p-soft-press) forced-colors:border-y forced-colors:[border-color:Highlight]":a?"cursor-pointer font-semibold text-(--p-accent) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":i?"cursor-pointer text-(--plass-muted-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)",m),onClick:()=>{c||h()},onPointerEnter:p,onKeyDown:g,children:[o,a?e("span",{"aria-hidden":"true",className:Y("absolute bottom-[0.18em] size-[0.22em] rounded-full bg-current",n?"forced-colors:[background-color:HighlightText]":"forced-colors:[background-color:CanvasText]")}):null]})}function headingIds(e,r,o){return"year"===r?`${e}-range`:"month"===r?`${e}-year`:p(o)?`${e}-month ${e}-year`:`${e}-year ${e}-month`}function Header({size:t,color:n,view:a,precision:i,month:c,locale:d,labels:u,showPreviousButton:m,showNextButton:h,onStep:g,onViewChange:f,id:b}){const v=D(d,"long")[c.getMonth()],y=String(c.getFullYear()),x=p(d),w="day"===a?[u.previousMonth,u.nextMonth]:"month"===a?[u.previousYear,u.nextYear]:[u.previousYears,u.nextYears],stepper=(r,o)=>o?e(l,{variant:"ghost",size:t,color:n,density:"compact","aria-label":w[-1===r?0:1],onClick:()=>g(r),startIcon:e("span",{className:Y("flex items-center",-1===r?"rotate-90 rtl:-rotate-90":"-rotate-90 rtl:rotate-90"),children:e(s,{})})}):e("span",{"aria-hidden":"true",className:Y(A[t],"w-(--p-cell)")}),disclosure=r=>e("span",{className:Y("flex items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",r&&"rotate-180"),children:e(s,{})}),N=e(l,{id:`${b}-month`,variant:"ghost",size:t,color:n,density:"compact","aria-describedby":`${b}-month-hint`,"aria-expanded":"month"===a,onClick:()=>f("month"===a?i:"month"),endIcon:disclosure("month"===a),children:v},"month"),S=e(l,{id:`${b}-year`,variant:"ghost",size:t,color:n,density:"compact",className:"tabular-nums","aria-describedby":`${b}-year-hint`,"aria-expanded":"year"===a,onClick:()=>f("year"===a?i:"year"),endIcon:disclosure("year"===a),children:y},"year"),C=z(c.getFullYear());return r("div",{className:"flex items-center justify-between gap-1",children:[stepper(-1,m),e("div",{className:Y("flex min-w-0 flex-1 items-center justify-center",B[t]),children:"year"===a?e("span",{id:`${b}-range`,className:Y("flex items-center font-semibold tabular-nums text-(--plass-fg)",A[t],$[t]),children:`${C}–${C+P-1}`}):"month"===a?S:r(o.Fragment,x?{children:[N,S]}:{children:[S,N]})}),stepper(1,h),e("span",{id:`${b}-month-hint`,hidden:!0,children:u.chooseMonth}),e("span",{id:`${b}-year-hint`,hidden:!0,children:u.chooseYear})]})}export function Calendar({size:t,color:n,locale:l,weekStartsOn:s,month:a,onMonthChange:i,precision:u="day",selected:m,rangeStart:p=null,rangeEnd:g=null,onSelect:f,onPreviewChange:y,minDate:w,maxDate:D,shouldDisableDate:k,showOutsideDays:M=!0,autoFocus:z=!1,showPreviousButton:A=!0,showNextButton:$=!0,labels:j,className:E}){const F=o.useId(),[I,R]=o.useState(u),K=H[I]>H[u]?u:I,O=o.useMemo(()=>m.filter(v),[m]),[G,L]=o.useState(()=>{const e=O.find(e=>b(e,a));return e?N(e):b(C(),a)?C():S(a)}),U=o.useRef(z),q=o.useRef(null);o.useEffect(()=>{L(e=>b(e,a)?e:S(a))},[a]),o.useLayoutEffect(()=>{U.current&&(U.current=!1,q.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const _=o.useCallback(e=>h(e,w,D)||(k?.(e)??!1),[w,D,k]),changeView=e=>{U.current=!0,R(e)},moveCursor=e=>{U.current=!0,i(e)};return r("div",{ref:q,className:Y("flex flex-col",B[t],E),style:{"--p-cell":T[t]},onPointerLeave:()=>y?.(null),children:[e(Header,{size:t,color:n,view:K,precision:u,month:a,locale:l,labels:j,showPreviousButton:A,showNextButton:$,onStep:e=>{i("day"===K?c(a,e):d(a,"month"===K?e:e*P))},onViewChange:changeView,id:F}),e("div",{className:"h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*7)]",children:"day"===K?e(DayGrid,{labelledBy:headingIds(F,K,l),size:t,locale:l,weekStartsOn:s,month:a,chosen:O,rangeStart:p,rangeEnd:g,focusedDate:G,showOutsideDays:M,isDisabled:_,onSelect:e=>{L(e),f(e)},onPreviewChange:y,onMoveFocus:e=>{U.current=!0,L(e),b(e,a)||i(S(e))}}):"month"===K?e(MonthGrid,{labelledBy:headingIds(F,K,l),size:t,locale:l,month:a,chosen:O,minDate:w,maxDate:D,onMoveCursor:moveCursor,onPick:e=>{const r=x(a.getFullYear(),e,1);i(r),"month"===u?f(r):changeView("day")}}):e(YearGrid,{labelledBy:headingIds(F,K,l),size:t,month:a,chosen:O,minDate:w,maxDate:D,onMoveCursor:moveCursor,onPick:e=>{const r=x(e,"year"===u?0:a.getMonth(),1);i(r),"year"===u?f(r):changeView("month")}})})]})}function DayGrid({labelledBy:o,size:t,locale:n,weekStartsOn:l,month:s,chosen:d,rangeStart:h,rangeEnd:p,focusedDate:g,showOutsideDays:y,isDisabled:x,onSelect:w,onPreviewChange:D,onMoveFocus:N}){const S=u(s,l),M=k(n,l,"short"),P=k(n,l,"long"),z=a(n,{dateStyle:"full"}),A=function orderedRange(e,r){return v(e)&&v(r)?m(e,r)<=0?[e,r]:[r,e]:null}(h,p),j=C();return r("div",{role:"grid","aria-labelledby":o,className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:M.map((r,o)=>e("span",{role:"columnheader","aria-label":P[o],className:Y("flex h-(--p-cell) items-center justify-center font-semibold text-(--plass-muted-fg) select-none",E[t]),children:r},o))}),S.map((r,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:r.map(r=>{const o=!b(r,s);if(o&&!y)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--p-cell)"},r.getTime());const n=d.some(e=>f(e,r)),a=null!==A&&m(r,A[0])>=0&&m(r,A[1])<=0,u=null!==A&&a&&f(r,A[0]),h=null!==A&&a&&f(r,A[1]);return e(Cell,{size:t,label:z.format(r),selected:n,inRange:a&&!n,rangeEdge:a?u&&h?"both":u?"start":h?"end":"middle":null,current:f(r,j)&&!n,muted:o,disabled:x(r),focused:f(r,g),className:Y("size-(--p-cell)",$[t]),onClick:()=>w(r),onPointerEnter:()=>D?.(r),onKeyDown:e=>((e,r)=>{const o=(r.getDay()-l+7)%7,t={ArrowLeft:()=>i(r,-1),ArrowRight:()=>i(r,1),ArrowUp:()=>i(r,-7),ArrowDown:()=>i(r,7),Home:()=>i(r,-o),End:()=>i(r,6-o),PageUp:()=>c(r,e.shiftKey?-12:-1),PageDown:()=>c(r,e.shiftKey?12:1)}[e.key];t&&(e.preventDefault(),N(t()))})(e,r),children:r.getDate()},r.getTime())})},o))]})}function MonthGrid({labelledBy:r,size:o,locale:t,month:n,chosen:l,minDate:s,maxDate:a,onMoveCursor:i,onPick:d}){const u=D(t,"short"),m=D(t,"long"),h=n.getFullYear(),p=new Date,onKeyDown=e=>{const r={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==r&&(e.preventDefault(),i(c(S(n),r)))};return e("div",{role:"grid","aria-labelledby":r,className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(r=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(t=>{const i=3*r+t;return e(Cell,{size:o,label:`${m[i]} ${h}`,selected:l.some(e=>e.getFullYear()===h&&e.getMonth()===i),current:p.getFullYear()===h&&p.getMonth()===i,disabled:g(x(h,i,1),s,a),focused:i===n.getMonth(),className:Y("h-(--p-cell) w-full",$[o]),onClick:()=>d(i),onKeyDown,children:u[i]},i)})},r))})}function YearGrid({labelledBy:r,size:o,month:t,chosen:n,minDate:l,maxDate:s,onMoveCursor:a,onPick:i}){const c=z(t.getFullYear()),u=(new Date).getFullYear(),onKeyDown=e=>{const r={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-P,PageDown:P}[e.key];void 0!==r&&(e.preventDefault(),a(d(S(t),r)))};return e("div",{role:"grid","aria-labelledby":r,className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(r=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(a=>{const d=c+4*r+a;return e(Cell,{size:o,label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===u,disabled:y(x(d,0,1),l,s),focused:d===t.getFullYear(),className:Y("h-(--p-cell) w-full",$[o]),onClick:()=>i(d),onKeyDown,children:d},d)})},r))})}function revealInColumn(e){const r=e.parentElement;if(!r)return;const o=e.getBoundingClientRect(),t=r.getBoundingClientRect(),n=o.top-t.top-r.clientTop+r.scrollTop,l=n+o.height;n<r.scrollTop?r.scrollTop=n:l>r.scrollTop+r.clientHeight&&(r.scrollTop=l-r.clientHeight)}export function TimeGrid({size:t,density:n,locale:l,value:s,referenceDate:i,onChange:c,hour12:d,showSeconds:u,hourStep:m,minuteStep:h,secondStep:p,shouldDisableTime:g,autoFocus:f=!1,labels:b,className:v}){const y=s??i,x=o.useRef(null),[D,N]=o.useMemo(()=>w(l),[l]);o.useEffect(()=>{const e=x.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(revealInColumn),f){const r=e?.querySelector('[role="listbox"]');(r?.querySelector('[data-chosen="true"]')??r?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[f]);const S=o.useMemo(()=>{const e=Math.ceil((d?12:24)/m),r=Array.from({length:e},(e,r)=>r*m);return d?r.map(e=>0===e?12:e):r},[d,m]),C=o.useMemo(()=>Array.from({length:Math.ceil(60/h)},(e,r)=>r*h),[h]),k=o.useMemo(()=>Array.from({length:Math.ceil(60/p)},(e,r)=>r*p),[p]),candidate=(e,r)=>M(y,"hour"===e?{hours:d?r%12+(y.getHours()>=12?12:0):r}:"minute"===e?{minutes:r}:"second"===e?{seconds:r}:{hours:y.getHours()%12+12*r}),pad=e=>String(e).padStart(2,"0"),P=d?y.getHours()%12||12:y.getHours(),column=(r,o,n,l,a)=>{const i=n.map(e=>g?.(candidate(r,e),r)??!1),d=null===s?-1:n.findIndex(l),u=d>=0?d:Math.max(0,i.indexOf(!1)),nearest=(e,r)=>{for(let o=e;o>=0&&o<n.length;o+=r)if(!i[o])return o;return-1};return e("div",{role:"listbox","aria-label":o,onKeyDown:e=>{const o=[...e.currentTarget.querySelectorAll('[role="option"]')],t=o.indexOf(e.target);if(t<0)return;const l="ArrowDown"===e.key?nearest(t+1,1):"ArrowUp"===e.key?nearest(t-1,-1):"Home"===e.key?nearest(0,1):"End"===e.key?nearest(n.length-1,-1):null;null!==l&&(e.preventDefault(),l<0||l===t||(c(candidate(r,n[l])),o[l].focus({preventScroll:!0}),revealInColumn(o[l])))},className:Y("flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--p-cell)*7)] w-[calc(var(--p-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"),children:n.map((o,n)=>{const d=candidate(r,o),m=null!==s&&l(o),h=i[n];return e("button",{type:"button",role:"option",tabIndex:n===u?0:-1,"aria-selected":m,"aria-disabled":h||void 0,"data-chosen":m?"true":void 0,className:Y(G,R[t],A[t],$[t],"w-full shrink-0",h?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":m?`cursor-pointer font-semibold text-(--p-on-solid) [--p-fill-on:1] hover:brightness-105 active:brightness-95 ${j}`:"cursor-pointer text-(--plass-fg) hover:bg-(--p-soft) active:bg-(--p-soft-hover)"),onClick:()=>{h||c(d)},children:a(o)},o)})},r)};return r("div",{ref:x,className:Y("flex","compact"===n?"gap-0.5":"gap-1",v),style:{"--p-cell":T[t]},children:[column("hour",b.hour,S,e=>e===P,e=>d?String(e):pad(e)),column("minute",b.minute,C,e=>e===y.getMinutes(),pad),u?column("second",b.second,k,e=>e===y.getSeconds(),pad):null,d?column("meridiem",b.meridiem,[0,1],e=>(y.getHours()>=12?1:0)===e,e=>0===e?D:N):null,e("span",{className:F,"aria-live":"polite",children:null===s?"":a(l,{hour:"numeric",minute:"2-digit",...u?{second:"2-digit"}:{}}).format(s)})]})}

package/dist/internal/chart-frame.d.ts

@@ -18,7 +18,7 @@
 import * as React from 'react';
 import { type PlBoxProps } from '../components/box/PlBox.js';
 import { type BandScale, type ChartValue, type PlotBox, type ValueScale } from './chart.js';
-import type { PlassChartAxis, PlassChartCategory, PlassChartLegend, PlassChartSeries, PlassChartTooltip, PlassSize } from '../types.js';
+import type { PlassChartAxis, PlassChartCategory, PlassChartLegend, PlassChartReference, PlassChartSeries, PlassChartTooltip, PlassSize } from '../types.js';
 /**
  * How wide the chart actually is, in pixels.
  *
@@ -76,6 +76,10 @@ declare function useMeasuredWidth(ref: React.RefObject<HTMLElement | null>): num
  * Only the pie and the heatmap ever moved on any of this. The line, the area,
  * the bar, the scatter and the timeline snapped, and a dashboard holding two of
  * each showed both answers at once.
+ *
+ * The declaration is one string literal, however long, because Tailwind finds
+ * a class by reading the source text. Pieced together from three strings, it
+ * was a class the stylesheet never had, and every mark snapped.
  */
 export declare const markTransitionClasses: string;
 export interface ChartBaseProps extends Omit<PlBoxProps, 'children' | 'title'> {
@@ -133,21 +137,53 @@ export interface CartesianChartProps extends ChartBaseProps {
     xAxis?: PlassChartAxis;
     /** The value axis. */
     yAxis?: PlassChartAxis;
+    /**
+     * Lines drawn across the plot at a value — a target, an average, a limit.
+     *
+     * Not data, and drawn as if they know it: dashed, in the muted ink, under the
+     * marks. They sit on the **value** axis, so one runs across a vertical chart
+     * and down a horizontal one. Each is written into the description a screen
+     * reader is given with the chart.
+     */
+    reference?: PlassChartReference | readonly PlassChartReference[];
 }
 interface Visibility {
+    /** The key each series' legend entry is rendered under, from `entryKeys`. */
+    keys: readonly string[];
     visible: boolean[];
     hovered: number | null;
     toggle: (index: number) => void;
     setHovered: (index: number | null) => void;
 }
+/**
+ * The keys the legend entries of `series` are rendered under, one per series
+ * and in its order: its `id` and how many series before it have that id, or
+ * else its name and how many series before it have that name, or its place in
+ * the array when it has neither.
+ *
+ * No two entries share a key. Every name is followed by its count and a place
+ * never is: two series called "Revenue" are `Revenue#0` and `Revenue#1`, and a
+ * series called "1" is `1#0` where an unnamed one at index 1 is `1`. The count
+ * is whatever follows the last `#`, so a name holding a `#` of its own cannot
+ * meet another name's key either. An id is followed by its count and then by
+ * `@id`, so a series with the id "eu" is `eu#0@id`, which ends in a letter
+ * where the key of a name or of a place always ends in a digit.
+ *
+ * A timeline keys its rows with it as well. They have no legend, but a mark on
+ * one is held by its row's key, as a mark on a series is held by its entry's.
+ */
+declare function entryKeys(series: readonly Pick<PlassChartSeries, 'id' | 'name'>[]): string[];
 /**
  * Which series are drawn, and which one the pointer is resting on in the legend.
  *
- * Keyed by index into the array as it was passed, which is what keeps a hidden
- * series from renumbering the ones after it. The colours come off the same
- * index, so hiding Europe leaves Asia exactly the colour it was.
+ * Answered by index into the array as it was passed, which is what keeps a
+ * hidden series from renumbering the ones after it. The colours come off the
+ * same index, so hiding Europe leaves Asia exactly the colour it was.
+ *
+ * `listed` is whether the legend is drawn with entries that answer the pointer
+ * and the focus, which is where the hovered one comes from.
  */
-declare function useVisibility(series: readonly PlassChartSeries[]): Visibility;
+declare function useVisibility(series: readonly PlassChartSeries[], listed: boolean): Visibility;
 interface LegendProps {
     series: readonly PlassChartSeries[];
     colors: readonly string[];
@@ -156,6 +192,8 @@ interface LegendProps {
     size: PlassSize;
     values?: readonly (string | undefined)[];
     swatch?: (index: number, color: string) => React.ReactNode;
+    /** Which entries are drawn on the plot as a dashed line, by index. */
+    dashed?: readonly boolean[];
 }
 /**
  * The dependable identity channel.
@@ -165,15 +203,20 @@ interface LegendProps {
  * light hue is illegible as text and because colour is what the swatch beside
  * it is for.
  *
- * A hidden series stays in the legend and goes grey rather than disappearing:
- * a list that shortens when you click it is a list you cannot click twice.
+ * A hidden series stays in the legend and fades rather than disappearing: a
+ * list that shortens when you click it is a list you cannot click twice. It
+ * fades as one thing — swatch, name and value together, at one opacity — which
+ * is what a control that has been switched off looks like everywhere else in
+ * the library. Recolouring the name to the muted ink instead was the one place
+ * a hidden entry was told apart by a *hue*, and it read as a second kind of
+ * text rather than as the same entry, off.
  *
  * `swatch` is for the chart whose marks carry a second identity channel. A
  * scatter past the third series tells its series apart by shape as well as by
  * hue, and a legend that answered with eight identical squares would be back to
  * colour alone — which is the thing the shapes were added to fix.
  */
-declare function ChartLegendBar({ series, colors, options, visibility, size, values, swatch }: LegendProps): React.JSX.Element;
+declare function ChartLegendBar({ series, colors, options, visibility, size, values, swatch, dashed }: LegendProps): React.JSX.Element;
 interface ScaleLegendProps {
     /** The steps, palest first, as the `var()`s that resolve them. */
     steps: readonly string[];
@@ -209,6 +252,13 @@ export interface ChartTooltipItem {
     value: number | null;
     formatted: string;
     label?: React.ReactNode;
+    /**
+     * A second figure, written after the reading in brackets: a bubble's size,
+     * as in `22 (5)`. Kept apart from `formatted` and `label` so that what a
+     * caller's own `tooltip.render` is handed is still the value and the point's
+     * own words.
+     */
+    aside?: string;
 }
 interface TooltipProps {
     heading: React.ReactNode;
@@ -261,23 +311,6 @@ interface DataTableProps {
     format: (value: number) => string;
     locale?: string;
 }
-/**
- * The chart, as a table, for the readers a drawing does not reach.
- *
- * Not an option and not a toggle. A tooltip that is the only way to a number
- * gates that number behind a pointer, and an SVG with an `aria-label` on it
- * says "revenue by month" and then says nothing else at all. This is the same
- * data in the one form every assistive technology already reads, so the picture
- * is free to be a picture.
- *
- * It is clipped rather than `display: none`, for the reason `srOnlyClasses`
- * gives: the second one takes it off the accessibility tree along with the
- * screen, which would leave the chart exactly as mute as before.
- *
- * Memoised, because it is a row for every category and none of it changes when
- * the pointer or a key moves the active column, which re-renders the chart
- * around it every time.
- */
 declare const ChartDataTable: React.MemoExoticComponent<({ id, caption, corner, categories, series, values, format, locale }: DataTableProps) => React.JSX.Element>;
 interface SurfaceProps extends Omit<PlBoxProps, 'children'> {
     legend: React.ReactNode;
@@ -301,6 +334,13 @@ export interface ChartMark {
     series: number;
     /** Its own place within that series. */
     index: number;
+    /**
+     * What its series is known by, from `entryKeys`, when the chart's series are
+     * not the frame's: a timeline's rows, which the frame is handed as its
+     * categories. Without it, the mark's series is known by its legend entry's
+     * key.
+     */
+    key?: string;
     /** Its centre, in pixels from the chart's top-left. */
     x: number;
     y: number;
@@ -334,6 +374,8 @@ export interface CartesianLayout {
     visible: readonly boolean[];
     /** And what colour each one is, by its original index. */
     colors: readonly string[];
+    /** Which of them are drawn as a dashed line, in the same order. */
+    dashed: readonly boolean[];
     scale: ValueScale;
     band: BandScale;
     /** Bars run along the category axis rather than across it. */
@@ -399,6 +441,16 @@ interface CartesianProps extends CartesianChartProps {
     table?: (id: string) => React.ReactNode;
     /** The legend's swatch, for a chart whose marks are not all the same shape. */
     swatch?: (index: number, color: string) => React.ReactNode;
+    /**
+     * The marks are a stroke along the categories — a line, or the edge of an
+     * area that is not stacked — so a `dashed` series is drawn dashed, and its
+     * legend entry is a dashed rule rather than a square.
+     *
+     * Said by the chart rather than read off the series, because `dashed` does
+     * nothing on a bar or a stacked band, and a legend that promised a dashed line
+     * the plot never drew would be the one part of the chart that lied.
+     */
+    stroked?: boolean;
     /**
      * The value axis' scale, already worked out.
      *
@@ -415,10 +467,21 @@ interface CartesianProps extends CartesianChartProps {
      * for anything whose marks sit in a grid the frame already understands. A
      * Gantt's rows are the frame's *categories* and its marks are spans within
      * them, so there is no cell for the frame to look the answer up in.
+     *
+     * `index` and `category` are what a caller's own `tooltip.render` is handed,
+     * when the mark's own place is not them. A span sits in its row, which is the
+     * category, and the mark's `index` is the span's place along that row.
+     * `renderItems` is handed in place of `items` when the card's rows are not
+     * what a caller should be handed: the card names a span's row beside the
+     * swatch, and a caller who is already handed the row as `category` wants the
+     * span's own name there instead.
      */
     markTooltip?: (mark: ChartMark) => {
         heading: React.ReactNode;
         items: readonly ChartTooltipItem[];
+        index?: number;
+        category?: PlassChartCategory;
+        renderItems?: readonly ChartTooltipItem[];
     } | null;
     /** Bars, and only bars, run the other way. */
     horizontal?: boolean;
@@ -457,6 +520,6 @@ interface CartesianProps extends CartesianChartProps {
  * function's business, and they are handed pixels rather than values so a
  * component never has to know which way round the axes are.
  */
-export declare function CartesianChart({ series, categories, xAxis, yAxis, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, table, swatch, scale: givenScale, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, children, ...box }: CartesianProps): React.JSX.Element;
-export { ChartDataTable, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSurface, ChartTooltipPanel, useMeasuredWidth, useVisibility };
+export declare function CartesianChart({ series, categories, xAxis, yAxis, reference, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, table, swatch, stroked, scale: givenScale, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, children, ...box }: CartesianProps): React.JSX.Element;
+export { ChartDataTable, ChartLegendBar, ChartScaleLegend, ChartStatus, ChartSurface, ChartTooltipPanel, entryKeys, useMeasuredWidth, useVisibility };
 export type { Visibility };

package/dist/internal/chart-frame.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as s,categoryAt as i,categoryCount as r,categoriesAreDates as o,categoryExtent as c,chartFontSizes as d,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,markerRadii as g,plotHeights as v,seriesColor as b,showsTick as y,textWidth as k,tickStride as w,toValues as M,timeScale as C,valueScale as N,writeChartValue as S}from"./chart.js";import{useDefaults as z}from"./defaults.js";import{usePlElementSize as P}from"../hooks/usePlElementSize.js";import{useLabels as A}from"./labels.js";import{cx as j,glassClasses as B,hasContent as W,metaTextClasses as _,srOnlyClasses as T,transitionClasses as L}from"./styles.js";const $=[];function useMeasuredWidth(e){return P(e)?.width??0}export const markTransitionClasses=["[transition:opacity_var(--plass-duration)_var(--plass-ease),","r_var(--plass-duration)_var(--plass-ease),","scale_var(--plass-duration)_var(--plass-ease)]"].join("");function useVisibility(e){const[t,l]=a.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[n,s]=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:s}}const I={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},R={start:"justify-start",center:"justify-center",end:"justify-end"};function ChartLegendBar({series:a,colors:n,options:s,visibility:i,size:r,values:o,swatch:c}){const d=!1!==s.interactive,u="left"===s.side||"right"===s.side;return e("ul",{className:j("flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",u?"min-w-0 flex-col items-start":"",R[s.align??"center"],_[r]),children:a.map((a,s)=>{const r=i.visible[s],u=null!==i.hovered&&i.hovered!==s,h=a.name??`${s+1}`,m=r?n[s]:`color-mix(in oklab, ${n[s]} 40%, transparent)`,p=l(t,{children:[e("span",c?{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(s,m)}:{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${L}`,style:{backgroundColor:m}}),e("span",{className:"min-w-0 truncate",children:h}),o?.[s]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:o[s]}):null]});return e("li",{className:"min-w-0",children:d?e("button",{type:"button","aria-pressed":r,onClick:()=>i.toggle(s),onPointerEnter:()=>i.setHovered(s),onPointerLeave:()=>i.setHovered(null),onFocus:()=>i.setHovered(s),onBlur:()=>i.setHovered(null),className:j("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",r?"":"text-(--plass-muted-fg) line-through",u?"opacity-55":""),children:p}):e("span",{className:j("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",r?"":"text-(--plass-muted-fg) line-through"),children:p})},a.name??s)})})}function ChartScaleLegend({steps:a,from:n,to:s,middle:i,align:r,vertical:o,size:c}){return e("div",{className:j("flex",o?"":R[r]),children:l("div",{className:j("grid grid-cols-[auto_auto_auto] items-center gap-x-2",_[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:j("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:s}),i?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:i}),e("span",{})]}):null]})})}function ChartTooltipPanel({heading:t,items:a,x:n,y:s,flip:i,size:r}){return l("div",{"data-plass-tooltip":"",className:j("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",B,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",_[r]),style:i?{right:`calc(100% - ${n}px + 10px)`,top:s}:{left:n+10,top:s},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("ul",{className:"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:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:t.label??t.formatted})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:s}){return e("span",{role:"status","aria-live":"polite",className:T,children:0===s.length?null:l(t,{children:[W(n)?l(t,{children:[n,", "]}):null,s.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex))]})})}const V=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,corner:n,categories:s,series:i,values:r,format:o,locale:c}){return l("table",{id:t,className:T,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:n??""}),i.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},t.name??l))]})}),e("tbody",{children:s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),i.map((t,l)=>{const n=r[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":o(n.value)},t.name??l)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:s,table:i,className:r,...o}){return l(n,{...o,className:j("relative flex gap-3",I[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:s}),t,i]})}export function CartesianChart({series:t,categories:n,xAxis:p,yAxis:y,horizontal:w=!1,stacked:P=!1,includeZero:B=!0,bandRatio:W=1,inset:T=!1,headroom:L=0,markInset:I=0,xScale:R="band",marks:E,markRadius:F=24,table:H,swatch:D,scale:X,markTooltip:Y,height:Z,format:K,locale:U,label:q,legend:G,tooltip:J,empty:O,size:Q,variant:ee="ghost",padded:te=!1,className:le,children:ae,...ne}){const se=z(),ie=Q??se.size??"md",re=U??se.locale,oe=a.useRef(null),ce=useMeasuredWidth(oe),de=A(),ue=a.useId(),he=useVisibility(t),[me,pe]=a.useState(null),[fe,xe]=a.useState(null),[ge,ve]=a.useState(null),be=a.useCallback(e=>S(e,K,re),[K,re]),ye=a.useMemo(()=>M(t),[t]),ke=a.useMemo(()=>t.map((e,t)=>b(e,t)),[t]),we=r(t),Me=a.useMemo(()=>Array.from({length:we},(e,t)=>i(t,n,ye)),[we,n,ye]),Ce=ye.filter((e,t)=>he.visible[t]),Ne=h(Ce,P),Se="number"==typeof Z?Z:void 0===Z?v[ie]:null,ze=d[ie],Pe=y,Ae=p,je=X??N(Ne,{min:Pe?.min,max:Pe?.max,tickCount:Pe?.tickCount,includeZero:B}),Be="value"===R?c(Ce,n):null,We="value"===R&&o(ye,n),_e="value"!==R?null:We?C(Be,{min:Ae?.min,max:Ae?.max,tickCount:Ae?.tickCount}):N(Be,{min:Ae?.min,max:Ae?.max,tickCount:Ae?.tickCount,includeZero:!1}),Te=_e&&"unit"in _e?x(_e.ticks,_e.unit,re):null,Le=je.ticks.map((e,t)=>Pe?.tickFormat?String(Pe.tickFormat(e,t)):be(e)),$e=Ae?.tickFormat,Ie=a.useMemo(()=>Me.map((e,t)=>$e?String($e(e,t)):f(e,re)),[Me,$e,re]),Re=_e?_e.ticks.map((e,t)=>$e?String($e(We?new Date(e):e,t)):Te?.[t]??u(e,re)):Ie,Ve=Le.reduce((e,t)=>Math.max(e,k(t,ze)),0),Ee=ze+6,Fe=Pe?.hidden?0:Ve+10+(Pe?.label?Ee:0),He=(ce-(w?0:Fe)-16)/Math.max(1,we),De=null!==_e,Xe=a.useMemo(()=>m(Re,{horizontal:w,slot:He,fontSize:ze,ticks:De}),[Re,w,He,ze,De]),Ye=a.useMemo(()=>Xe.reduce((e,t)=>Math.max(e,k(t,ze)),0),[Xe,ze]),Ze=w?Ae?.hidden?0:Ye+10+(Ae?.label?Ee:0):Fe,Ke=w?Pe?.hidden?0:ze+12+(Pe?.label?Ee:0):Ae?.hidden?0:ze+12+(Ae?.label?Ee:0),Ue=(w?Ae:Pe)?.thickness??Ze,qe=(w?Pe:Ae)?.thickness??Ke,Ge=(w||_e?12:Math.max(8,Xe.length?Ye/2:8))+I,Je=g[ie]+4+L+I,Oe=Se??0,Qe={left:Ue+I,top:Je,width:Math.max(0,ce-Ue-I-Ge),height:Math.max(0,Oe-Je-qe-I)},et=w?Qe.height:Qe.width,tt=s(T?Math.max(1,we-1):we,et,W),lt=a.useCallback(e=>T?we<=1?et/2:et*e/(we-1):tt.centre(e),[T,we,et,tt]),at=a.useCallback(e=>w?Qe.left+je.fraction(e)*Qe.width:Qe.top+(1-je.fraction(e))*Qe.height,[w,Qe.left,Qe.top,Qe.width,Qe.height,je]),nt=a.useCallback((e,t)=>w?{x:at(t),y:Qe.top+lt(e)}:{x:Qe.left+lt(e),y:at(t)},[w,at,lt,Qe.left,Qe.top]),st=a.useCallback(e=>w?Qe.top+(1-(_e?.fraction(e)??0))*Qe.height:Qe.left+(_e?.fraction(e)??0)*Qe.width,[w,Qe.left,Qe.top,Qe.width,Qe.height,_e]),it=at(Math.min(Math.max(0,je.min),je.max)),rt={plot:Qe,values:ye,visible:he.visible,colors:ke,scale:je,band:tt,horizontal:w,valuePx:at,categoryPx:lt,point:nt,categoryScale:_e,categoryValuePx:st,zeroPx:it,categories:Me,format:be,size:ie},ot=E?E(rt):$,ct=!1===J?{mode:"none"}:!0===J||void 0===J?{}:J,dt=ct.mode??(E?"item":"index"),ut=null===fe?null:ot[fe]??null,ht=E?ut?ut.index:null:me,mt=E?ot.length:we,clearActive=()=>{pe(null),xe(null),ve(null)},goTo=e=>{const t=null===e?null:Math.min(mt-1,Math.max(0,e));E?xe(t):pe(t)},step=e=>{ve(null),goTo(((E?fe:me)??(e>0?-1:mt))+e)},pt=null===ht?[]:t.flatMap((e,t)=>{if(!he.visible[t]||ut&&ut.series!==t)return[];const l=ye[t]?.[ht];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??ke[t],value:l.value,formatted:be(l.value),label:l.label}]:[]}),ft=ut&&Y?Y(ut):null,xt=ft?ft.items:"item"===dt&&pt.length>1&&null!==ge?[pt.reduce((e,t)=>Math.abs(at(t.value??0)-ge)<Math.abs(at(e.value??0)-ge)?t:e)]:pt,gt=ut?ye[ut.series]?.[ut.index]?.x??n?.[ut.index]??ut.index:void 0,vt=ut?ut.x:w?at(xt[0]?.value??0):Qe.left+lt(ht??0),bt=ut?ut.y:w?Qe.top+lt(ht??0):Qe.top,yt=ut?(ut.x-Qe.left)/Math.max(1,Qe.width)>.6:(w?je.fraction(xt[0]?.value??0):lt(ht??0)/Math.max(1,et))>.6,kt=!1===G?{interactive:!1}:!0===G||void 0===G?{}:G,wt=!0===G||!1!==G&&t.length>1,Mt=kt.side??"bottom",Ct={...rt,hovered:he.hovered,activeIndex:ht,marks:ot,activeMark:ut},Nt=0===we||null===Ne||"value"===R&&null===Be;return l(ChartSurface,{...ne,size:ie,variant:ee,padded:te,className:le,legendSide:Mt,legend:wt?e(ChartLegendBar,{series:t,colors:ke,options:kt,visibility:he,size:ie,swatch:D,values:kt.showValue&&null!==ht?t.map((e,t)=>{const l=ye[t]?.[ht]?.value;return null==l?void 0:be(l)}):void 0}):null,table:Nt?null:H?.(ue)??e(V,{id:ue,caption:q,corner:Ae?.label,categories:Me,series:t,values:ye,format:be,locale:re}),children:[l("div",{ref:oe,role:"img",tabIndex:Nt?void 0:0,"aria-label":q??de.chart,"aria-describedby":Nt?void 0:ue,onPointerMove:e=>{"none"!==dt&&(E?xe(((e,t)=>{const l=oe.current;if(!l||0===ot.length)return null;const a=l.getBoundingClientRect(),n=e-a.left,s=t-a.top;let i=null,r=1/0,o=1/0;return ot.forEach((e,t)=>{const l=Math.hypot(e.x-n,e.y-s),a=void 0===e.rx?Math.max(0,l-e.r):Math.hypot(Math.max(0,Math.abs(e.x-n)-e.rx),Math.max(0,Math.abs(e.y-s)-(e.ry??e.rx)));a<=F&&(a<r||a===r&&l<o)&&(r=a,o=l,i=t)}),i})(e.clientX,e.clientY)):pe(((e,t)=>{const l=oe.current;if(!l||0===we)return null;const a=l.getBoundingClientRect(),n=w?t-a.top-Qe.top:e-a.left-Qe.left;if(n<-tt.step||n>et+tt.step)return null;const s=T?we<=1?0:Math.round(n/et*(we-1)):Math.floor(n/tt.step);return Math.min(we-1,Math.max(0,s))})(e.clientX,e.clientY)),"item"!==dt||E||ve(((e,t)=>{const l=oe.current;if(!l)return null;const a=l.getBoundingClientRect();return w?e-a.left:t-a.top})(e.clientX,e.clientY)))},onPointerLeave:clearActive,onKeyDown:"none"===dt?void 0:e=>{const t=w?"ArrowDown":"ArrowRight",l=w?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(mt-1);else{if("Escape"!==e.key)return;clearActive()}e.preventDefault()},onBlur:clearActive,className:j("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:Se??Z},children:[Nt?e("div",{className:j("flex h-full items-center justify-center text-(--plass-muted-fg)",_[ie]),children:O??de.empty}):ce>0?l("svg",{width:ce,height:Oe||"100%",viewBox:`0 0 ${ce} ${Oe}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:Qe,scale:je,band:tt,horizontal:w,inset:T,categoryPx:lt,valuePx:at,tickTexts:Le,categoryTexts:Xe,categoryScale:_e,categoryValuePx:st,valueAxis:Pe,categoryAxis:Ae,fontSize:ze,zeroPx:it}),null===ht||E||"index"!==dt||!1===ct.crosshair?null:(()=>{const t=lt(ht);return e("line",w?{x1:Qe.left,x2:Qe.left+Qe.width,y1:Qe.top+t,y2:Qe.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:Qe.left+t,x2:Qe.left+t,y1:Qe.top,y2:Qe.top+Qe.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),ae(Ct)]}):null,null!==ht&&xt.length>0&&"none"!==dt?ct.render?e("div",{className:"pointer-events-none absolute z-10",style:yt?{right:`calc(100% - ${vt}px + 10px)`,top:bt}:{left:vt+10,top:bt},children:ct.render({index:ht,category:gt??Me[ht],items:xt})}):e(ChartTooltipPanel,{heading:ft?ft.heading:f(gt??Me[ht],re),items:xt,x:vt,y:bt,flip:yt,size:ie}):null]}),"none"===dt?null:e(ChartStatus,{heading:null===ht?void 0:ft?.heading??f(gt??Me[ht],re),items:xt})]})}function ChartAxes({plot:a,scale:n,horizontal:s,categoryPx:i,valuePx:r,tickTexts:o,categoryTexts:c,categoryScale:d,categoryValuePx:u,valueAxis:h,categoryAxis:m,fontSize:f,zeroPx:x}){const g=!1!==h?.grid&&!h?.hidden,v=!m?.hidden&&(m?.grid??null!==d),categoryAlong=e=>d?u(d.ticks[e]):(s?a.top:a.left)+i(e),b=w(c.length,s?a.height:a.width,s?1.8*f:Math.max(...c.map(e=>k(e,f)),1)+12),M=w(n.ticks.length,s?a.width:a.height,s?Math.max(...o.map(e=>k(e,f)),1)+16:2*f),C=c.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,N=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,S=p(c.length,b,C,s?1.8*f:k(c[c.length-1]??"",f)),z=p(n.ticks.length,M,N,s?k(o[o.length-1]??"",f):1.6*f);return l("g",{children:[n.ticks.map((t,i)=>{const c=r(t),d=Math.abs(t)<1e-9;return l("g",{children:[g?e("line",s?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!y(i,n.ticks.length,M,z)?null:e("text",s?{x:c,y:a.top+a.height+f+6,textAnchor:0===i?"start":i===n.ticks.length-1?"end":"middle",fontSize:f,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[i]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:f,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[i]})]},t)}),m?.hidden?null:l(t,{children:[e("line",s?{x1:x,x2:x,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:x,y2:x,stroke:"var(--plass-chart-axis)",strokeWidth:1}),c.map((t,n)=>{const i=categoryAlong(n),r=y(n,c.length,b,S);return r||!s&&v?s?e("text",{x:a.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fontSize:f,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t},n):l("g",{children:[v?e("line",{x1:i,x2:i,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",{x:i,y:a.top+a.height+f+6,textAnchor:d?0===n?"start":n===c.length-1?"end":"middle":"middle",fontSize:f,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t}):null]},n):null})]}),h?.label?e("text",{x:s?a.left+a.width:a.left,y:s?a.top+a.height+2*f+12:a.top-8,textAnchor:s?"end":"start",fontSize:f,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!s?e("text",{x:a.left+a.width,y:a.top+a.height+2*f+12,textAnchor:"end",fontSize:f,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{V as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,useMeasuredWidth,useVisibility};
+"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as i,categoryAt as s,categoryCount as r,categoriesAreDates as o,categoryExtent as c,chartFontSizes as d,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,lineDash as g,lineWidths as v,logScale as y,markerRadii as k,plotHeights as b,resolveColor as w,seriesColor as M,autoTickAngle as C,showsTick as N,textWidth as z,tickAngleOf as S,tickStride as A,tiltedDepth as P,tiltedPitch as $,tiltedRoom as j,tiltedStep as B,toValues as W,truncate as _,timeScale as T,valueScale as I,writeChartValue as D}from"./chart.js";import{useDefaults as E}from"./defaults.js";import{usePlElementSize as K}from"../hooks/usePlElementSize.js";import{useLabels as F}from"./labels.js";import{textOf as L}from"./text.js";import{cx as R,glassClasses as V,hasContent as H,metaTextClasses as X,srOnlyClasses as Y,transitionClasses as Z}from"./styles.js";const O=[];function useMeasuredWidth(e){return K(e)?.width??0}export const markTransitionClasses=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease),r_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");function entryKeys(e){const t=new Map,l=new Map;return e.map((e,a)=>{const n=e.id??null;if(null!==n){const e=l.get(n)??0;return l.set(n,e+1),`${n}#${e}@id`}const i=e.name??null;if(null===i)return String(a);const s=t.get(i)??0;return t.set(i,s+1),`${i}#${s}`})}function useVisibility(e,t){const l=entryKeys(e),[n,i]=a.useState(()=>{const t=new Set;return e.forEach((e,a)=>{e.hidden&&t.add(l[a])}),t});[...n].some(e=>!l.includes(e))&&i(new Set([...n].filter(e=>l.includes(e))));const[s,r]=a.useState(null),o=null!==s&&t?l.indexOf(s):-1;return null!==s&&-1===o&&r(null),{keys:l,visible:l.map(e=>!n.has(e)),hovered:-1===o?null:o,toggle:e=>{const t=l[e];void 0!==t&&i(e=>{const l=new Set(e);return l.has(t)?l.delete(t):l.add(t),l})},setHovered:e=>r(null===e?null:l[e]??null)}}const U={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},q={start:"justify-start",center:"justify-center",end:"justify-end"};function DashedRule({ink:t,size:l}){const a=v[l],n=16+a;return e("svg",{"aria-hidden":"true",width:n,height:10,viewBox:`0 0 ${n} 10`,className:"block shrink-0",children:e("line",{x1:a/2,x2:n-a/2,y1:5,y2:5,stroke:t,strokeWidth:a,strokeDasharray:g,strokeLinecap:"round"})})}function ChartLegendBar({series:n,colors:i,options:s,visibility:r,size:o,values:c,swatch:d,dashed:u}){const h=!1!==s.interactive,m="left"===s.side||"right"===s.side,p=F(),[f,x]=a.useState(!1),g=s.maxEntries,v=void 0!==g&&g>0&&n.length>g&&!f,y=v?n.slice(0,g):n,k=n.length-y.length,b=entryKeys(n);return l("ul",{className:R("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",m?"min-w-0 flex-col items-start":"",q[s.align??"center"],X[o]),children:[y.map((a,n)=>{const s=r.visible[n],m=null!==r.hovered&&r.hovered!==n,p=a.name??`${n+1}`,f=i[n],x=s?m?"opacity-55":"":"opacity-40",g=l(t,{children:[d?e("span",{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:d(n,f)}):u?.[n]?e(DashedRule,{ink:f,size:o}):e("span",{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${Z}`,style:{backgroundColor:f}}),e("span",{className:"min-w-0 truncate",children:p}),c?.[n]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:c[n]}):null]});return e("li",{className:"min-w-0",children:h?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(n),onPointerEnter:()=>r.setHovered(n),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(n),onBlur:()=>r.setHovered(null),className:R("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",s?"":"line-through",x),children:g}):e("span",{className:R("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",s?"":"line-through",x),children:g})},b[n])}),v||f?e("li",{className:"min-w-0",children:e("button",{type:"button","aria-expanded":f,onClick:()=>x(e=>!e),className:R("flex cursor-pointer items-center rounded-(--plass-radius-xs)","px-1 py-0.5 font-medium text-(--plass-muted-fg)","[transition-property:background-color,color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),children:f?p.chartFewer:p.chartMore(k)})}):null]})}function ChartScaleLegend({steps:a,from:n,to:i,middle:s,align:r,vertical:o,size:c}){return e("div",{className:R("flex",o?"":q[r]),children:l("div",{className:R("grid grid-cols-[auto_auto_auto] items-center gap-x-2",X[c]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:R("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:i}),s?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:s}),e("span",{})]}):null]})})}function itemText(e){const a=e.label??e.formatted;return void 0===e.aside?a:l(t,{children:[a," (",e.aside,")"]})}function ChartTooltipPanel({heading:t,items:a,x:n,y:i,flip:s,size:r}){return l("div",{"data-plass-tooltip":"",className:R("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",V,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",X[r]),style:s?{right:`calc(100% - ${n}px + 10px)`,top:i}:{left:n+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("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:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:itemText(t)})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:i}){return e("span",{role:"status","aria-live":"polite",className:Y,children:0===i.length?null:l(t,{children:[H(n)?l(t,{children:[n,", "]}):null,i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,itemText(e)]},e.seriesIndex))]})})}const G=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,corner:n,categories:i,series:s,values:r,format:o,locale:c}){const d=entryKeys(s);return l("table",{id:t,className:Y,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:n??""}),s.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},d[l]))]})}),e("tbody",{children:i.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),d.map((t,l)=>{const n=r[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":o(n.value)},t)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:i,table:s,className:r,...o}){return l(n,{...o,className:R("relative flex gap-3",U[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,s]})}function markKey(e,t){return`${e.key??t[e.series]??e.series}:${e.index}`}export function CartesianChart({series:n,categories:p,xAxis:g,yAxis:v,reference:w,horizontal:N=!1,stacked:A=!1,includeZero:$=!0,bandRatio:K=1,inset:V=!1,headroom:H=0,markInset:Z=0,xScale:U="band",marks:q,markRadius:J=24,table:Q,swatch:ee,stroked:te=!1,scale:le,markTooltip:ae,height:ne,format:ie,locale:se,label:re,legend:oe,tooltip:ce,empty:de,size:ue,variant:he="ghost",padded:me=!1,className:pe,children:fe,...xe}){const ge=E(),ve=ue??ge.size??"md",ye=se??ge.locale,ke=a.useRef(null),be=useMeasuredWidth(ke),we=F(),Me=a.useId(),Ce=a.useId(),Ne=a.useId(),ze=!1===oe?{interactive:!1}:!0===oe||void 0===oe?{}:oe,Se=!0===oe||!1!==oe&&n.length>1,Ae=ze.side??"bottom",Pe=useVisibility(n,Se&&!1!==ze.interactive),[$e,je]=a.useState(null),[Be,We]=a.useState(null),[_e,Te]=a.useState(null),Ie=a.useCallback(e=>D(e,ie,ye),[ie,ye]),De=a.useMemo(()=>W(n),[n]),Ee=a.useMemo(()=>n.map((e,t)=>M(e,t)),[n]),Ke=a.useMemo(()=>n.map(e=>!0===e.dashed),[n]),Fe=r(n),Le=a.useMemo(()=>Array.from({length:Fe},(e,t)=>s(t,p,De)),[Fe,p,De]),Re=De.filter((e,t)=>Pe.visible[t]),Ve=h(Re,A),He=a.useMemo(()=>n.flatMap((e,t)=>{if(!Pe.visible[t])return[];const l=[...De[t]??[]].reverse().find(e=>null!==e.value),a=e.name??`${t+1}`;return void 0===l?[{name:a,said:null}]:[{name:a,said:l.label??Ie(l.value)}]}),[n,De,Pe.visible,Ie]),Xe="number"==typeof ne?ne:void 0===ne?b[ve]:null,Ye=d[ve],Ze=v,Oe=g,Ue=a.useMemo(()=>void 0===w?[]:Array.isArray(w)?w:[w],[w]),qe=le??("log"===Ze?.scale?y(Ve,{min:Ze.min,max:Ze.max,tickCount:Ze.tickCount}):I(Ve,{min:Ze?.min,max:Ze?.max,tickCount:Ze?.tickCount,includeZero:$})),Ge="value"===U?c(Re,p):null,Je="value"===U&&o(De,p),Qe="value"!==U?null:Je?T(Ge,{min:Oe?.min,max:Oe?.max,tickCount:Oe?.tickCount}):"log"===Oe?.scale?y(Ge,{min:Oe.min,max:Oe.max,tickCount:Oe.tickCount}):I(Ge,{min:Oe?.min,max:Oe?.max,tickCount:Oe?.tickCount,includeZero:!1}),et=Qe&&"unit"in Qe?x(Qe.ticks,Qe.unit,ye):null,tt=qe.ticks.map((e,t)=>Ze?.tickFormat?L(Ze.tickFormat(e,t)):Ie(e)),lt=Oe?.tickFormat,at=a.useMemo(()=>Le.map((e,t)=>lt?L(lt(e,t)):f(e,ye)),[Le,lt,ye]),nt=Qe?Qe.ticks.map((e,t)=>lt?L(lt(Je?new Date(e):e,t)):et?.[t]??u(e,ye)):at,it=tt.reduce((e,t)=>Math.max(e,z(t,Ye)),0),st=Ye+6,rt=Ze?.hidden?0:it+10+(Ze?.label?st:0),ot=(be-(N?0:rt)-16)/Math.max(1,Fe),ct=Xe??0,dt=null!==Qe,ut=Oe?.tickAngle,ht=N?0:"auto"===ut?dt?0:C(nt,{slot:ot,fontSize:Ye}):S(ut),mt=0!==ht&&!Oe?.hidden,pt=Math.max(3*Ye,.4*ct),ft=a.useMemo(()=>mt?nt.map(e=>_(e,j(pt,ht,Ye),Ye)):m(nt,{horizontal:N,slot:ot,fontSize:Ye,ticks:dt}),[nt,mt,pt,ht,N,ot,Ye,dt]),xt=a.useMemo(()=>ft.reduce((e,t)=>Math.max(e,z(t,Ye)),0),[ft,Ye]),gt=mt?B(xt,ht,Ye)+4:0,vt=N?Oe?.hidden?0:xt+10+(Oe?.label?st:0):rt,yt=N?Ze?.hidden?0:Ye+12+(Ze?.label?st:0):Oe?.hidden?0:(mt?P(xt,ht,Ye)+14:Ye+12)+(Oe?.label?st:0),kt=Math.max((N?Oe:Ze)?.thickness??vt,mt&&ht<0?gt:0),bt=(N?Ze:Oe)?.thickness??yt,wt=(N?12:mt?ht>0?gt:12:Qe?12:Math.max(8,ft.length?xt/2:8))+Z,Mt=k[ve]+4+H+Z,Ct={left:kt+Z,top:Mt,width:Math.max(0,be-kt-Z-wt),height:Math.max(0,ct-Mt-bt-Z)},Nt=N?Ct.height:Ct.width,zt=i(V?Math.max(1,Fe-1):Fe,Nt,K),St=a.useCallback(e=>V?Fe<=1?Nt/2:Nt*e/(Fe-1):zt.centre(e),[V,Fe,Nt,zt]),At=a.useCallback(e=>N?Ct.left+qe.fraction(e)*Ct.width:Ct.top+(1-qe.fraction(e))*Ct.height,[N,Ct.left,Ct.top,Ct.width,Ct.height,qe]),Pt=a.useCallback((e,t)=>N?{x:At(t),y:Ct.top+St(e)}:{x:Ct.left+St(e),y:At(t)},[N,At,St,Ct.left,Ct.top]),$t=a.useCallback(e=>N?Ct.top+(1-(Qe?.fraction(e)??0))*Ct.height:Ct.left+(Qe?.fraction(e)??0)*Ct.width,[N,Ct.left,Ct.top,Ct.width,Ct.height,Qe]),jt=At(Math.min(Math.max(0,qe.min),qe.max)),Bt={plot:Ct,values:De,visible:Pe.visible,colors:Ee,dashed:Ke,scale:qe,band:zt,horizontal:N,valuePx:At,categoryPx:St,point:Pt,categoryScale:Qe,categoryValuePx:$t,zeroPx:jt,categories:Le,format:Ie,size:ve},Wt=!1===ce?{mode:"none"}:!0===ce||void 0===ce?{}:ce,_t=Wt.mode??(q?"item":"index"),Tt=q??("nearest"===_t?e=>function gridMarks(e,t){const l=[],a=k[e.size],n=[];return e.values.forEach((i,s)=>{const r=i.map((e,t)=>n[t]??0);t&&e.visible[s]&&i.forEach((e,t)=>{n[t]=(n[t]??0)+(e.value??0)}),e.visible[s]&&i.forEach((n,i)=>{if(null===n.value)return;const o=e.point(i,t?r[i]+n.value:n.value);l.push({series:s,index:i,x:o.x,y:o.y,r:a})})}),l}(e,A):void 0),It=Tt?Tt(Bt):O,Dt=null===Be?-1:It.findIndex(e=>markKey(e,Pe.keys)===Be),Et=-1===Dt?null:It[Dt],Kt=Tt?Et?Et.index:null:$e,Ft=Tt?It.length:Fe,clearActive=()=>{je(null),We(null),Te(null)};(null!==$e&&$e>=Fe||null!==Be&&!Et)&&clearActive();const goTo=e=>{const t=null===e?null:Math.min(Ft-1,Math.max(0,e));if(Te(null),Tt){const e=null===t?void 0:It[t];We(e?markKey(e,Pe.keys):null)}else je(t)},step=e=>{goTo(((Tt?-1===Dt?null:Dt:$e)??(e>0?-1:Ft))+e)},Lt=null===Kt?[]:n.flatMap((e,t)=>{if(!Pe.visible[t]||Et&&Et.series!==t)return[];const l=De[t]?.[Kt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Ee[t],value:l.value,formatted:Ie(l.value),label:l.label}]:[]}),Rt=Et&&ae?ae(Et):null,Vt=Rt?Rt.items:"item"===_t&&Lt.length>1&&null!==_e?[Lt.reduce((e,t)=>Math.abs(At(t.value??0)-_e)<Math.abs(At(e.value??0)-_e)?t:e)]:Lt,Ht=Et?De[Et.series]?.[Et.index]?.x??p?.[Et.index]??Et.index:void 0,Xt=Et?Et.x:N?At(Vt[0]?.value??0):Ct.left+St(Kt??0),Yt=Et?Et.y:N?Ct.top+St(Kt??0):Ct.top,Zt=Et?(Et.x-Ct.left)/Math.max(1,Ct.width)>.6:(N?qe.fraction(Vt[0]?.value??0):St(Kt??0)/Math.max(1,Nt))>.6,Ot={...Bt,hovered:Pe.hovered,activeIndex:Kt,marks:It,activeMark:Et},Ut=0===Fe||null===Ve||"value"===U&&null===Ge;return l(ChartSurface,{...xe,size:ve,variant:he,padded:me,className:pe,legendSide:Ae,legend:Se?e(ChartLegendBar,{series:n,colors:Ee,options:ze,visibility:Pe,size:ve,swatch:ee,dashed:te?Ke:void 0,values:ze.showValue&&null!==Kt?n.map((e,t)=>{const l=De[t]?.[Kt]?.value;return null==l?void 0:Ie(l)}):void 0}):null,table:Ut?null:Q?.(Me)??e(G,{id:Me,caption:re,corner:Oe?.label,categories:Le,series:n,values:De,format:Ie,locale:ye}),children:[l("div",{ref:ke,role:"img",tabIndex:Ut?void 0:0,"aria-label":re??we.chart,"aria-describedby":Ut?Ne:Ce,onPointerMove:e=>{if("none"!==_t){if(Tt){const t=((e,t)=>{const l=ke.current;if(!l||0===It.length)return null;const a=l.getBoundingClientRect(),n=e-a.left,i=t-a.top;let s=null,r=1/0,o=1/0;return It.forEach((e,t)=>{const l=Math.hypot(e.x-n,e.y-i),a=void 0===e.rx?Math.max(0,l-e.r):Math.hypot(Math.max(0,Math.abs(e.x-n)-e.rx),Math.max(0,Math.abs(e.y-i)-(e.ry??e.rx)));a<=J&&(a<r||a===r&&l<o)&&(r=a,o=l,s=t)}),s})(e.clientX,e.clientY);We(null===t?null:markKey(It[t],Pe.keys))}else je(((e,t)=>{const l=ke.current;if(!l||0===Fe)return null;const a=l.getBoundingClientRect(),n=N?t-a.top-Ct.top:e-a.left-Ct.left;if(n<-zt.step||n>Nt+zt.step)return null;const i=V?Fe<=1?0:Math.round(n/Nt*(Fe-1)):Math.floor(n/zt.step);return Math.min(Fe-1,Math.max(0,i))})(e.clientX,e.clientY));"item"!==_t||Tt||Te(((e,t)=>{const l=ke.current;if(!l)return null;const a=l.getBoundingClientRect();return N?e-a.left:t-a.top})(e.clientX,e.clientY))}},onPointerLeave:clearActive,onKeyDown:"none"===_t?void 0:e=>{const t=N?"ArrowDown":"ArrowRight",l=N?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(Ft-1);else{if("Escape"!==e.key||null===$e&&null===Be)return;clearActive(),e.stopPropagation()}e.preventDefault()},onBlur:clearActive,className:R("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:Xe??ne},children:[Ut?e("div",{id:Ne,className:R("flex h-full items-center justify-center text-(--plass-muted-fg)",X[ve]),children:de??we.empty}):be>0?l("svg",{width:be,height:ct||"100%",viewBox:`0 0 ${be} ${ct}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:Ct,scale:qe,band:zt,horizontal:N,inset:V,categoryPx:St,valuePx:At,tickTexts:tt,categoryTexts:ft,categoryScale:Qe,categoryValuePx:$t,valueAxis:Ze,categoryAxis:Oe,references:Ue,fontSize:Ye,zeroPx:jt,tickAngle:mt?ht:0,tickBand:mt?8+P(xt,ht,Ye):Ye+6}),null===Kt||Tt||"index"!==_t||!1===Wt.crosshair?null:(()=>{const t=St(Kt);return e("line",N?{x1:Ct.left,x2:Ct.left+Ct.width,y1:Ct.top+t,y2:Ct.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:Ct.left+t,x2:Ct.left+t,y1:Ct.top,y2:Ct.top+Ct.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),fe(Ot)]}):null,null!==Kt&&Vt.length>0&&"none"!==_t?Wt.render?e("div",{className:"pointer-events-none absolute z-10",style:Zt?{right:`calc(100% - ${Xt}px + 10px)`,top:Yt}:{left:Xt+10,top:Yt},children:Wt.render({index:Rt?.index??Kt,category:Rt?.category??Ht??Le[Kt],items:Rt?.renderItems??Vt})}):e(ChartTooltipPanel,{heading:Rt?Rt.heading:f(Ht??Le[Kt],ye),items:Vt,x:Xt,y:Yt,flip:Zt,size:ve}):null]}),Ut?null:l("span",{id:Ce,className:Y,children:[He.map((e,n)=>l(a.Fragment,{children:[n>0?", ":null,null===e.said?e.name:l(t,{children:[e.name," ",e.said]})]},n)),Ue.map((e,t)=>l(a.Fragment,{children:[", ",e.label?`${e.label} ${Ie(e.value)}`:Ie(e.value)]},`reference-${t}`))]}),"none"===_t?null:e(ChartStatus,{heading:null===Kt?void 0:Rt?.heading??f(Ht??Le[Kt],ye),items:Vt})]})}function ChartAxes({plot:a,scale:n,horizontal:i,categoryPx:s,valuePx:r,tickTexts:o,categoryTexts:c,categoryScale:d,categoryValuePx:u,valueAxis:h,categoryAxis:m,references:f,fontSize:x,zeroPx:v,tickAngle:y,tickBand:k}){const b=!1!==h?.grid&&!h?.hidden,M=!m?.hidden&&(m?.grid??null!==d),categoryAlong=e=>d?u(d.ticks[e]):(i?a.top:a.left)+s(e),C=Math.max(...c.map(e=>z(e,x)),1),S=y?$(y,x):C+12,P=A(c.length,i?a.height:a.width,i?1.8*x:S),j=A(n.ticks.length,i?a.width:a.height,i?Math.max(...o.map(e=>z(e,x)),1)+16:2*x),B=c.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,W=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,_=c[c.length-1]??"",T=0!==y||p(c.length,P,B,i?1.8*x:z(_,x)),I=p(n.ticks.length,j,W,i?z(o[o.length-1]??"",x):1.6*x);return l("g",{children:[n.ticks.map((t,s)=>{const c=r(t),d=Math.abs(t)<1e-9;return l("g",{children:[b?e("line",i?{x1:c,x2:c,y1:a.top,y2:a.top+a.height,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:c,y2:c,stroke:d?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!N(s,n.ticks.length,j,I)?null:e("text",i?{x:c,y:a.top+a.height+x+6,textAnchor:0===s?"start":s===n.ticks.length-1?"end":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]}:{x:a.left-8,y:c,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]})]},t)}),m?.hidden?null:l(t,{children:[e("line",i?{x1:v,x2:v,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:v,y2:v,stroke:"var(--plass-chart-axis)",strokeWidth:1}),c.map((t,n)=>{const s=categoryAlong(n),r=N(n,c.length,P,T);if(!r&&(i||!M))return null;const o=s,u=a.top+a.height+8+x/2;return i?e("text",{x:a.left-8,y:s,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t},n):l("g",{children:[M?e("line",{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",y?{x:o,y:u,transform:`rotate(${y} ${o} ${u})`,textAnchor:y<0?"end":"start",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t}:{x:s,y:a.top+a.height+x+6,textAnchor:d?0===n?"start":n===c.length-1?"end":"middle":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:d?"tabular-nums":void 0,children:t}):null]},n)})]}),f.map((t,n)=>{const s=r(t.value),o=t.color?w(t.color):"var(--plass-muted-fg)",c=!1===t.dashed?void 0:g;return l("g",{children:[e("line",i?{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:o,strokeWidth:1,strokeDasharray:c}:{x1:a.left,x2:a.left+a.width,y1:s,y2:s,stroke:o,strokeWidth:1,strokeDasharray:c}),t.label?e("text",{x:i?s:a.left+a.width,y:i?a.top+x:s-4,textAnchor:i?"middle":"end",fontSize:x,fontWeight:500,fill:o,children:t.label}):null]},n)}),h?.label?e("text",{x:i?a.left+a.width:a.left,y:i?a.top+a.height+k+x+6:a.top-8,textAnchor:i?"end":"start",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!i?e("text",{x:a.left+a.width,y:a.top+a.height+k+x+6,textAnchor:"end",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{G as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,entryKeys,useMeasuredWidth,useVisibility};