neba 1.18.1 → 1.19.0

package/dist/internal/page-layout.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NebaBreakpoint, NebaSide, NebaSize } from '../types.js';
+import type { NebaBreakpoint, NebaPosition, NebaSide, NebaSize } from '../types.js';
 /**
  * The vocabulary a page's structure is written in, and the context the four
  * components that build one share.
@@ -105,6 +105,27 @@ export declare const PageLayoutSlotContext: React.Context<PageLayoutSlot | null>
  * "nobody said", which a standalone sidebar reads as `start`.
  */
 export declare const SidebarSideContext: React.Context<SidebarSide | null>;
+/**
+ * The ref a Header or a Footer puts on its bar: it hands the bar to the layout
+ * when the bar fills that slot, and forwards it to the caller's own ref.
+ *
+ * Stable for as long as the slot and `position` are, which is the point of it.
+ * A callback ref that changes is detached and attached again on every commit,
+ * and each of those registered the bar anew — restarting both of the layout's
+ * `ResizeObserver`s and writing the bar's height as `0px` and back onto the
+ * layout's root, which invalidates the style of the whole page. A caller who
+ * writes `ref={(node) => …}` inline hands the bar a new ref on every render, so
+ * every render of a page with a Header in it did all of that. `position` is
+ * kept in the dependencies on purpose: a bar switched to `fixed` has the same
+ * height and fires no resize, and the room reserved for it is what changed.
+ *
+ * The caller's ref is therefore read from a ref of its own rather than closed
+ * over. When it changes, the old one lets go of the bar and the new one is
+ * handed it, which is what React does for a ref that changes, one phase later.
+ * Letting go is whatever `attachRef` returned when the bar was handed over: a
+ * React 19 ref's own cleanup, or a call with `null` for one that returned none.
+ */
+export declare function useBarRef(slot: PageLayoutSlot, ref: React.ForwardedRef<HTMLElement>, position: NebaPosition): (node: HTMLElement | null) => void;
 /**
  * A Header's floor at each size, in steps of Tailwind's spacing scale.
  *
@@ -161,6 +182,11 @@ export declare const expandedOnlyClasses: Record<PageLayoutCollapse, string>;
  * keeps that column off a narrow screen until this hook can say otherwise.
  */
 export declare function useCollapsed(breakpoint: PageLayoutCollapse): boolean;
+export declare const drawerChunk: {
+    load(): Promise<{
+        default: React.ForwardRefExoticComponent<import("../index.js").DrawerProps & React.RefAttributes<HTMLDivElement>>;
+    }>;
+};
 /**
  * `start` and `end` as the two sides a Drawer speaks.
  *
@@ -174,6 +200,8 @@ export declare function useCollapsed(breakpoint: PageLayoutCollapse): boolean;
  * Read during render rather than in an effect, which is safe here for a
  * narrower reason than it looks: the only caller is a sidebar that has already
  * collapsed, and collapsing is a client-side answer. There is no server render
- * of this to disagree with.
+ * of this to disagree with. It is a style read, so the caller asks once per
+ * collapse and once each time the drawer opens or closes, rather than on every
+ * render.
  */
 export declare function drawerSide(side: SidebarSide): NebaSide;

package/dist/internal/page-layout.js

@@ -1 +1 @@
-"use client";import*as e from"react";import{useMediaQuery as t,widthBelow as o}from"./media.js";import{hiddenBelowClasses as n,hiddenFromClasses as r}from"./responsive.js";export const PageLayoutContext=/*@__PURE__*/e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PageLayoutSlotContext=/*@__PURE__*/e.createContext(null);export const SidebarSideContext=/*@__PURE__*/e.createContext(null);export const headerFloorSteps={xs:10,sm:12,md:14,lg:16,xl:20};export function headerFloor(t,o){if(!e.isValidElement(t)||"fixed"!==t.props.position)return;const n=headerFloorSteps[t.props.size??o??"md"]??headerFloorSteps.md;return!1===t.props.divider?`calc(var(--spacing) * ${n})`:`calc(var(--spacing) * ${n} + 1px)`}export const collapsedOnlyClasses={none:"hidden",...r};export const expandedOnlyClasses={none:"",...n};export function useCollapsed(e){return t("none"===e?null:o(e))}export function drawerSide(e){const t="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?t?"right":"left":t?"left":"right"}
+"use client";import*as e from"react";import{useLayoutEffectOnClient as t}from"./layout-effect.js";import{useMediaQuery as r,widthBelow as o}from"./media.js";import{attachRef as n}from"./refs.js";import{hiddenBelowClasses as s,hiddenFromClasses as l}from"./responsive.js";export const PageLayoutContext=/*@__PURE__*/e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PageLayoutSlotContext=/*@__PURE__*/e.createContext(null);export const SidebarSideContext=/*@__PURE__*/e.createContext(null);export function useBarRef(r,o,s){const{register:l}=e.useContext(PageLayoutContext),a=e.useContext(PageLayoutSlotContext)===r,c=e.useRef(null),u=e.useRef(o),p=e.useRef(null);return t(()=>{u.current!==o&&(u.current=o,p.current?.(),p.current=c.current?n(o,c.current):null)},[o]),e.useCallback(e=>{c.current=e,a&&l(r,e),p.current?.(),p.current=e?n(u.current,e):null},[l,r,a,s])}export const headerFloorSteps={xs:10,sm:12,md:14,lg:16,xl:20};export function headerFloor(t,r){if(!e.isValidElement(t)||"fixed"!==t.props.position)return;const o=headerFloorSteps[t.props.size??r??"md"]??headerFloorSteps.md;return!1===t.props.divider?`calc(var(--spacing) * ${o})`:`calc(var(--spacing) * ${o} + 1px)`}export const collapsedOnlyClasses={none:"hidden",...l};export const expandedOnlyClasses={none:"",...s};export function useCollapsed(e){return r("none"===e?null:o(e))}let a;export const drawerChunk={load:()=>(a??=import("../components/drawer/Drawer.js").then(e=>({default:e.Drawer})).catch(e=>{throw a=void 0,e}),a)};export function drawerSide(e){const t="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?t?"right":"left":t?"left":"right"}

package/dist/internal/picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{CloseIcon as i}from"./icons.js";import{WidthSizer as r}from"./sizer.js";import{chipRemoveClasses as o,controlTextLeadingClasses as s,cx as d,disabledClasses as c,fieldFocusTransitionClasses as p,fieldHeightClasses as u,fieldReadOnlyClasses as m,fieldRestClasses as f,fieldRingClasses as b,fieldSheetClasses as h,fieldSheetDisabledClasses as v,fieldSheetReadOnlyClasses as x,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as $,paddingXClasses as P,popupFadeClasses as j,radiusClasses as w,readOnlyFilterClasses as C,stackGapClasses as k,surfaceClasses as z,surfaceSlots as O,transitionClasses as F}from"./styles.js";import{fieldSpotlightSlot as I,glowClasses as q,trackPointer as R}from"./glow.js";import{useFieldsetDisabled as S}from"./fieldset.js";import{FieldNotch as D,NotchFrame as E}from"./notch.js";export function popupSlots(e,a){return{...O(e,a),"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`}}const L=["group relative flex w-full items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",F,p,N].join(" ");export const pickerPopupClasses=[z,"border bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]",j].join(" ");export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:p="outline",size:N="md",color:j="primary",density:z="default",elevation:F=0,label:B,labelPlacement:M="top",description:T,error:V,invalid:W,startIcon:A,fullWidth:G=!1,disabled:H,readOnly:J=!1,required:K=!1,id:Q,className:U,style:X,display:Y,samples:Z,empty:_,clearable:ee=!1,onClear:ae,open:le,onOpenChange:ne,clearLabel:te,hiddenValues:ie,repeats:re=!1,sideOffset:oe=6,popupClassName:se,initialFocus:de=!1,children:ce,triggerRef:pe,...ue}){const me=S(H),fe=l.useId(),be=Q??`${fe}-trigger`,he=`${fe}-label`,ve=`${fe}-description`,xe=`${fe}-error`,ge=null!=V&&!1!==V&&""!==V,ye=W??ge,Ne=ye?"danger":j,$e=me||J,Pe=d(T?ve:null,ge?xe:null)||void 0,[je,...we]=ie??[],Ce="top"!==M&&y(B),ke=Ce&&"float"===M&&!y(A),ze=a("span",{onPointerMove:R(void 0,!$e),className:d(L,u[N],s[N],w[N],g[N],P[z][N],Ce?"":b,me?(Ce?v:c)[p]:J?Ce?`${x[p]} ${C}`:m[p]:`${(Ce?h:f)[p]} ${q}`),children:[a(t.Trigger,{id:be,ref:pe,disabled:me,"aria-labelledby":B?`${he} ${be}`:void 0,"aria-describedby":Pe,"aria-required":K||void 0,"aria-invalid":ye||void 0,"data-placeholder":_||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",g[N],"[outline:none]",$e?"cursor-default":"cursor-pointer",ke?"neba-float-control":""),children:[A?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:A}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{"data-placeholder":_||void 0,className:d("w-full truncate",_?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:Y}),e(r,{samples:ke?[...Z??[],B]:Z??[]})]})]}),!ee||_||$e?null:e("button",{type:"button","aria-label":te,className:d(o,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),ae()},children:e(i,{})}),Ce?e(D,{label:B,variant:p,disabled:me,readOnly:J,rests:ke,labelId:he,htmlFor:be}):null]});return a(n.Root,{disabled:me,invalid:ye,className:d("relative flex-col align-top",k[N],G?"flex w-full":"inline-flex",U),style:{...O(Ne,F),...$e?void 0:I,...X},...ue,children:[B&&!Ce?e(n.Label,{id:he,htmlFor:be,className:d($[N],"font-medium",me?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:B}):null,a(t.Root,{open:le,onOpenChange:e=>ne(e),children:[Ce?e(E,{label:B,size:N,density:z,variant:p,children:ze}):ze,e(t.Portal,{children:e(t.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:oe,align:"start",children:e(t.Popup,{initialFocus:de,className:d(pickerPopupClasses,w[N],popupPaddingClasses[N],s[N],se),style:popupSlots(Ne,3),children:ce})})})]}),T?e(n.Description,{id:ve,className:d($[N],"text-(--neba-muted-fg)"),children:T}):null,e(n.Error,ge?{id:xe,match:!0,className:d($[N],"text-(--n-accent)"),children:V}:{className:d($[N],"text-(--n-accent)")}),je||K&&!$e?e(n.Control,{"aria-hidden":"true",tabIndex:-1,name:je?.name,value:je?je.value:_?"":"chosen",required:K&&!$e,readOnly:J,"data-neba-repeats":re&&je?"":void 0,onFocus:()=>document.getElementById(be)?.focus(),className:"pointer-events-none absolute start-0 bottom-0 size-px overflow-hidden opacity-0 [clip-path:inset(50%)]"}):null,we.map((a,l)=>e("input",{type:"hidden",name:a.name,value:a.value,disabled:me},l))]})}export function PickerFooter({size:a,children:l}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",g[a]),children:l})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Field as t}from"@base-ui/react/field";import{Popover as n}from"@base-ui/react/popover";import{CloseIcon as r}from"./icons.js";import{WidthSizer as i}from"./sizer.js";import{chipRemoveClasses as o,controlTextLeadingClasses as s,cx as d,disabledClasses as c,fieldFocusTransitionClasses as p,fieldHeightClasses as u,fieldReadOnlyClasses as m,fieldRestClasses as f,fieldRingClasses as b,fieldSheetClasses as h,fieldSheetDisabledClasses as v,fieldSheetReadOnlyClasses as x,gapClasses as g,hasContent as y,iconClasses as N,metaTextClasses as $,paddingXClasses as P,popupFadeClasses as w,radiusClasses as j,readOnlyFilterClasses as C,stackGapClasses as k,surfaceClasses as z,surfaceSlots as O,transitionClasses as F}from"./styles.js";import{fieldSpotlightSlot as I,glowClasses as q,trackPointer as R}from"./glow.js";import{useFieldsetDisabled as S}from"./fieldset.js";import{FieldNotch as D,NotchFrame as E}from"./notch.js";export function popupSlots(e,a){return{...O(e,a),"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`}}const L=`group relative flex w-full items-center select-none [-webkit-tap-highlight-color:transparent] [touch-action:manipulation] ${F} ${p} ${N}`;export const pickerPopupClasses=`${z} border bg-(--n-panel-press) [border-color:var(--n-line)] [box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)] [outline:none] `+w;export const popupPaddingClasses={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function PickerShell({variant:p="outline",size:N="md",color:w="primary",density:z="default",elevation:F=0,label:B,labelPlacement:M="top",description:T,error:V,invalid:W,startIcon:A,fullWidth:G=!1,disabled:H,readOnly:J=!1,required:K=!1,id:Q,className:U,style:X,display:Y,samples:Z,empty:_,clearable:ee=!1,onClear:ae,open:le,onOpenChange:te,clearLabel:ne,hiddenValues:re,repeats:ie=!1,sideOffset:oe=6,popupClassName:se,initialFocus:de=!1,children:ce,triggerRef:pe,...ue}){const me=S(H),fe=l.useId(),be=Q??`${fe}-trigger`,he=`${fe}-label`,ve=`${fe}-description`,xe=`${fe}-error`,ge=null!=V&&!1!==V&&""!==V,ye=W??ge,Ne=ye?"danger":w,$e=me||J,Pe=d(T?ve:null,ge?xe:null)||void 0,[we,...je]=re??[],Ce="top"!==M&&y(B),ke=Ce&&"float"===M&&!y(A),ze=a("span",{onPointerMove:R(void 0,!$e),className:d(L,u[N],s[N],j[N],g[N],P[z][N],Ce?"":b,me?(Ce?v:c)[p]:J?Ce?`${x[p]} ${C}`:m[p]:`${(Ce?h:f)[p]} ${q}`),children:[a(n.Trigger,{id:be,ref:pe,disabled:me,"aria-labelledby":B?`${he} ${be}`:void 0,"aria-describedby":Pe,"aria-required":K||void 0,"aria-invalid":ye||void 0,"data-placeholder":_||void 0,className:d("flex min-w-0 flex-1 items-center bg-transparent text-start [font:inherit] text-inherit",g[N],"[outline:none]",$e?"cursor-default":"cursor-pointer",ke?"neba-float-control":""),children:[A?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg) transition-[color] duration-(--neba-duration) group-focus-within:text-(--n-accent)",children:A}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{"data-placeholder":_||void 0,className:d("w-full truncate",_?"text-(--neba-muted-fg)":"text-(--neba-fg)"),children:Y}),e(i,{samples:ke?[...Z??[],B]:Z??[]})]})]}),!ee||_||$e?null:e("button",{type:"button","aria-label":ne,className:d(o,"text-(--neba-muted-fg)"),onClick:e=>{e.stopPropagation(),ae()},children:e(r,{})}),Ce?e(D,{label:B,variant:p,disabled:me,readOnly:J,rests:ke,labelId:he,htmlFor:be}):null]});return a(t.Root,{disabled:me,invalid:ye,className:d("relative flex-col align-top",k[N],G?"flex w-full":"inline-flex",U),style:{...O(Ne,F),...$e?void 0:I,...X},...ue,children:[B&&!Ce?e(t.Label,{id:he,htmlFor:be,className:d($[N],"font-medium",me?"text-(--neba-disabled-fg)":"text-(--neba-fg)"),children:B}):null,a(n.Root,{open:le,onOpenChange:e=>te(e),children:[Ce?e(E,{label:B,size:N,density:z,variant:p,children:ze}):ze,e(n.Portal,{children:e(n.Positioner,{className:"neba-portal z-(--neba-z-portal) [outline:none]",sideOffset:oe,align:"start",children:e(n.Popup,{initialFocus:de,className:d(pickerPopupClasses,j[N],popupPaddingClasses[N],s[N],se),style:popupSlots(Ne,3),children:ce})})})]}),T?e(t.Description,{id:ve,className:d($[N],"text-(--neba-muted-fg)"),children:T}):null,e(t.Error,ge?{id:xe,match:!0,className:d($[N],"text-(--n-accent)"),children:V}:{className:d($[N],"text-(--n-accent)")}),we||K&&!$e?e(t.Control,{"aria-hidden":"true",tabIndex:-1,name:we?.name,value:we?we.value:_?"":"chosen",required:K&&!$e,readOnly:J,"data-neba-repeats":ie&&we?"":void 0,onFocus:()=>document.getElementById(be)?.focus(),className:"pointer-events-none absolute start-0 bottom-0 size-px overflow-hidden opacity-0 [clip-path:inset(50%)]"}):null,je.map((a,l)=>e("input",{type:"hidden",name:a.name,value:a.value,disabled:me},l))]})}export function PickerFooter({size:a,children:l}){return e("div",{className:d("flex items-center justify-end border-t pt-1.5","[border-color:var(--n-line)]",g[a]),children:l})}export function PickerDivider(){return e("div",{"aria-hidden":"true",className:"w-px self-stretch bg-(--n-line)"})}

package/dist/internal/progress.d.ts

@@ -134,6 +134,23 @@ export declare const plateGapClasses: Record<NebaSize, string>;
  * one request finished twice is a worse bug than a bar that sits full.
  */
 export declare function progressFraction(value: number | null | undefined, min: number, max: number): number | null;
+/**
+ * The class a progress indicator's or a meter's label is drawn with.
+ *
+ * Each of the four draws its label itself rather than through Base UI's
+ * `Label` part. That part draws the same `<span role="presentation">`, and
+ * then tells the root its id from a layout effect, so the root only wrote
+ * `aria-labelledby` in a second commit after every mount and every hydration,
+ * and a server render named nothing. The id is known while rendering, from
+ * `useId`, so the component writes it on both elements in the first one.
+ */
+export declare const progressLabelClasses = "min-w-0 truncate text-(--neba-fg)";
+/**
+ * The status attribute Base UI's progress parts carry, for the label a
+ * progress indicator draws itself: `data-indeterminate` without a fraction,
+ * `data-complete` at the top of the range, and `data-progressing` below it.
+ */
+export declare function progressStatusAttribute(fraction: number | null, value: number | null | undefined, max: number): Record<string, ''>;
 /**
  * What the value reads as, both on screen and to a screen reader.
  *

package/dist/internal/progress.js

@@ -1 +1 @@
-export function thresholdColor(e,r,s){if(!s||0===s.length)return r;let n=r;for(const r of s)e>=r.from&&(n=r.color);return n}export function progressSlots(e){return{"--n-fill":`var(--neba-${e}-fill)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-line":`var(--neba-${e}-line)`}}export const barThicknessClasses={xs:"h-0.5",sm:"h-[3px]",md:"h-1",lg:"h-1.5",xl:"h-2"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export function progressFraction(e,r,s){return null!=e&&Number.isFinite(e)?s<=r?null:Math.min(1,Math.max(0,(e-r)/(s-r))):null}export function progressText(e,r,s){return null===e?null:s?r:`${Math.round(100*e)}%`}export function progressAriaText(e,r){if(null!==e)return s=>progressText(e,s,r)??""}
+export function thresholdColor(e,r,s){if(!s||0===s.length)return r;let t=r;for(const r of s)e>=r.from&&(t=r.color);return t}export function progressSlots(e){return{"--n-fill":`var(--neba-${e}-fill)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-line":`var(--neba-${e}-line)`}}export const barThicknessClasses={xs:"h-0.5",sm:"h-[3px]",md:"h-1",lg:"h-1.5",xl:"h-2"};export const ringDiameters={xs:14,sm:16,md:20,lg:26,xl:32};export const ringStrokes={xs:1.5,sm:1.75,md:2,lg:2.5,xl:3};export const plateSizeClasses={xs:"size-2",sm:"size-2.5",md:"size-3",lg:"size-4",xl:"size-5"};export const plateRadiusClasses={xs:"rounded-[0.1875rem]",sm:"rounded-[0.25rem]",md:"rounded-[0.28125rem]",lg:"rounded-[0.375rem]",xl:"rounded-[0.4375rem]"};export const plateGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export function progressFraction(e,r,s){return null!=e&&Number.isFinite(e)?s<=r?null:Math.min(1,Math.max(0,(e-r)/(s-r))):null}export const progressLabelClasses="min-w-0 truncate text-(--neba-fg)";export function progressStatusAttribute(e,r,s){return null===e||null==r?{"data-indeterminate":""}:r>=s?{"data-complete":""}:{"data-progressing":""}}export function progressText(e,r,s){return null===e?null:s?r:`${Math.round(100*e)}%`}export function progressAriaText(e,r){if(null!==e)return s=>progressText(e,s,r)??""}

package/dist/internal/refs.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Hands `node` to a ref of either kind, and returns what takes it back.
+ *
+ * For a callback ref that is the cleanup it returned, or a call with `null`
+ * when it returned none. An object ref is cleared only while it still holds
+ * this node, so one that has since been handed another node keeps that one.
+ */
+export declare function attachRef<T>(ref: React.Ref<T> | undefined, node: T): () => void;
+/**
+ * The ref a component puts on its element when a caller may have forwarded one:
+ * `mergeRefs` over the component's own and the caller's.
+ *
+ * Its identity changes only when one of the two refs does, as a `useCallback`
+ * listing both would. An `own` written inline is a new ref on every render, and
+ * React then lets go of the node and takes it again each time.
+ */
+export declare function useMergedRef<T>(own: React.Ref<T> | undefined, ref: React.Ref<T> | undefined): (node: T | null) => void;

package/dist/internal/refs.js

@@ -0,0 +1 @@
+import*as t from"react";const e=()=>{};export function attachRef(t,n){if("function"==typeof t){const e=t(n);return"function"==typeof e?e:()=>{t(null)}}return t?(t.current=n,()=>{t.current===n&&(t.current=null)}):e}export function useMergedRef(n,r){return t.useMemo(()=>function(t,n){let r=e,u=e;return c=>{r(),u(),r=e,u=e,null!==c&&(r=attachRef(t,c),u=attachRef(n,c))}}(n,r),[n,r])}

package/dist/internal/run.d.ts

@@ -13,8 +13,9 @@
  * something runs re-renders on every tick, so how often it ticks is a decision
  * about a whole transcript rather than about one row: a page holding twenty
  * running tool calls at ten frames a second is two hundred renders a second for
- * a number nobody is reading that closely. It ticks once a second, and says
- * nothing at all until the first one has passed.
+ * a number nobody is reading that closely. It ticks once a second, on one timer
+ * for the whole page, says nothing at all until the first second has passed,
+ * and redraws only the number.
  */
 import * as React from 'react';
 import type { NebaColor, NebaRunStatus } from '../types.js';
@@ -54,25 +55,39 @@ export declare function runColor(status: NebaRunStatus, color: NebaColor): NebaC
  * browser can never disagree about it.
  */
 export declare function formatDuration(ms: number, locale?: string): string;
+/** A run's clock, as the component around the run keeps it. */
+export interface RunClock {
+    /** When the run that is going now started, by `Date.now()`, or `null`. */
+    since: number | null;
+    /** How long it took: a `duration` the caller knows, or the run measured as it ended. */
+    total: number | null;
+}
 /**
- * How long a run has been going, in milliseconds, or `null`.
+ * When a run started and how long it took, without counting in between.
  *
- * A `duration` the caller knows wins outright; without one the clock counts,
- * and what it counts is *whole seconds*, because a component that re-renders
- * ten times a second is a decision about a whole transcript rather than about
- * one row.
+ * A `duration` the caller knows wins outright. Without one, the start is taken
+ * when the run starts and the run is **measured once more** when it ends,
+ * which is what turns a live count into a total: left at the last tick, a run
+ * of 4.9 seconds would say 4, and one under a second would say nothing at all,
+ * where a `duration` of the same length says "4.9s" or "900ms". It is cleared
+ * when a new run starts, so a retried call counts its own attempt rather than
+ * carrying the first one's number forward.
  *
- * `null` is "there is nothing to say", and the first second of every run
- * returns it: a counter that starts at "0s" claims a precision the tick rate
- * does not have, and a tool that answers in 300ms would have spent its whole
- * life saying zero.
+ * This hook does not tick, so the component that holds it renders when a run
+ * starts and when it ends and at no point in between. The count belongs to
+ * `RunTime`, a component of its own, so a second going by redraws a number
+ * rather than the row, the panel and everything in them; and a Reasoning, which
+ * says "Thinking" until it is done, has nothing to redraw at all.
+ */
+export declare function useRunClock(running: boolean, duration: number | undefined): RunClock;
+/**
+ * The time a run has taken, as text: the total once there is one, and the
+ * running count until then. Nothing at all while there is neither.
  *
- * Once the run ends the figure is **measured once more** and kept, which is
- * what turns a live count into a total. Measured rather than left at the last
- * tick: a run of 4.9 seconds would otherwise say 4, and one under a second
- * would say nothing at all, where a `duration` of the same length says "4.9s"
- * or "900ms".
- * It is cleared when a new run starts, so a retried call counts its own attempt
- * rather than carrying the first one's number forward.
+ * A component rather than a hook, so that the one thing that changes every
+ * second is the only thing that renders every second.
  */
-export declare function useElapsed(running: boolean, duration: number | undefined): number | null;
+export declare function RunTime({ since, total, locale, className }: RunClock & {
+    locale?: string;
+    className?: string;
+}): React.ReactElement | null;

package/dist/internal/run.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as t from"react";import{useLayoutEffectOnClient as e}from"./layout-effect.js";import{CircleIcon as n,DangerIcon as u,SpinnerIcon as o,SuccessIcon as s}from"./icons.js";import{numberFormatter as i}from"./format.js";export function runIcon(t){switch(t){case"running":return r(o,{});case"success":return r(s,{});case"error":return r(u,{});default:return r(n,{})}}export function runColor(r,t){switch(r){case"success":return"success";case"error":return"danger";case"pending":return"secondary";default:return t}}export function formatDuration(r,t){if(!Number.isFinite(r)||r<0)return"";const e=t??"en";if(r<1e3)return i(e,{style:"unit",unit:"millisecond",unitDisplay:"narrow",maximumFractionDigits:0}).format(Math.round(r));const n=r/1e3;return i(e,{style:"unit",unit:"second",unitDisplay:"narrow",maximumFractionDigits:n<10?1:0}).format(n)}export function useElapsed(r,n){const u=r&&void 0===n,[o,s]=t.useState(null),[i,c]=t.useState(u);i!==u&&(c(u),u&&s(null));const a=t.useRef(null);return e(()=>{if(!u)return;const r=Date.now(),t=setInterval(()=>s(Date.now()-r),1e3);return()=>{clearInterval(t),a.current=Date.now()-r}},[u]),e(()=>{u||null===a.current||(s(a.current),a.current=null)},[u]),n??o}
+"use client";import{jsx as t}from"react/jsx-runtime";import*as n from"react";import{useLayoutEffectOnClient as e}from"./layout-effect.js";import{CircleIcon as r,DangerIcon as u,SpinnerIcon as o,SuccessIcon as s}from"./icons.js";import{numberFormatter as l}from"./format.js";export function runIcon(n){switch(n){case"running":return t(o,{});case"success":return t(s,{});case"error":return t(u,{});default:return t(r,{})}}export function runColor(t,n){switch(t){case"success":return"success";case"error":return"danger";case"pending":return"secondary";default:return n}}export function formatDuration(t,n){if(!Number.isFinite(t)||t<0)return"";const e=n??"en";if(t<1e3)return l(e,{style:"unit",unit:"millisecond",unitDisplay:"narrow",maximumFractionDigits:0}).format(Math.round(t));const r=t/1e3;return l(e,{style:"unit",unit:"second",unitDisplay:"narrow",maximumFractionDigits:r<10?1:0}).format(r)}const c=new Set;let a;export function useRunClock(t,r){const u=t&&void 0===r,[o,s]=n.useState(null),[l,c]=n.useState(null),[a,i]=n.useState(u);a!==u&&(i(u),u&&(s(null),c(null)));const f=n.useRef(null);return e(()=>{if(!u)return;const t=Date.now();return s(t),()=>{f.current=Date.now()-t}},[u]),e(()=>{u||null===f.current||(c(f.current),f.current=null)},[u]),{since:u?o:null,total:r??l}}function i(t){const[e,r]=n.useState(null),[u,o]=n.useState(t);return u!==t&&(o(t),r(null)),n.useEffect(()=>{var n;if(null!==t)return n=()=>{const n=Date.now()-t;n>=1e3&&r(1e3*Math.floor(n/1e3))},c.add(n),a??=setInterval(()=>{for(const t of[...c])t()},1e3),()=>{c.delete(n),0===c.size&&(clearInterval(a),a=void 0)}},[t]),null===t?null:e}export function RunTime({since:n,total:e,locale:r,className:u}){const o=i(null===e?n:null),s=e??o;return null===s?null:t("span",{className:u,children:formatDuration(s,r)})}

package/dist/internal/sizer.d.ts

@@ -1,12 +1,17 @@
-import type * as React from 'react';
+import * as React from 'react';
 /**
  * The samples a `WidthSizer` needs, out of all of them.
  *
  * Only the widest sample decides the width, so a Select with two hundred and
  * fifty countries was two hundred and fifty boxes laid out for the sake of one.
- * A string is kept when it is long enough to be the widest and dropped
- * otherwise. Anything that is not a string is kept whatever it is, since
- * nothing short of laying it out says how wide a node is.
+ * A sample is kept when the text it draws is long enough to be the widest and
+ * dropped otherwise, and that holds for a node as much as for a string: a
+ * country list whose labels each carry a flag `<img>` laid out, and fetched,
+ * every flag on the page before the list was ever opened.
+ *
+ * A node whose children hold no text at all is kept whatever its neighbours
+ * say. It may be a picture, or a component that draws words of its own, and
+ * nothing short of laying it out says how wide either is.
  */
 export declare function widestSamples(samples: readonly React.ReactNode[]): React.ReactNode[];
 /**

package/dist/internal/sizer.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";const t=/[\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]/g;function a(e){return e.length+(e.match(t)?.length??0)}export function widestSamples(e){let t=0;for(const n of e)"string"==typeof n&&(t=Math.max(t,a(n)));return e.filter(e=>"string"!=typeof e||a(e)>=.4*t)}export function WidthSizer({samples:t}){return 0===t.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:t.map((t,a)=>"string"==typeof t?e("span",{"data-sample":t,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${a}:${t}`):e("span",{className:"block whitespace-nowrap",children:t},a))})}
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";const r=/[\u1100-\u115f\u2e80-\ua4cf\uac00-\ud7a3\uf900-\ufaff\ufe30-\ufe4f\uff00-\uff60\uffe0-\uffe6]/g;function n(e){if("string"==typeof e)return e;if("number"==typeof e||"bigint"==typeof e)return String(e);if(Array.isArray(e)){let t="";for(const r of e)t+=n(r);return t}return t.isValidElement(e)?n(e.props.children):""}export function widestSamples(e){const t=e.map(e=>{const t=n(e);return"string"!=typeof e&&""===t.trim()?-1:function(e){return e.length+(e.match(r)?.length??0)}(t)});let a=0;for(const e of t)a=Math.max(a,e);return e.filter((e,r)=>-1===t[r]||t[r]>=.4*a)}export function WidthSizer({samples:t}){return 0===t.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:t.map((t,r)=>"string"==typeof t?e("span",{"data-sample":t,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${r}:${t}`):e("span",{className:"block whitespace-nowrap",children:t},r))})}

package/dist/internal/styles.d.ts

@@ -464,6 +464,12 @@ export declare function clampClasses(lines: number): string;
 export declare function clampSlot(lines: number | undefined): React.CSSProperties | undefined;
 /** Icons track their label rather than carrying a size of their own. */
 export declare const iconClasses = "[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";
+/**
+ * A Select's trigger: a TextField's shell, to the pixel. Here rather than in
+ * `Select.tsx` because a DataTable's rows-per-page control draws the closed
+ * Select before the Select's own chunk arrives, and the two must not drift.
+ */
+export declare const selectTriggerClasses: string;
 /**
  * A Base UI **Collapsible** panel: Collapsible itself, and the three agent
  * components built on the same primitive.
@@ -683,6 +689,14 @@ export declare function hasContent(node: React.ReactNode): boolean;
  * length.
  */
 export declare function toLength(value: number | string | undefined): string | undefined;
+/**
+ * Which of the four units a length is written in, or `undefined` for a string
+ * `toPixels` would not read. The same test `toPixels` makes, without converting:
+ * converting a `rem` reads the root's font size, which is a style read, and a
+ * render that only needs to know *whether* something is a length has no reason
+ * to make one.
+ */
+export declare function lengthUnit(value: string): 'px' | 'rem' | 'em' | '%' | undefined;
 /**
  * The other direction: a CSS length a caller wrote, as the number a drag can do
  * arithmetic on.

package/dist/internal/styles.js

@@ -1 +1 @@
-export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const fieldHeightClasses={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"};export const controlHeightValues={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"};export const measureWidths={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"number"==typeof e?`${e}px`:measureWidths[e]??e}export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const metaTextValues={xs:"0.625rem",sm:"0.6875rem",md:"0.75rem",lg:"0.8125rem",xl:"0.875rem"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetTitleHeadingClasses="neba-title [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:[font:inherit] [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:m-0 [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit] [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:m-0";export const headingTitleClasses={xs:"[&.neba-heading]:text-[0.75rem]/[1rem]",sm:"[&.neba-heading]:text-[0.8125rem]/[1.125rem]",md:"[&.neba-heading]:text-[0.9375rem]/[1.25rem]",lg:"[&.neba-heading]:text-[1.0625rem]/[1.5rem]",xl:"[&.neba-heading]:text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const optionGapClasses={vertical:sheetSectionGapClasses,horizontal:{xs:"gap-x-5 gap-y-1.5",sm:"gap-x-5 gap-y-2",md:"gap-x-5 gap-y-3",lg:"gap-x-5 gap-y-3.5",xl:"gap-x-5 gap-y-4"}};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const ringRestClasses="[outline:0_solid_transparent]";export const transitionClasses=`${ringRestClasses} [transition-property:background-color,border-color,box-shadow,color,outline-color] [transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration),var(--neba-duration)] [transition-timing-function:var(--neba-ease)]`;export const pressTransitionClasses="active:[transition-duration:0ms]";export const popupFadeStateClasses="data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";export const popupFadeClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease)] "+popupFadeStateClasses;export const focusRingClasses=`${ringRestClasses} outline-offset-2 focus-visible:[outline:2px_solid_var(--n-ring)]`;export const insetRingClasses=`${ringRestClasses} outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]`;export const focusWithinRingClasses=`${ringRestClasses} outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] supports-[not_selector(:has(*))]:focus-within:[outline:2px_solid_var(--n-ring)]`;export const fieldRingClasses=`${ringRestClasses} outline-offset-0 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)]`;export const fieldFocusTransitionClasses="focus-within:[transition-duration:var(--neba-duration)]";export function clampClasses(e){return e>1?"line-clamp-(--n-lines)":"truncate"}export function clampSlot(e){return void 0!==e&&e>1?{"--n-lines":Math.floor(e)}:void 0}export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";const e="[transition:height_var(--neba-duration)_var(--neba-ease)] motion-reduce:[transition-duration:0ms] data-[starting-style]:h-0 data-[ending-style]:h-0";export const collapsiblePanelClasses=`h-(--collapsible-panel-height) overflow-hidden ${e}`;export const accordionPanelClasses=`h-(--accordion-panel-height) overflow-hidden ${e}`;export const disclosureTriggerClasses="group/disclosure";export const disclosureChevronClasses="flex h-[1lh] shrink-0 items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] group-data-[panel-open]/disclosure:rotate-180";export const preformattedClasses="m-0 overflow-auto rounded-(--neba-radius-sm) bg-(--neba-groove) p-2 font-mono text-[0.9em]/[1.5] whitespace-pre";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,t){const n="solid"===t;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const tintPlateClasses="neba-tint-plate";export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)] hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)] focus-within:hover:[border-color:var(--n-ring)]`,text:"text-(--neba-fg) bg-transparent hover:bg-(--n-soft) focus-within:bg-(--n-soft-hover) focus-within:hover:bg-(--n-soft-hover)"};export const fieldReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]`,text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const fieldSheetClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-hover) focus-within:bg-(--n-panel-hover)`,text:fieldRestClasses.text};export const fieldSheetReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel)`,text:"text-(--neba-fg) bg-transparent"};export const fieldSheetDisabledClasses={solid:disabledClasses.solid,outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:transparent] shadow-none",text:disabledClasses.text};export const citationMarkClasses="inline-flex shrink-0 items-center justify-center rounded-[0.3em] min-w-[1.5em] px-[0.35em] py-[0.05em] bg-(--n-soft) text-[0.8em]/[1.6] font-semibold text-(--n-on-tint) tabular-nums";export const chipRemoveClasses="relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full size-[1.15em] cursor-pointer opacity-70 neba-hit [transition:opacity_var(--neba-duration)_var(--neba-ease)] hover:opacity-100 focus-visible:opacity-100 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1 disabled:cursor-not-allowed";export const sheetCloseClasses="relative flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center rounded-full text-(--neba-muted-fg) neba-hit [&_svg]:size-[1.1em] [&_svg]:shrink-0 [transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)] hover:bg-(--n-soft) hover:text-(--neba-fg) focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const s=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function toPixels(e,n){const r=s.exec(e);if(!r)return;const a=Number(r[1]);if(!Number.isNaN(a))switch(r[2]){case"px":return a;case"%":return n.percentOf*a/100;case"em":return a*t(n.relativeTo);default:return a*t("undefined"==typeof document?null:document.documentElement)}}function t(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}
+export const radiusClasses={xs:"rounded-(--neba-radius-xs)",sm:"rounded-(--neba-radius-sm)",md:"rounded-(--neba-radius-md)",lg:"rounded-(--neba-radius-lg)",xl:"rounded-(--neba-radius-xl)"};export const controlHeightClasses={xs:"h-5.5",sm:"h-6.5",md:"h-8",lg:"h-10",xl:"h-12"};export const fieldHeightClasses={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"};export const controlHeightValues={xs:"1.375rem",sm:"1.625rem",md:"2rem",lg:"2.5rem",xl:"3rem"};export const measureWidths={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"number"==typeof e?`${e}px`:measureWidths[e]??e}export const controlSquareClasses={xs:"w-5.5",sm:"w-6.5",md:"w-8",lg:"w-10",xl:"w-12"};export const controlTextClasses={xs:"text-[0.6875rem]",sm:"text-[0.75rem]",md:"text-[0.8125rem]",lg:"text-[0.9375rem]",xl:"text-[1.0625rem]"};export const controlTextLeadingClasses={xs:"text-[0.6875rem]/[0.875rem]",sm:"text-[0.75rem]/[1rem]",md:"text-[0.8125rem]/[1.25rem]",lg:"text-[0.9375rem]/[1.375rem]",xl:"text-[1.0625rem]/[1.625rem]"};export const metaTextClasses={xs:"text-[0.625rem]",sm:"text-[0.6875rem]",md:"text-[0.75rem]",lg:"text-[0.8125rem]",xl:"text-[0.875rem]"};export const metaTextValues={xs:"0.625rem",sm:"0.6875rem",md:"0.75rem",lg:"0.8125rem",xl:"0.875rem"};export const paddingXClasses={default:{xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}};export const iconSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-5",lg:"size-6",xl:"size-7"};export const tickSizeClasses={xs:"size-3.5",sm:"size-4",md:"size-4.5",lg:"size-5",xl:"size-6"};export const tickRadiusClasses={xs:"rounded-[0.25rem]",sm:"rounded-[0.3125rem]",md:"rounded-[0.375rem]",lg:"rounded-[0.4375rem]",xl:"rounded-[0.5rem]"};export const tickDotClasses={xs:"size-1.5",sm:"size-1.5",md:"size-2",lg:"size-2",xl:"size-2.5"};export const tickRowLeadingClasses="leading-[1.4]";export const hitAreaClasses="neba-hit";export const paddingXValues={default:{xs:"0.625rem",sm:"0.75rem",md:"1rem",lg:"1.25rem",xl:"1.5rem"},compact:{xs:"0.375rem",sm:"0.5rem",md:"0.625rem",lg:"0.75rem",xl:"1rem"}};export const gapClasses={xs:"gap-1",sm:"gap-1.5",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"};export const stackGapClasses={xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-1.5",xl:"gap-2"};export const sheetTitleClasses={xs:"text-[0.75rem]/[1rem]",sm:"text-[0.8125rem]/[1.125rem]",md:"text-[0.9375rem]/[1.25rem]",lg:"text-[1.0625rem]/[1.5rem]",xl:"text-[1.25rem]/[1.75rem]"};export const sheetTitleHeadingClasses="neba-title [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:[font:inherit] [&.neba-title_:where(h1,h2,h3,h4,h5,h6):not([class])]:m-0 [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit] [:where(&)_:where(h1,h2,h3,h4,h5,h6)]:m-0";export const headingTitleClasses={xs:"[&.neba-heading]:text-[0.75rem]/[1rem]",sm:"[&.neba-heading]:text-[0.8125rem]/[1.125rem]",md:"[&.neba-heading]:text-[0.9375rem]/[1.25rem]",lg:"[&.neba-heading]:text-[1.0625rem]/[1.5rem]",xl:"[&.neba-heading]:text-[1.25rem]/[1.75rem]"};export const sheetBodyClasses={xs:"text-[0.6875rem]/[1rem]",sm:"text-[0.75rem]/[1.125rem]",md:"text-[0.8125rem]/[1.375rem]",lg:"text-[0.9375rem]/[1.5rem]",xl:"text-[1.0625rem]/[1.75rem]"};export const sheetHeaderGapClasses={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const sheetSectionGapClasses={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const optionGapClasses={vertical:sheetSectionGapClasses,horizontal:{xs:"gap-x-5 gap-y-1.5",sm:"gap-x-5 gap-y-2",md:"gap-x-5 gap-y-3",lg:"gap-x-5 gap-y-3.5",xl:"gap-x-5 gap-y-4"}};export const surfaceClasses="[background-image:var(--neba-grain),var(--neba-sheen)] [background-blend-mode:overlay,normal] [backdrop-filter:var(--neba-blur)]";export const ringRestClasses="[outline:0_solid_transparent]";export const transitionClasses=`${ringRestClasses} [transition-property:background-color,border-color,box-shadow,color,outline-color] [transition-duration:var(--neba-duration-fill),var(--neba-duration),var(--neba-duration),var(--neba-duration),var(--neba-duration)] [transition-timing-function:var(--neba-ease)]`;export const pressTransitionClasses="active:[transition-duration:0ms]";export const popupFadeStateClasses="data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";export const popupFadeClasses="[transition:opacity_var(--neba-duration)_var(--neba-ease)] "+popupFadeStateClasses;export const focusRingClasses=`${ringRestClasses} outline-offset-2 focus-visible:[outline:2px_solid_var(--n-ring)]`;export const insetRingClasses=`${ringRestClasses} outline-offset-[-2px] focus-visible:[outline:2px_solid_var(--n-ring)]`;export const focusWithinRingClasses=`${ringRestClasses} outline-offset-2 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)] supports-[not_selector(:has(*))]:focus-within:[outline:2px_solid_var(--n-ring)]`;export const fieldRingClasses=`${ringRestClasses} outline-offset-0 has-[:focus-visible]:[outline:2px_solid_var(--n-ring)]`;export const fieldFocusTransitionClasses="focus-within:[transition-duration:var(--neba-duration)]";export function clampClasses(e){return e>1?"line-clamp-(--n-lines)":"truncate"}export function clampSlot(e){return void 0!==e&&e>1?{"--n-lines":Math.floor(e)}:void 0}export const iconClasses="[&_svg]:pointer-events-none [&_svg]:size-[1.2em] [&_svg]:shrink-0";export const selectTriggerClasses=`group relative flex w-full cursor-pointer items-center select-none [-webkit-tap-highlight-color:transparent] [touch-action:manipulation] ${transitionClasses} ${fieldFocusTransitionClasses} ${iconClasses}`;const e="[transition:height_var(--neba-duration)_var(--neba-ease)] motion-reduce:[transition-duration:0ms] data-[starting-style]:h-0 data-[ending-style]:h-0";export const collapsiblePanelClasses=`h-(--collapsible-panel-height) overflow-hidden ${e}`;export const accordionPanelClasses=`h-(--accordion-panel-height) overflow-hidden ${e}`;export const disclosureTriggerClasses="group/disclosure";export const disclosureChevronClasses="flex h-[1lh] shrink-0 items-center [transition:rotate_var(--neba-duration)_var(--neba-ease)] group-data-[panel-open]/disclosure:rotate-180";export const preformattedClasses="m-0 overflow-auto rounded-(--neba-radius-sm) bg-(--neba-groove) p-2 font-mono text-[0.9em]/[1.5] whitespace-pre";export const srOnlyClasses="absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";export function controlSlots(e,s,t){const n="solid"===t;return{"--n-fill":`var(--neba-${e}-fill)`,"--n-fill-hover":`var(--neba-${e}-fill-hover)`,"--n-fill-active":`var(--neba-${e}-fill-active)`,"--n-on-solid":`var(--neba-${e}-on-solid)`,"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":`var(--neba-${e}-panel)`,"--n-panel-hover":`var(--neba-${e}-panel-hover)`,"--n-panel-press":`var(--neba-${e}-panel-press)`,"--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-glow":n?"var(--neba-glow-on-fill)":`var(--neba-${e}-soft)`,"--n-flash":n?"var(--neba-flash-on-fill)":`var(--neba-${e}-soft-press)`,"--n-elev":`var(--neba-shadow-${s})`,"--n-elev-hover":`var(--neba-shadow-${Math.min(s+1,4)})`,"--n-elev-press":`var(--neba-shadow-${Math.max(s-1,0)})`}}export function surfaceSlots(e,s){return{"--n-accent":`var(--neba-${e}-accent)`,"--n-soft":`var(--neba-${e}-soft)`,"--n-soft-hover":`var(--neba-${e}-soft-hover)`,"--n-soft-press":`var(--neba-${e}-soft-press)`,"--n-on-tint":`var(--neba-${e}-on-tint)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-panel-press":"var(--neba-panel-press)","--n-line":`var(--neba-${e}-line)`,"--n-line-hover":`var(--neba-${e}-line-hover)`,"--n-ring":`var(--neba-${e}-ring)`,"--n-elev":`var(--neba-shadow-${s})`}}export const tintPlateClasses="neba-tint-plate";export const disabledClasses={solid:"cursor-not-allowed bg-(--neba-disabled-bg) text-(--neba-disabled-fg) shadow-none",outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:var(--neba-disabled-border)] shadow-none",text:"cursor-not-allowed bg-transparent text-(--neba-disabled-fg) shadow-none"};export const fieldRestClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev),var(--neba-plate-solid)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--n-elev),var(--neba-plate-glass)] hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)] focus-within:bg-(--n-panel-hover) focus-within:[border-color:var(--n-ring)] focus-within:hover:[border-color:var(--n-ring)]`,text:"text-(--neba-fg) bg-transparent hover:bg-(--n-soft) focus-within:bg-(--n-soft-hover) focus-within:hover:bg-(--n-soft-hover)"};export const fieldReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--neba-plate-solid)] [filter:saturate(0.55)]`,outline:`${surfaceClasses} border text-(--neba-fg) bg-(--n-panel) [border-color:var(--n-line)] [box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]`,text:"text-(--neba-fg) bg-transparent [filter:saturate(0.55)]"};export const readOnlyFilterClasses="[filter:saturate(0.55)]";export const fieldSheetClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-press) focus-within:bg-(--n-panel-press)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel) [box-shadow:var(--n-elev)] hover:bg-(--n-panel-hover) focus-within:bg-(--n-panel-hover)`,text:fieldRestClasses.text};export const fieldSheetReadOnlyClasses={solid:`${surfaceClasses} text-(--neba-fg) bg-(--n-panel-hover)`,outline:`${surfaceClasses} border [border-color:transparent] text-(--neba-fg) bg-(--n-panel)`,text:"text-(--neba-fg) bg-transparent"};export const fieldSheetDisabledClasses={solid:disabledClasses.solid,outline:"cursor-not-allowed border bg-transparent text-(--neba-disabled-fg) [border-color:transparent] shadow-none",text:disabledClasses.text};export const citationMarkClasses="inline-flex shrink-0 items-center justify-center rounded-[0.3em] min-w-[1.5em] px-[0.35em] py-[0.05em] bg-(--n-soft) text-[0.8em]/[1.6] font-semibold text-(--n-on-tint) tabular-nums";export const chipRemoveClasses="relative ms-0.5 inline-flex shrink-0 items-center justify-center rounded-full size-[1.15em] cursor-pointer opacity-70 neba-hit [transition:opacity_var(--neba-duration)_var(--neba-ease)] hover:opacity-100 focus-visible:opacity-100 focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1 disabled:cursor-not-allowed";export const sheetCloseClasses="relative flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center rounded-full text-(--neba-muted-fg) neba-hit [&_svg]:size-[1.1em] [&_svg]:shrink-0 [transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)] hover:bg-(--n-soft) hover:text-(--neba-fg) focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2";export function hasContent(e){return null!=e&&!1!==e&&""!==e}export function toLength(e){if(null!=e)return"number"==typeof e?`${e}px`:e}const s=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/;export function lengthUnit(e){const t=s.exec(e);if(t&&!Number.isNaN(Number(t[1])))return t[2]}export function toPixels(e,n){const r=s.exec(e);if(!r)return;const a=Number(r[1]);if(!Number.isNaN(a))switch(r[2]){case"px":return a;case"%":return n.percentOf*a/100;case"em":return a*t(n.relativeTo);default:return a*t("undefined"==typeof document?null:document.documentElement)}}function t(e){return e&&"undefined"!=typeof getComputedStyle&&parseFloat(getComputedStyle(e).fontSize)||16}export function cx(...e){return e.filter(Boolean).join(" ")}

package/dist/internal/tile.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Keeps a sliding tile on the item it marks while the items change under it.
+ *
+ * A SegmentedButton and a FloatingBottomNavigation draw one tile behind the
+ * current item and measure that item to place it. A value change is a render
+ * of the component and is measured there. What is not is a change to the items
+ * themselves: a label that grew, a font that arrived, the set reordered by its
+ * caller. Both components used to catch those by measuring again whenever their
+ * `children` changed identity, which is every render of whatever is above them,
+ * and every one of those measurements laid the page out to read four offsets
+ * that had not moved.
+ *
+ * So the items are watched instead, and nothing is measured unless something
+ * happened to them:
+ *
+ * - **The root's size**, with no animation. That is the container moving under
+ *   a tile that was already in the right place, and a tile that slides there
+ *   lags behind a window being dragged.
+ * - **Each item's size**, animated, as a label change always was.
+ * - **The set itself**, through a `MutationObserver` on the root: an item added,
+ *   removed or moved, and the attribute that marks the current one moving to
+ *   another node, which is what a reorder of unkeyed items looks like.
+ *
+ * The root is observed before any item, and that order is load-bearing. One
+ * `ResizeObserver` delivers its entries in the order its targets were added,
+ * so when a resize of the root resizes the items with it, the instant
+ * placement lands first and the animated ones that follow find the tile
+ * already there. The other way round, the animated one starts a transition and
+ * the instant one, asking for the same box, cannot stop it.
+ *
+ * `items` selects every item and `current` names the attribute on the current
+ * one. Returns what stops all three.
+ */
+export declare function watchTile(root: HTMLElement, items: string, current: string, measure: (animate: boolean) => void): () => void;

package/dist/internal/tile.js

@@ -0,0 +1 @@
+import{observeResize as e}from"./observe.js";export function watchTile(t,o,r,s){const n=e(t,()=>s(!1)),c=new Map,i=()=>{const r=new Set(t.querySelectorAll(o));for(const[e,t]of c)r.has(e)||(t(),c.delete(e));for(const t of r)c.has(t)||c.set(t,e(t,()=>s(!0)))};i();const a=new MutationObserver(()=>{i(),s(!0)});return a.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[r]}),()=>{n(),a.disconnect();for(const e of c.values())e();c.clear()}}

package/dist/internal/wheel.d.ts

@@ -18,7 +18,11 @@
  * Held only where there is a strip to hold it. A bar that fits in its box takes
  * nothing at all, which is what makes it safe to leave on: three tabs in a row
  * are not a scroll container as far as the reader is concerned, and must not
- * behave like one.
+ * behave like one. And it takes no listener either, which is what
+ * `bindAxisWheelWhileOverflowing` is for: a wheel listener that can cancel the
+ * scroll makes the browser ask the page's main thread before it scrolls
+ * anything under it, so every tab bar on a page held up the page's own scroll
+ * while the pointer crossed it, whether the bar could scroll or not.
  *
  * Two gestures are deliberately left alone. A wheel held with Ctrl is a zoom. A
  * trackpad swiping sideways is already travel along the strip, and the browser
@@ -36,3 +40,22 @@
  * if the page does not answer it as well.
  */
 export declare function bindAxisWheel(el: HTMLElement): () => void;
+/** What `bindAxisWheelWhileOverflowing` hands back. */
+export interface AxisWheelBinding {
+    /** Measures the strip again, and takes or drops the wheel to match. */
+    check: () => void;
+    /** The teardown. */
+    stop: () => void;
+}
+/**
+ * `bindAxisWheel`, attached only while the strip overflows along its width —
+ * the one case its handler acts on, measured the same way.
+ *
+ * `check` is for the caller to run whenever it measures the strip anyway: on a
+ * scroll, a resize, a change in what it holds. The strip also checks when a
+ * pointer arrives over it, because a label can grow without resizing anything
+ * an observer is watching, and a wheel can only reach the strip through a
+ * pointer that is over it. The reads come first and nothing is written, so a
+ * caller can run it ahead of its own writes without forcing a layout.
+ */
+export declare function bindAxisWheelWhileOverflowing(el: HTMLElement): AxisWheelBinding;

package/dist/internal/wheel.js

@@ -1 +1 @@
-export function bindAxisWheel(e){const t=t=>{if(t.defaultPrevented)return;if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;if(e.scrollWidth-e.clientWidth<=1)return;const r=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,l=t.deltaY*r;if(!l)return;t.preventDefault();const n="rtl"===getComputedStyle(e).direction;e.scrollBy({left:n?-l:l,behavior:"auto"})};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)}
+export function bindAxisWheel(e){const t=t=>{if(t.defaultPrevented)return;if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;if(e.scrollWidth-e.clientWidth<=1)return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,l=t.deltaY*n;if(!l)return;t.preventDefault();const r="rtl"===getComputedStyle(e).direction;e.scrollBy({left:r?-l:l,behavior:"auto"})};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)}export function bindAxisWheelWhileOverflowing(e){let t=null;const n=()=>{const n=e.scrollWidth-e.clientWidth>1;n&&!t?t=bindAxisWheel(e):!n&&t&&(t(),t=null)};return e.addEventListener("pointerenter",n),n(),{check:n,stop(){e.removeEventListener("pointerenter",n),t?.(),t=null}}}