@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","names":[],"sources":["../../src/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cnAll } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * ScrollArea. React Aria has no equivalent, so this is a plain scrolling\n * div -- and that is the honest answer rather than a shortcut.\n *\n * Census: fourteen paths match, thirteen are counted, ELEVEN render\n * anything, and across them 17 uses. Every single one passes `className`\n * and nothing else, and 13 of the 17 are a height or flex constraint plus\n * padding. `ScrollBar` is exported by the legacy and imported by nobody.\n * `orientation=\"horizontal\"` has zero call sites.\n *\n * So there is no styled-scrollbar requirement to port. The legacy pays for\n * one anyway: Radix injects a `<style>` tag that hides the native\n * scrollbar, then re-draws it in JavaScript with a ResizeObserver, a\n * portal-free overlay and a `display: table` content wrapper. That is a\n * lot of machinery to reproduce a scrollbar, and it is why the legacy\n * `ScrollArea` cannot be scrolled by keyboard at all.\n *\n * Tailwind 4.3.3 ships `scrollbar-width` and `scrollbar-color` utilities\n * (verified in the installed dist, not assumed), which gets the same look\n * in three classes and no JavaScript.\n *\n * WHAT CANNOT BE STYLED, stated rather than glossed: `scrollbar-color`\n * takes a thumb and a track colour and nothing else -- no width in pixels,\n * no radius, no hover state, no margins. `::-webkit-scrollbar` can do\n * those but is non-standard and Firefox has never supported it. This\n * component uses the standard properties only.\n */\nexport const scrollAreaVariants = cva([\n  \"overflow-y-auto overscroll-contain\",\n  \"box-border\",\n  // Standard scrollbar properties. thumb = --color-border (5.25:1 on the\n  // page), track transparent so it does not draw a channel.\n  \"scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent\",\n  // A scrollable region must be reachable by keyboard, or its content is\n  // unreachable without a pointer -- WCAG 2.1.1, and axe's\n  // scrollable-region-focusable rule. The legacy has no tabIndex at all,\n  // so all 17 of its scroll areas are keyboard traps in the other\n  // direction: you can see the content but never scroll to it.\n  \"outline-none\",\n  \"focus-visible:outline-solid\",\n  \"focus-visible:outline-(length:--focus-ring-width)\",\n  \"focus-visible:outline-offset-(--focus-ring-offset)\",\n  \"focus-visible:outline-(--color-ring)\",\n]);\n\n/**\n * A scrolling region.\n *\n * @example\n * <ScrollArea label=\"Chat messages\" className=\"h-64\">...</ScrollArea>\n */\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n  /**\n   * Names the scrolling region.\n   *\n   * **Required**, and it took a failing test to get here. A focusable\n   * element with no role fails axe `focus-order-semantics`, so the\n   * keyboard fix below cannot ship without a role -- and a role with no\n   * accessible name is a violation of its own. Naming it is the only\n   * combination that is actually correct.\n   *\n   * `role=\"region\"` specifically. `group` was the first attempt -- it is\n   * lighter, since region is a landmark and seventeen landmarks in one app\n   * is noise -- but axe does not accept `group` as an appropriate role for\n   * a focusable element, and it is right: a named region is the role the\n   * ARIA practices name for a scrollable content area, and being able to\n   * jump to it is the point.\n   */\n  label: string;\n  /**\n   * Fade the content out at an edge by exactly as much as there is content hidden\n   * past it, up to this many pixels: the fade grows in with the first pixels of\n   * scroll and is gone at the ends. `0` turns it off, and the default leaves the\n   * area as it was. Written on each scroll frame straight to the element, so\n   * scrolling never re-renders.\n   *\n   * @default 0\n   */\n  fade?: number;\n  /**\n   * Change this when the contents change, and the region scrolls back to the\n   * top.\n   *\n   * This stays a declarative prop even though a `ref` now exists: reaching\n   * for it would mean the caller writes `ref.current.scrollTop = 0` in their\n   * own effect on every content change, which is worse ergonomics than a\n   * prop that says \"reset when this value changes.\" That is a design choice\n   * independent of whether a ref is available, not a consequence of one\n   * being withheld.\n   *\n   * Sheet forwards its own `scrollResetKey` straight through: going a level\n   * deeper in a panel and landing halfway down the new view is disorienting,\n   * and it is exactly the thing every call site forgets.\n   */\n  scrollResetKey?: string | number;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  { className, children, label, scrollResetKey, fade = 0, onScroll, ...props },\n  ref,\n) {\n  const region = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    // Unconditional rather than guarded on scrollResetKey being set: with no\n    // key this runs once on mount, where scrollTop is already 0.\n    if (region.current) region.current.scrollTop = 0;\n  }, [scrollResetKey]);\n\n  // Memoized, not called inline on the div below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach the DOM ref on every re-render instead of\n  // only on mount, which matters here more than most, since ScrollArea's own\n  // purpose is wrapping content that re-renders often.\n  const rootRef = useMemo(() => mergeRefs(ref, region), [ref, region]);\n\n  // The fade at each edge is how much content is hidden past it, up to `fade`.\n  const syncFade = () => {\n    const node = region.current;\n    if (!node || fade <= 0) return;\n    const max = Math.max(0, node.scrollHeight - node.clientHeight);\n    node.style.setProperty(\"--fade-top\", `${Math.min(fade, node.scrollTop)}px`);\n    node.style.setProperty(\"--fade-bottom\", `${Math.min(fade, max - node.scrollTop)}px`);\n  };\n  useEffect(() => {\n    const node = region.current;\n    if (!node || fade <= 0) return;\n    syncFade();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(syncFade);\n    observer.observe(node);\n    for (const child of Array.from(node.children)) observer.observe(child);\n    return () => observer.disconnect();\n    // syncFade only reads `fade` and the node, both covered here.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [fade, children]);\n\n  return (\n    <div\n      {...props}\n      ref={rootRef}\n      // tabIndex 0 unconditionally: whether the content overflows is a\n      // runtime fact that changes as the content does, and a region that\n      // becomes scrollable after a fetch would otherwise never gain focus.\n      tabIndex={0}\n      role=\"region\"\n      aria-label={label}\n      data-slot=\"scroll-area\"\n      data-fade={fade > 0 ? \"\" : undefined}\n      onScroll={(event) => {\n        syncFade();\n        onScroll?.(event);\n      }}\n      className={cnAll(scrollAreaVariants(), fade > 0 && \"scroll-fade-y\", className)}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,qBAAqB,IAAI;CACpC;CACA;CAGA;CAMA;CACA;CACA;CACA;CACA;AACF,CAAC;AAuDD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,UAAU,OAAO,gBAAgB,OAAO,GAAG,UAAU,GAAG,SACrE,KACA;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,gBAAgB;EAGd,IAAI,OAAO,SAAS,OAAO,QAAQ,YAAY;CACjD,GAAG,CAAC,cAAc,CAAC;CAOnB,MAAM,UAAU,cAAc,UAAU,KAAK,MAAM,GAAG,CAAC,KAAK,MAAM,CAAC;CAGnE,MAAM,iBAAiB;EACrB,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,QAAQ,QAAQ,GAAG;EACxB,MAAM,MAAM,KAAK,IAAI,GAAG,KAAK,eAAe,KAAK,YAAY;EAC7D,KAAK,MAAM,YAAY,cAAc,GAAG,KAAK,IAAI,MAAM,KAAK,SAAS,EAAE,GAAG;EAC1E,KAAK,MAAM,YAAY,iBAAiB,GAAG,KAAK,IAAI,MAAM,MAAM,KAAK,SAAS,EAAE,GAAG;CACrF;CACA,gBAAgB;EACd,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,QAAQ,QAAQ,GAAG;EACxB,SAAS;EACT,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,QAAQ;EAC5C,SAAS,QAAQ,IAAI;EACrB,KAAK,MAAM,SAAS,MAAM,KAAK,KAAK,QAAQ,GAAG,SAAS,QAAQ,KAAK;EACrE,aAAa,SAAS,WAAW;CAGnC,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,KAAK;EAIL,UAAU;EACV,MAAK;EACL,cAAY;EACZ,aAAU;EACV,aAAW,OAAO,IAAI,KAAK,KAAA;EAC3B,WAAW,UAAU;GACnB,SAAS;GACT,WAAW,KAAK;EAClB;EACA,WAAW,MAAM,mBAAmB,GAAG,OAAO,KAAK,iBAAiB,SAAS;EAE5E;CACE,CAAA;AAET,CAAC"}
+{"version":3,"file":"scroll-area.js","names":[],"sources":["../../src/scroll-area/scroll-area.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\n\n/**\n * ScrollArea: a native scroll container with thin overlay scrollbars and edge\n * fades. React Aria has no equivalent, so the scrolling stays the browser's --\n * keyboard, touch momentum and scroll snap all behave as the platform expects --\n * and only the scrollbar is drawn here.\n *\n * Census: fourteen paths match, thirteen are counted, ELEVEN render anything,\n * and across them 17 uses. Every one passes `className` and nothing else, and 13\n * of the 17 are a height or flex constraint plus padding. The legacy Radix one\n * cannot be scrolled by keyboard at all.\n *\n * The native scrollbar is hidden and replaced by an overlay pill that appears\n * while scrolling or hovering and fades away at rest (or stays, with\n * `scrollbars=\"always\"`). It is written straight to the DOM on each scroll\n * frame, so scrolling never re-renders React. The pill can be dragged, and\n * pressing its track pages toward the pointer.\n *\n * WHERE THINGS LAND. `className`, `style` and the rest go on the ROOT, the box\n * that carries the height and the optional card. `ref` and `viewportClassName`\n * go on the VIEWPORT, the element that really scrolls -- so a caller can call\n * `ref.current.scrollTo(...)` or `scrollBy(...)` for a \"back to top\" or an\n * arrow button, and put padding on the content without moving the scrollbar\n * inside it.\n *\n * The font is declared here: the reset in @seekalfred/styles is OPT-IN, so a\n * consumer may load none, and a scroll area's content (a list of plain\n * paragraphs) would render in the browser's serif.\n */\nexport const scrollAreaRootVariants = cva(\n  [\"scroll-area relative flex min-h-0 min-w-0 flex-col overflow-hidden box-border font-sans\"],\n  {\n    variants: {\n      /** The area is a white card: the panel radius and a hairline border. */\n      framed: {\n        true: \"rounded-panel border-(length:--border-width) border-border bg-surface\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { framed: false },\n  },\n);\n\nexport const scrollAreaVariants = cva(\n  [\n    \"scroll-area-viewport min-h-0 min-w-0 flex-1 overscroll-contain box-border\",\n    // A scrollable region must be reachable by keyboard, or its content is\n    // unreachable without a pointer -- WCAG 2.1.1, and axe's\n    // scrollable-region-focusable rule. The legacy has no tabIndex at all.\n    \"outline-none\",\n    // Inset, not offset outward: the root is overflow-hidden (it clips the\n    // overlay scrollbars, the fades and the framed radius), so a ring drawn\n    // outside the viewport was cut off on every side and keyboard focus was\n    // invisible -- WCAG 2.4.7. Drawn just inside the edge, nothing around the\n    // area can clip it, and a caller can still recolour it through\n    // `viewportClassName`. The radius is inherited so the ring follows the\n    // framed card's corners.\n    //\n    // With `fade` on (data-fade) the viewport carries the edge-fade mask, which\n    // would fade the ring's top and bottom out with the content mid-scroll. The\n    // ring's style stays `none` there and the ROOT paints it instead, on an\n    // unmasked overlay (`scroll-area` in styles.css).\n    \"focus-visible:not-data-[fade]:outline-solid\",\n    \"focus-visible:outline-(length:--focus-ring-width)\",\n    \"focus-visible:-outline-offset-(--focus-ring-width)\",\n    \"focus-visible:outline-(--color-ring)\",\n    \"rounded-[inherit]\",\n  ],\n  {\n    variants: {\n      orientation: {\n        vertical: \"overflow-x-hidden overflow-y-auto\",\n        horizontal: \"overflow-x-auto overflow-y-hidden\",\n        both: \"overflow-auto\",\n      },\n    },\n    defaultVariants: { orientation: \"vertical\" },\n  },\n);\n\ntype Axis = \"y\" | \"x\";\n\ninterface Drag {\n  axis: Axis;\n  start: number;\n  scroll: number;\n  ratio: number;\n  sign: number;\n}\n\n/** The shortest a scrollbar thumb gets, so a very long list still leaves something to grab. */\nconst MIN_THUMB = 28;\n\n/**\n * A scrolling region.\n *\n * @example\n * <ScrollArea label=\"Activity\" className=\"h-64\" framed fade={28}>...</ScrollArea>\n */\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n  /**\n   * Names the scrolling region.\n   *\n   * **Required**, and it took a failing test to get here. A focusable\n   * element with no role fails axe `focus-order-semantics`, so the\n   * keyboard fix cannot ship without a role -- and a role with no\n   * accessible name is a violation of its own. Naming it is the only\n   * combination that is actually correct.\n   *\n   * `role=\"region\"` specifically. `group` was the first attempt -- it is\n   * lighter, since region is a landmark and seventeen landmarks in one app\n   * is noise -- but axe does not accept `group` as an appropriate role for\n   * a focusable element, and it is right: a named region is the role the\n   * ARIA practices name for a scrollable content area, and being able to\n   * jump to it is the point.\n   */\n  label: string;\n  /**\n   * Which axes scroll.\n   *\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\" | \"both\";\n  /**\n   * Fade the content out at an edge by exactly as much as there is content hidden\n   * past it, up to this many pixels: the fade grows in with the first pixels of\n   * scroll and is gone at the ends, so an edge fades only while content\n   * overflows past it. `0` turns it off, and the default leaves the area as it\n   * was. Written on each scroll frame straight to the element, so scrolling\n   * never re-renders.\n   *\n   * @default 0\n   */\n  fade?: number;\n  /**\n   * `auto` shows the scrollbar while scrolling or hovering and fades it away at\n   * rest; `always` keeps it visible whenever the content overflows.\n   *\n   * @default \"auto\"\n   */\n  scrollbars?: \"auto\" | \"always\";\n  /**\n   * How long the scrollbar lingers after scrolling stops, in ms.\n   *\n   * @default 900\n   */\n  hideDelay?: number;\n  /**\n   * Draws the area as a white card: the panel radius and a light border. The\n   * content is clipped to it, so an edge fade and the scrollbar sit inside.\n   *\n   * @default false\n   */\n  framed?: boolean;\n  /**\n   * Classes for the viewport, the element that scrolls. Padding for the\n   * content goes here.\n   */\n  viewportClassName?: string;\n  /**\n   * Change this when the contents change, and the region scrolls back to the\n   * top.\n   *\n   * This stays a declarative prop even though a `ref` exists: reaching\n   * for it would mean the caller writes `ref.current.scrollTop = 0` in their\n   * own effect on every content change, which is worse ergonomics than a\n   * prop that says \"reset when this value changes.\"\n   *\n   * Sheet forwards its own `scrollResetKey` straight through: going a level\n   * deeper in a panel and landing halfway down the new view is disorienting,\n   * and it is exactly the thing every call site forgets.\n   */\n  scrollResetKey?: string | number;\n}\n\n/** The `ref` reaches the VIEWPORT, the element that scrolls. `onScroll` runs on its scroll events. */\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(\n  {\n    className,\n    children,\n    label,\n    scrollResetKey,\n    orientation = \"vertical\",\n    fade = 0,\n    scrollbars = \"auto\",\n    hideDelay = 900,\n    framed = false,\n    viewportClassName,\n    onScroll,\n    ...props\n  },\n  ref,\n) {\n  const root = useRef<HTMLDivElement>(null);\n  const viewport = useRef<HTMLDivElement>(null);\n  const tracks = useRef<Record<Axis, HTMLDivElement | null>>({ x: null, y: null });\n  const thumbs = useRef<Record<Axis, HTMLDivElement | null>>({ x: null, y: null });\n  const hideTimer = useRef<number | undefined>(undefined);\n  const drag = useRef<Drag | null>(null);\n\n  const vertical = orientation !== \"horizontal\";\n  const horizontal = orientation !== \"vertical\";\n\n  useEffect(() => {\n    // Unconditional rather than guarded on scrollResetKey being set: with no\n    // key this runs once on mount, where scrollTop is already 0.\n    if (viewport.current) viewport.current.scrollTop = 0;\n  }, [scrollResetKey]);\n\n  // Memoized, not called inline: mergeRefs returns a new callback every call, so\n  // an inline call would detach and reattach the DOM ref on every re-render.\n  const viewportRef = useMemo(() => mergeRefs(ref, viewport), [ref]);\n\n  /*\n   * Everything visual is written straight to the DOM: the fade at each edge is\n   * how much content is hidden past it (up to `fade`), and a thumb is sized and\n   * placed from the scroll position. A track with nothing to scroll is hidden.\n   */\n  const sync = useCallback(() => {\n    const node = viewport.current;\n    if (!node) return;\n    const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = node;\n    const maxY = Math.max(0, scrollHeight - clientHeight);\n    const maxX = Math.max(0, scrollWidth - clientWidth);\n    // scrollLeft runs negative in a right-to-left layout; the distance travelled is what counts.\n    const left = Math.abs(node.scrollLeft);\n\n    if (fade > 0) {\n      node.style.setProperty(\"--fade-top\", `${vertical ? Math.min(fade, scrollTop) : 0}px`);\n      node.style.setProperty(\n        \"--fade-bottom\",\n        `${vertical ? Math.min(fade, Math.max(0, maxY - scrollTop)) : 0}px`,\n      );\n      node.style.setProperty(\"--fade-left\", `${horizontal ? Math.min(fade, left) : 0}px`);\n      node.style.setProperty(\n        \"--fade-right\",\n        `${horizontal ? Math.min(fade, Math.max(0, maxX - left)) : 0}px`,\n      );\n    }\n\n    const place = (axis: Axis, scroll: number, max: number, client: number, total: number) => {\n      const track = tracks.current[axis];\n      const thumb = thumbs.current[axis];\n      if (!track || !thumb) return;\n      const overflowing = max > 0.5;\n      track.toggleAttribute(\"data-hidden\", !overflowing);\n      if (!overflowing) return;\n      const length = axis === \"y\" ? track.clientHeight : track.clientWidth;\n      const size = Math.max(MIN_THUMB, (length * client) / total);\n      const offset = (length - size) * (scroll / max);\n      const sign = axis === \"x\" && getComputedStyle(node).direction === \"rtl\" ? -1 : 1;\n      thumb.style[axis === \"y\" ? \"height\" : \"width\"] = `${size}px`;\n      thumb.style.transform =\n        axis === \"y\" ? `translate3d(0, ${offset}px, 0)` : `translate3d(${offset * sign}px, 0, 0)`;\n    };\n    if (vertical) place(\"y\", scrollTop, maxY, clientHeight, scrollHeight);\n    if (horizontal) place(\"x\", left, maxX, clientWidth, scrollWidth);\n    root.current?.toggleAttribute(\"data-overflow\", maxY > 0.5 || maxX > 0.5);\n  }, [fade, horizontal, vertical]);\n\n  useIsomorphicLayoutEffect(() => {\n    const node = viewport.current;\n    if (!node) return;\n    sync();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => sync());\n    observer.observe(node);\n    for (const child of Array.from(node.children)) observer.observe(child);\n    return () => observer.disconnect();\n    // `children` re-observes when the content's own boxes are replaced.\n  }, [sync, children]);\n\n  useEffect(() => () => window.clearTimeout(hideTimer.current), []);\n\n  const wake = () => {\n    const el = root.current;\n    if (!el) return;\n    el.setAttribute(\"data-scrolling\", \"\");\n    window.clearTimeout(hideTimer.current);\n    hideTimer.current = window.setTimeout(() => el.removeAttribute(\"data-scrolling\"), hideDelay);\n  };\n\n  /* Dragging a thumb maps pointer travel to scroll distance. */\n  const onThumbDown = (event: ReactPointerEvent<HTMLDivElement>, axis: Axis) => {\n    const node = viewport.current;\n    const track = tracks.current[axis];\n    const thumb = thumbs.current[axis];\n    if (!node || !track || !thumb || event.button !== 0) return;\n    event.preventDefault();\n    event.stopPropagation();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    const length = axis === \"y\" ? track.clientHeight : track.clientWidth;\n    const size = axis === \"y\" ? thumb.offsetHeight : thumb.offsetWidth;\n    const max =\n      axis === \"y\" ? node.scrollHeight - node.clientHeight : node.scrollWidth - node.clientWidth;\n    drag.current = {\n      axis,\n      start: axis === \"y\" ? event.clientY : event.clientX,\n      scroll: axis === \"y\" ? node.scrollTop : node.scrollLeft,\n      ratio: max / Math.max(1, length - size),\n      sign: axis === \"x\" && getComputedStyle(node).direction === \"rtl\" ? -1 : 1,\n    };\n    root.current?.setAttribute(\"data-dragging\", axis);\n  };\n  const onThumbMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current;\n    const node = viewport.current;\n    if (!state || !node) return;\n    const travel = (state.axis === \"y\" ? event.clientY : event.clientX) - state.start;\n    const to = state.scroll + travel * state.ratio * state.sign;\n    if (state.axis === \"y\") node.scrollTop = to;\n    else node.scrollLeft = to;\n  };\n  const onThumbUp = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!drag.current) return;\n    drag.current = null;\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n    root.current?.removeAttribute(\"data-dragging\");\n    wake();\n  };\n  /* Pressing the track pages toward the pointer. */\n  const onTrackDown = (event: ReactPointerEvent<HTMLDivElement>, axis: Axis) => {\n    const node = viewport.current;\n    const thumb = thumbs.current[axis];\n    if (!node || !thumb || event.button !== 0 || event.target !== event.currentTarget) return;\n    const box = thumb.getBoundingClientRect();\n    const before = axis === \"y\" ? event.clientY < box.top : event.clientX < box.left;\n    const page = (axis === \"y\" ? node.clientHeight : node.clientWidth) * 0.9 * (before ? -1 : 1);\n    node.scrollBy({\n      [axis === \"y\" ? \"top\" : \"left\"]: page,\n      behavior: prefersReducedMotion() ? \"auto\" : \"smooth\",\n    });\n  };\n\n  const bar = (axis: Axis) => (\n    <div\n      ref={(node) => {\n        tracks.current[axis] = node;\n      }}\n      data-slot=\"scroll-area-track\"\n      data-axis={axis}\n      data-hidden=\"\"\n      aria-hidden=\"true\"\n      onPointerDown={(event) => onTrackDown(event, axis)}\n    >\n      <div\n        ref={(node) => {\n          thumbs.current[axis] = node;\n        }}\n        data-slot=\"scroll-area-thumb\"\n        onPointerDown={(event) => onThumbDown(event, axis)}\n        onPointerMove={onThumbMove}\n        onPointerUp={onThumbUp}\n        onPointerCancel={onThumbUp}\n      />\n    </div>\n  );\n\n  const fadeClass =\n    orientation === \"vertical\"\n      ? \"scroll-fade-y\"\n      : orientation === \"horizontal\"\n        ? \"scroll-fade-x\"\n        : \"scroll-fade-both\";\n\n  return (\n    <div\n      {...props}\n      ref={root}\n      data-slot=\"scroll-area-root\"\n      data-orientation={orientation}\n      data-scrollbars={scrollbars}\n      className={cn(scrollAreaRootVariants({ framed }), className)}\n    >\n      <div\n        ref={viewportRef}\n        // tabIndex 0 unconditionally: whether the content overflows is a\n        // runtime fact that changes as the content does, and a region that\n        // becomes scrollable after a fetch would otherwise never gain focus.\n        tabIndex={0}\n        role=\"region\"\n        aria-label={label}\n        data-slot=\"scroll-area\"\n        data-fade={fade > 0 ? \"\" : undefined}\n        onScroll={(event) => {\n          sync();\n          wake();\n          onScroll?.(event);\n        }}\n        className={cn(\n          cnAll(scrollAreaVariants({ orientation }), fade > 0 && fadeClass),\n          viewportClassName,\n        )}\n      >\n        {children}\n      </div>\n      {vertical ? bar(\"y\") : null}\n      {horizontal ? bar(\"x\") : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/scrub-input/evaluate.d.ts

@@ -0,0 +1,14 @@
+//#region src/scrub-input/evaluate.d.ts
+type Parsed = {
+  value: number;
+  unit?: string;
+} | null;
+/**
+ * Evaluates + - * / and parentheses over numbers that may carry a unit, such as
+ * `(100-24)/2` or `50%`. Commas read as decimal points, and `x` or the multiplication
+ * sign multiply. Returns `null` for anything else, or for a unit that is not in
+ * `units` (`deg` and the degree sign are aliases of each other).
+ */
+export declare function evaluateScrubExpression(text: string, units: readonly string[]): Parsed;
+//#endregion
+//# sourceMappingURL=evaluate.d.ts.map

package/dist/scrub-input/evaluate.js

@@ -0,0 +1,72 @@
+//#region src/scrub-input/evaluate.ts
+/**
+* Evaluates + - * / and parentheses over numbers that may carry a unit, such as
+* `(100-24)/2` or `50%`. Commas read as decimal points, and `x` or the multiplication
+* sign multiply. Returns `null` for anything else, or for a unit that is not in
+* `units` (`deg` and the degree sign are aliases of each other).
+*/
+function evaluateScrubExpression(text, units) {
+	const source = text.trim().replace(/,/g, ".").replace(/[×x](?=\s*[\d(.])/gi, "*").replace(/÷/g, "/").replace(/−/g, "-");
+	if (!source) return null;
+	const tokens = source.match(/\d*\.?\d+(?:e[+-]?\d+)?|[a-z%°]+|[-+*/()]|\S/gi);
+	if (!tokens) return null;
+	const list = tokens;
+	let index = 0;
+	let unit;
+	let bad = false;
+	const known = units.map((entry) => entry.toLowerCase());
+	const peek = () => list[index];
+	function primary() {
+		const token = list[index++];
+		if (token === "(") {
+			const inner = sum();
+			if (list[index++] !== ")") bad = true;
+			return inner;
+		}
+		if (token === "-") return -primary();
+		if (token === "+") return primary();
+		if (token === void 0 || !/^\d*\.?\d+/.test(token)) {
+			bad = true;
+			return 0;
+		}
+		const number = Number(token);
+		const next = peek();
+		if (next && /^[a-z%°]+$/i.test(next)) {
+			index++;
+			const word = next.toLowerCase();
+			const alias = word === "°" ? "deg" : word === "deg" ? "°" : word;
+			const found = known.includes(word) ? known.indexOf(word) : known.indexOf(alias);
+			if (found < 0) bad = true;
+			else unit = units[found];
+		}
+		return number;
+	}
+	function product() {
+		let left = primary();
+		while (peek() === "*" || peek() === "/") {
+			const op = list[index++];
+			const right = primary();
+			left = op === "*" ? left * right : left / right;
+		}
+		return left;
+	}
+	function sum() {
+		let left = product();
+		while (peek() === "+" || peek() === "-") {
+			const op = list[index++];
+			const right = product();
+			left = op === "+" ? left + right : left - right;
+		}
+		return left;
+	}
+	const value = sum();
+	if (bad || index !== list.length || !Number.isFinite(value)) return null;
+	return {
+		value,
+		unit
+	};
+}
+//#endregion
+export { evaluateScrubExpression };
+
+//# sourceMappingURL=evaluate.js.map

package/dist/scrub-input/evaluate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"evaluate.js","names":[],"sources":["../../src/scrub-input/evaluate.ts"],"sourcesContent":["type Parsed = { value: number; unit?: string } | null;\n\n/**\n * Evaluates + - * / and parentheses over numbers that may carry a unit, such as\n * `(100-24)/2` or `50%`. Commas read as decimal points, and `x` or the multiplication\n * sign multiply. Returns `null` for anything else, or for a unit that is not in\n * `units` (`deg` and the degree sign are aliases of each other).\n */\nexport function evaluateScrubExpression(text: string, units: readonly string[]): Parsed {\n  const source = text\n    .trim()\n    .replace(/,/g, \".\")\n    .replace(/[×x](?=\\s*[\\d(.])/gi, \"*\")\n    .replace(/÷/g, \"/\")\n    .replace(/−/g, \"-\");\n  if (!source) return null;\n  const tokens = source.match(/\\d*\\.?\\d+(?:e[+-]?\\d+)?|[a-z%°]+|[-+*/()]|\\S/gi);\n  if (!tokens) return null;\n  const list = tokens;\n  let index = 0;\n  let unit: string | undefined;\n  let bad = false;\n  const known = units.map((entry) => entry.toLowerCase());\n  const peek = () => list[index];\n\n  function primary(): number {\n    const token = list[index++];\n    if (token === \"(\") {\n      const inner = sum();\n      if (list[index++] !== \")\") bad = true;\n      return inner;\n    }\n    if (token === \"-\") return -primary();\n    if (token === \"+\") return primary();\n    if (token === undefined || !/^\\d*\\.?\\d+/.test(token)) {\n      bad = true;\n      return 0;\n    }\n    const number = Number(token);\n    const next = peek();\n    if (next && /^[a-z%°]+$/i.test(next)) {\n      index++;\n      const word = next.toLowerCase();\n      const alias = word === \"°\" ? \"deg\" : word === \"deg\" ? \"°\" : word;\n      const found = known.includes(word) ? known.indexOf(word) : known.indexOf(alias);\n      if (found < 0) bad = true;\n      else unit = units[found];\n    }\n    return number;\n  }\n  function product(): number {\n    let left = primary();\n    while (peek() === \"*\" || peek() === \"/\") {\n      const op = list[index++];\n      const right = primary();\n      left = op === \"*\" ? left * right : left / right;\n    }\n    return left;\n  }\n  function sum(): number {\n    let left = product();\n    while (peek() === \"+\" || peek() === \"-\") {\n      const op = list[index++];\n      const right = product();\n      left = op === \"+\" ? left + right : left - right;\n    }\n    return left;\n  }\n\n  const value = sum();\n  if (bad || index !== list.length || !Number.isFinite(value)) return null;\n  return { value, unit };\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,wBAAwB,MAAc,OAAkC;CACtF,MAAM,SAAS,KACZ,KAAK,CAAC,CACN,QAAQ,MAAM,GAAG,CAAC,CAClB,QAAQ,uBAAuB,GAAG,CAAC,CACnC,QAAQ,MAAM,GAAG,CAAC,CAClB,QAAQ,MAAM,GAAG;CACpB,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,SAAS,OAAO,MAAM,gDAAgD;CAC5E,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,OAAO;CACb,IAAI,QAAQ;CACZ,IAAI;CACJ,IAAI,MAAM;CACV,MAAM,QAAQ,MAAM,KAAK,UAAU,MAAM,YAAY,CAAC;CACtD,MAAM,aAAa,KAAK;CAExB,SAAS,UAAkB;EACzB,MAAM,QAAQ,KAAK;EACnB,IAAI,UAAU,KAAK;GACjB,MAAM,QAAQ,IAAI;GAClB,IAAI,KAAK,aAAa,KAAK,MAAM;GACjC,OAAO;EACT;EACA,IAAI,UAAU,KAAK,OAAO,CAAC,QAAQ;EACnC,IAAI,UAAU,KAAK,OAAO,QAAQ;EAClC,IAAI,UAAU,KAAA,KAAa,CAAC,aAAa,KAAK,KAAK,GAAG;GACpD,MAAM;GACN,OAAO;EACT;EACA,MAAM,SAAS,OAAO,KAAK;EAC3B,MAAM,OAAO,KAAK;EAClB,IAAI,QAAQ,cAAc,KAAK,IAAI,GAAG;GACpC;GACA,MAAM,OAAO,KAAK,YAAY;GAC9B,MAAM,QAAQ,SAAS,MAAM,QAAQ,SAAS,QAAQ,MAAM;GAC5D,MAAM,QAAQ,MAAM,SAAS,IAAI,IAAI,MAAM,QAAQ,IAAI,IAAI,MAAM,QAAQ,KAAK;GAC9E,IAAI,QAAQ,GAAG,MAAM;QAChB,OAAO,MAAM;EACpB;EACA,OAAO;CACT;CACA,SAAS,UAAkB;EACzB,IAAI,OAAO,QAAQ;EACnB,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,KAAK;GACvC,MAAM,KAAK,KAAK;GAChB,MAAM,QAAQ,QAAQ;GACtB,OAAO,OAAO,MAAM,OAAO,QAAQ,OAAO;EAC5C;EACA,OAAO;CACT;CACA,SAAS,MAAc;EACrB,IAAI,OAAO,QAAQ;EACnB,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,KAAK;GACvC,MAAM,KAAK,KAAK;GAChB,MAAM,QAAQ,QAAQ;GACtB,OAAO,OAAO,MAAM,OAAO,QAAQ,OAAO;EAC5C;EACA,OAAO;CACT;CAEA,MAAM,QAAQ,IAAI;CAClB,IAAI,OAAO,UAAU,KAAK,UAAU,CAAC,OAAO,SAAS,KAAK,GAAG,OAAO;CACpE,OAAO;EAAE;EAAO;CAAK;AACvB"}

package/dist/scrub-input/index.d.ts

@@ -0,0 +1,3 @@
+import { ScrubInput, ScrubInputChangeDetails, ScrubInputProps, ScrubInputSource } from "./scrub-input.js";
+import { evaluateScrubExpression } from "./evaluate.js";
+export { ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, evaluateScrubExpression };

package/dist/scrub-input/index.js

@@ -0,0 +1,3 @@
+import { evaluateScrubExpression } from "./evaluate.js";
+import { ScrubInput } from "./scrub-input.js";
+export { ScrubInput, evaluateScrubExpression };

package/dist/scrub-input/scrub-input.d.ts

@@ -0,0 +1,74 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+//#region src/scrub-input/scrub-input.d.ts
+export type ScrubInputSource = "scrub" | "type" | "key" | "reset";
+export interface ScrubInputChangeDetails {
+  /** What produced the value: a label drag, a typed entry, an arrow key, or a double click reset. */
+  source: ScrubInputSource;
+  /** The unit in effect after the change. */
+  unit: string;
+}
+export interface ScrubInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "size" | "min" | "max" | "step" | "prefix" | "className"> {
+  /** Text or a 16px icon. It is the scrub handle. An icon label needs `aria-label` so the field keeps an accessible name. */
+  label: ReactNode;
+  /** The value. Controlled when given. */
+  value?: number;
+  /** @default 0 */
+  defaultValue?: number;
+  /** Fires for every change, including each step of a scrub. */
+  onValueChange?: (value: number, details: ScrubInputChangeDetails) => void;
+  /** Fires once when a change settles: a scrub ends, Enter or blur commits typing, or a key step lands. Save on this. */
+  onValueCommit?: (value: number, details: ScrubInputChangeDetails) => void;
+  /** @default -Infinity */
+  min?: number;
+  /** @default Infinity */
+  max?: number;
+  /** One step for the arrow keys and for scrubbing. @default 1 */
+  step?: number;
+  /** The step with Alt held. @default step / 10 */
+  fineStep?: number;
+  /** The step with Shift held; coarse steps land on the coarse grid. @default step * 10 */
+  coarseStep?: number;
+  /** Decimal places kept. Defaults to the precision of `step` or `fineStep`. */
+  precision?: number;
+  /** Pointer travel in px for one step while scrubbing. @default 2 */
+  pixelsPerStep?: number;
+  /** Wraps from `max` back to `min`, as a rotation does. Needs both limits. @default false */
+  wrap?: boolean;
+  /** The unit shown after the number. Controlled when given. With more than one entry in `units` it is a button that cycles them. */
+  unit?: string;
+  defaultUnit?: string;
+  /** The units a typed value may carry, such as `["px", "%"]`. Defaults to the current unit. */
+  units?: readonly string[];
+  onUnitChange?: (unit: string) => void;
+  /** Double click the label to return here. */
+  resetValue?: number;
+  /** Shows where the value sits between `min` and `max` as a quiet fill. On by default when both limits are set. */
+  track?: boolean;
+  /** `md` is the compact control height, `sm` is 30px. @default "md" */
+  size?: "sm" | "md";
+  /** Locks the mouse pointer while it scrubs, when the browser allows it, so a long drag never runs out of screen. @default true */
+  pointerLock?: boolean;
+  /** Extra classes for the field. Merged last, so `w-40` sizes it. */
+  className?: string;
+}
+/**
+ * A compact number field for inspectors and property panels. Drag the label sideways to
+ * scrub the value (the mouse pointer is locked when the browser allows it, so a long drag
+ * never runs out of screen), or click in and type an exact value. A typed entry takes
+ * arithmetic such as `12*2` or `(100-24)/2`, and a unit from `units` such as `50%`.
+ *
+ * Keyboard: the arrow keys step (Shift ten times coarser, Alt ten times finer), Enter
+ * commits typing, Escape restores the last value (or cancels a scrub back to where it
+ * began). A double click on the label restores `resetValue`. The input is a spinbutton, and
+ * its value text spells out percent and degrees.
+ *
+ * At a limit the field strains: dragged past `min` or `max` it stretches against
+ * rubber-band resistance and springs back on release, and a refused step or an invalid
+ * entry kicks the number. Reduced motion removes the strain, the kick and the fill's glide.
+ *
+ * @example
+ * <ScrubInput label="W" value={width} onValueChange={setWidth} min={0} units={["px", "%"]} />
+ */
+export declare const ScrubInput: import("react").ForwardRefExoticComponent<ScrubInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=scrub-input.d.ts.map