@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/lib/field-classes.ts

@@ -1,121 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the field ladder FF
- * repeats across InputGroup, Combobox and Sidebar's input, as one recipe,
- * and `useFieldBox`, the box every text field (Input, Textarea, Combobox,
- * the date and time pickers) builds on.
- */
-
-import { createContext, type MouseEvent, type RefObject, useContext } from 'react'
-import { FIELD_PX, type FieldVariant, fieldVariants } from './field-variants'
-import { useShape } from './shape-context'
-import { type SizeVariant, useSize } from './size-context'
-import { cn } from './utils'
-
-// The pure tables live in `field-variants.ts` (callable from a server
-// component); every name stays importable from here.
-export {
-  FIELD_ACTION,
-  FIELD_ACTION_BOX,
-  FIELD_ACTION_END,
-  FIELD_ACTION_RADIUS,
-  FIELD_ADORNMENT_ICON,
-  FIELD_PX,
-  FIELD_TEXT_INSET,
-  type FieldVariant,
-  fieldActionClasses,
-  fieldAdornmentClasses,
-  fieldIconClasses,
-  fieldVariants,
-} from './field-variants'
-
-/**
- * What every text field's box takes. Items re-declare these members in their
- * own props interface (the docs read only same-file members), with this prose.
- */
-export interface FieldBoxOptions {
-  /** Framed at rest, or invisible until hovered or focused. */
-  variant: FieldVariant
-  /** Turns the field destructive. */
-  invalid?: boolean
-  /** Frames and dims the field. */
-  disabled?: boolean
-  /** Lit from outside, e.g. a group's fluid hover. */
-  active?: boolean
-  /** Shows the value without letting it change: the ring answers, the fill never lifts. */
-  readOnly?: boolean
-  /** Marks the control required (`required` on the control). */
-  required?: boolean
-  /** Pins the field to one step of the size ladder. Defaults to the surrounding SizeProvider. */
-  size?: SizeVariant
-}
-
-/** What a field wrapper hands to the control it holds. */
-export interface FieldState {
-  /** Lit by a group's fluid hover. */
-  active: boolean
-  invalid: boolean
-  disabled: boolean
-  readOnly?: boolean
-  required?: boolean
-}
-
-/**
- * State a field wrapper (Field, InputGroup.Field) hands to whatever control
- * it holds: lit by the group's fluid hover, its error, its disabled,
- * read-only and required state. `useFieldBox` reads it, so any field built on
- * the box joins in; the control's own props win.
- */
-export const FieldStateContext = createContext<FieldState | null>(null)
-
-/** The surrounding field's state, or `null` outside one. */
-export function useFieldState() {
-  return useContext(FieldStateContext)
-}
-
-/**
- * The box around a text field's control: the field ladder in the chosen
- * variant, the state attributes it reads, the shape's input radius and the
- * horizontal inset. Spread `props` on the element around the control (or the
- * control itself, for a button field); the height stays with the item, from
- * the returned `size`. Inside a Field or InputGroup.Field, unset `active` / `invalid` /
- * `disabled` / `readOnly` / `required` come from the field (`FieldStateContext`).
- */
-export function useFieldBox({ variant, invalid, disabled, active, readOnly, required, size }: FieldBoxOptions) {
-  const field = useContext(FieldStateContext)
-  const shape = useShape()
-  const sizeClasses = useSize(size)
-  const isInvalid = invalid ?? field?.invalid ?? false
-  const isDisabled = disabled ?? field?.disabled ?? false
-  const isReadOnly = readOnly ?? field?.readOnly ?? false
-
-  return {
-    size: sizeClasses,
-    /** Resolved with the field's state, for the control's `aria-invalid` / `disabled` / `readOnly` / `required`. */
-    invalid: isInvalid,
-    disabled: isDisabled,
-    readOnly: isReadOnly,
-    required: required ?? field?.required,
-    props: {
-      'data-active': (active ?? field?.active) || undefined,
-      'data-invalid': isInvalid || undefined,
-      'data-disabled': isDisabled || undefined,
-      'data-readonly': isReadOnly || undefined,
-      className: cn(fieldVariants({ variant }), shape.input, FIELD_PX[sizeClasses.variant]),
-    },
-  }
-}
-
-/**
- * A press anywhere in the box (icon, padding) focuses the control, without
- * disturbing the control's own caret placement. A press that only reaches the
- * box through the React tree (a popup portalled out of an adornment, e.g. a
- * searchable Dropdown) is left alone, so that popup can take focus itself.
- */
-export function focusControlOnPress(control: RefObject<HTMLElement | null>) {
-  return (e: MouseEvent) => {
-    if (e.target === control.current) return
-    if (!e.currentTarget.contains(e.target as Node)) return
-    e.preventDefault()
-    control.current?.focus()
-  }
-}

package/lib/field-variants.ts

@@ -1,117 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the field ladder's pure
- * class tables, split from `field-classes.ts` so they carry no hooks, JSX or
- * contexts. A React Server Component can call them; `field-classes.ts`
- * re-exports every name, so its imports keep working.
- */
-
-import { cva } from 'class-variance-authority'
-import type { ShapeVariant } from './shape-context'
-import type { SizeVariant } from './size-context'
-
-/**
- * The ringed box of a text field. It steps from rest to a muted fill when lit
- * (hovered, or `data-active` from a group's fluid hover) to the card fill
- * when focused. `data-invalid` keeps a destructive ring in every state and
- * tints the lit fill; `data-disabled` frames and dims it; `data-readonly`
- * shows the ring when lit or focused but never lifts the fill. Put it on the
- * element around the control and stamp the data attributes; Base UI parts
- * stamp `data-invalid` / `data-disabled` themselves.
- */
-export const fieldVariants = cva(
-  [
-    'group/field ring-1 cursor-text transition-[background-color,box-shadow,opacity] duration-fast',
-    'hover:bg-muted/50 hover:ring-border data-[active]:bg-muted/50 data-[active]:ring-border',
-    // `!`: Uno doesn't emit the state variants in a fixed order, so the
-    // states that must win (focus fill, invalid ring) win on importance.
-    'focus-within:!bg-card focus-within:ring-border',
-    'data-[invalid]:!ring-destructive/50 data-[invalid]:hover:bg-destructive-light/60 data-[invalid]:data-[active]:bg-destructive-light/60',
-    'data-[disabled]:ring-border data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
-    // A read-only value can be selected and copied but not changed: the ring
-    // still answers the pointer and the keyboard, the fill never lifts. The
-    // attribute selector outranks the focus fill's at equal importance.
-    'data-[readonly]:cursor-default data-[readonly]:hover:!bg-transparent data-[readonly]:data-[active]:!bg-transparent data-[readonly]:focus-within:!bg-transparent',
-  ],
-  {
-    variants: {
-      variant: {
-        // Invisible until lit or focused.
-        borderless: 'bg-transparent ring-transparent',
-        // Framed at rest.
-        bordered: 'bg-transparent ring-border',
-      },
-    },
-    defaultVariants: {
-      variant: 'borderless',
-    },
-  },
-)
-
-/** A leading icon inside a `fieldVariants` box: muted at rest, it darkens and thickens with the field. Pass `strokeWidth={1.5}`. */
-export const fieldIconClasses =
-  'shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover/field:text-foreground group-hover/field:stroke-[2] group-data-[active]/field:text-foreground group-data-[active]/field:stroke-[2] group-focus-within/field:text-foreground group-focus-within/field:stroke-[2]'
-
-/**
- * Content beside a field's text (an adornment): muted, held to the ladder's
- * glyph size, and lit with the field like a leading icon. Strings read as a
- * prefix or a unit.
- */
-export const fieldAdornmentClasses =
-  'flex shrink-0 items-center whitespace-nowrap text-muted-foreground transition-[color] duration-fast group-hover/field:text-foreground group-data-[active]/field:text-foreground group-focus-within/field:text-foreground'
-
-/** Glyph size for an adornment's icons, per ladder step (16px default, 14px compact). */
-export const FIELD_ADORNMENT_ICON: Record<SizeVariant, string> = {
-  default: '[&_svg]:size-4',
-  compact: '[&_svg]:size-3.5',
-}
-
-/**
- * A small icon button inside a field box (a password reveal, a clear, a
- * stepper): 4px inside the ring on every side (28px in a 36px field, 20px in
- * a 28px one), its negative margin taking back the box's inset so the gap to
- * the edge matches the gap above and below.
- */
-export const FIELD_ACTION: Record<SizeVariant, string> = {
-  default: 'size-7 -mx-1.5 [&_svg]:size-4',
-  compact: 'size-5 -mx-1 [&_svg]:size-3.5',
-}
-
-/** A field action's box alone, without `FIELD_ACTION`'s margins, for actions set side by side (a stepper pair). */
-export const FIELD_ACTION_BOX: Record<SizeVariant, string> = {
-  default: 'size-7 [&_svg]:size-4',
-  compact: 'size-5 [&_svg]:size-3.5',
-}
-
-/** The margin that pulls the last of several side-by-side actions to 4px inside the ring. */
-export const FIELD_ACTION_END: Record<SizeVariant, string> = {
-  default: '-mr-1.5',
-  compact: '-mr-1',
-}
-
-/** A field action's corners, concentric with the box's (8px box, 4px gap) or round in pill mode. */
-export const FIELD_ACTION_RADIUS: Record<ShapeVariant, string> = {
-  rounded: 'rounded-sm',
-  pill: 'rounded-full',
-}
-
-/** The classes every field action shares, beside its `FIELD_ACTION` size and radius. */
-export const fieldActionClasses =
-  'relative inline-flex shrink-0 cursor-pointer items-center justify-center text-muted-foreground outline-none transition-[color,background-color,opacity] duration-fast hover:bg-hover hover:text-foreground active:bg-active focus-visible:ring-1 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
-
-// Literal tables: one notch tighter than the ladder's `px`, since the ring is
-// invisible at rest and the roomier inset would read as a gap.
-
-/** Horizontal inset of a field box. */
-export const FIELD_PX: Record<SizeVariant, string> = {
-  default: 'px-2.5',
-  compact: 'px-2',
-}
-
-/** Left inset of the text around a field (label, description, error), so it lines up with the text inside the box. */
-export const FIELD_TEXT_INSET: Record<SizeVariant, string> = {
-  default: 'pl-2.5',
-  compact: 'pl-2',
-}
-
-/** Framed at rest (`bordered`), or invisible until hovered or focused (`borderless`). */
-export type FieldVariant = 'bordered' | 'borderless'

package/lib/fluid-hover-highlight.tsx

@@ -1,139 +0,0 @@
-/*
- * Vendored from Fluid Functionalism — `registry/default/fluid-hover-highlight.tsx` at
- * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
- * LICENSE.fluid-functionalism in this package.
- *
- * Local modifications:
- * - `"use client"` directive dropped (no RSC here).
- * - `framer-motion` → `motion/react` (the package's current name).
- * - `@/lib/*` and `@/hooks/*` imports rewritten to sibling `./*` paths.
- * - The fill is a `GooIndicator` (`./goo-indicator`, local): it melts from row
- *   to row with a liquid neck instead of sliding as one box. The keyed fade,
- *   `from`, `hidden` and `transition` behave as before; a square highlight
- *   (no radius) has nothing to melt and slides as before.
- */
-
-import { AnimatePresence, motion, type Transition, useReducedMotion } from 'motion/react'
-import { GooIndicator } from './goo-indicator'
-import { spring } from './springs'
-import type { ItemRect, UseFluidHoverReturn } from './use-fluid-hover'
-import { cn } from './utils'
-
-// ---------------------------------------------------------------------------
-// The one hover highlight every fluid hover list renders: an absolutely
-// positioned fill that springs between the rects `useFluidHover` measures.
-// Consumers used to hand-roll this motion.div; this is that block, once.
-//
-//   const hover = useFluidHover(ref);
-//   <FluidHoverHighlight hover={hover} className={shape.bg} />
-//
-// It owns no layout opinion beyond `absolute`: radius, z-index, and the
-// offsetParent (the container must be `relative`) are the consumer's.
-// ---------------------------------------------------------------------------
-
-/** What the highlight reads off the hook: the highlighted index, the
- *  measured rects, whether they are current, and the pointer session. */
-export type FluidHoverSource = Pick<UseFluidHoverReturn, 'activeIndex' | 'itemRects' | 'isMeasured' | 'sessionRef'>
-
-interface HighlightFromHook {
-  /** The hook's return value. The highlight sits on
-   *  `itemRects[activeIndex]` once `isMeasured`, and re-keys on the session. */
-  hover: FluidHoverSource
-  /** Keep the list's state but show nothing (a closed popup, hover switched
-   *  off). Runs the exit fade. */
-  hidden?: boolean
-  rect?: never
-  session?: never
-}
-
-interface HighlightFromRect {
-  /** For lists that resolve their own rect (the sidebar's unified scope):
-   *  the rect to sit on, in the container's coordinate space. `null` hides
-   *  the highlight (it fades out on `spring.fast.exit`). */
-  rect: ItemRect | null
-  /** `sessionRef.current` from `useFluidHover`. It increments when the
-   *  cursor enters the container, which re-keys the highlight so it fades in
-   *  at `from ?? rect` instead of sliding over from wherever it was last. */
-  session: number
-  hover?: never
-  hidden?: never
-}
-
-export type FluidHoverHighlightProps = (HighlightFromHook | HighlightFromRect) & {
-  /** Where a fresh session fades in from. A dropdown passes its checked row,
-   *  a nav menu its active route. Defaults to the rect itself. */
-  from?: ItemRect | null
-  /** Radius, z-index, anything else. Merged onto
-   *  `absolute bg-hover pointer-events-none`. */
-  className?: string
-  /** The positional spring. Defaults to `spring.fast`. Pass `false` to snap
-   *  to the new rect with no travel (a layout reflow that moved the rows
-   *  underneath, not a hover change). The opacity fade is always 0.08s. */
-  transition?: Transition | false
-}
-
-const fade: Transition = { duration: 0.08 }
-const snap: Transition = { duration: 0 }
-
-/** A measured rect as animation targets: position as a transform, size as
- *  layout. Exported for the unit test. */
-export function toTarget(rect: ItemRect) {
-  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
-}
-
-/**
- * Resolves the positional transition. Reduced motion keeps the opacity fade
- * and drops the travel, per the motion guidelines: fewer and gentler, not
- * none. Exported for the unit test.
- */
-export function resolveHighlightTransition(
-  transition: Transition | false | undefined,
-  reduceMotion: boolean,
-): Transition {
-  const positional = transition === false || reduceMotion ? snap : (transition ?? spring.fast)
-  return { ...positional, opacity: fade }
-}
-
-/** The rect and session a set of props resolves to. Exported for the test. */
-export function resolveHighlightSource(props: FluidHoverHighlightProps): {
-  rect: ItemRect | null
-  session: number
-} {
-  if (props.hover) {
-    const { activeIndex, itemRects, isMeasured, sessionRef } = props.hover
-    const rect = !props.hidden && isMeasured && activeIndex !== null ? (itemRects[activeIndex] ?? null) : null
-    return { rect, session: sessionRef.current }
-  }
-  return { rect: props.rect, session: props.session }
-}
-
-export function FluidHoverHighlight(props: FluidHoverHighlightProps) {
-  const { from, className, transition } = props
-  const { rect, session } = resolveHighlightSource(props)
-  // Reads the OS media query directly, so an installed copy honours reduced
-  // motion without the app wrapping its tree in MotionConfig.
-  const reduceMotion = useReducedMotion() ?? false
-  return (
-    <AnimatePresence>
-      {rect && (
-        <motion.div
-          key={session}
-          data-slot="fluid-hover-highlight"
-          className="pointer-events-none absolute top-0 left-0"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0, transition: spring.fast.exit }}
-          transition={fade}
-        >
-          <GooIndicator
-            rect={rect}
-            from={from}
-            className={cn('bg-hover', className)}
-            transition={transition === false || reduceMotion ? false : (transition ?? spring.fast)}
-          />
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-}

package/lib/focus-ring.tsx

@@ -1,46 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the one keyboard ring a
- * list panel draws (Dropdown and its submenus, NavigationMenu's panels,
- * Select): 2px outside the focused row, springing between rows on
- * `spring.fast` (a snap under reduced motion) and fading out on its exit.
- * Its corners follow the surrounding shape's `focusRing` radius, concentric
- * with the row; a popup that pins its own shape passes it.
- */
-
-import { AnimatePresence, motion } from 'motion/react'
-import { useReduceMotion } from './reduced-motion'
-import { type ShapeVariant, shapeMap, useShape } from './shape-context'
-import { spring } from './springs'
-import type { ItemRect } from './use-fluid-hover'
-import { cn } from './utils'
-
-interface FocusRingProps {
-  /** The focused row's rect in the panel's coordinates; nothing while none has keyboard focus. */
-  rect: ItemRect | null | undefined
-  /** Pins the radius to one shape (popups stay `rounded`); defaults to the surrounding ShapeProvider. */
-  shape?: ShapeVariant
-}
-
-/** The keyboard ring: 2px outside the focused row, springing between rows. */
-function FocusRing({ rect, shape }: FocusRingProps) {
-  const surrounding = useShape()
-  const radius = (shape ? shapeMap[shape] : surrounding).focusRing
-  const reduced = useReduceMotion()
-  return (
-    <AnimatePresence>
-      {rect && (
-        <motion.div
-          aria-hidden="true"
-          className={cn('pointer-events-none absolute z-20 border border-focus-ring', radius)}
-          initial={false}
-          animate={{ left: rect.left - 2, top: rect.top - 2, width: rect.width + 4, height: rect.height + 4 }}
-          exit={{ opacity: 0, transition: spring.fast.exit }}
-          transition={reduced ? { duration: 0 } : { ...spring.fast, opacity: { duration: spring.fast.duration } }}
-        />
-      )}
-    </AnimatePresence>
-  )
-}
-
-export type { FocusRingProps }
-export { FocusRing }

package/lib/goo-indicator.tsx

@@ -1,261 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the liquid indicator, the
- * morph style for everything that travels between items: a tab's active pill,
- * a switch thumb, the fluid hover highlight and merged selection backgrounds.
- * When the indicator leaves a rect it leaves a blob behind. The blob lingers
- * for a third of the spring, then follows to the back of the new rect,
- * shrinking, while the indicator springs on: the goo melts the two into one
- * stretched drop that lets go, or, on a long move, a drop and a droplet that
- * catches up. The filter runs only while a blob is alive; at rest nothing is
- * filtered.
- *
- * The goo is the morph engine's (`GOO_MATRIX` and `GOO_BLUR_RATIO` in
- * `lib/use-morph.ts`, after beUI's gooey popover and Sileo, notices
- * LICENSE.beui and LICENSE.sileo). `GooFilter` lays the source over the
- * thresholded blur, which only works for opaque fills: `bg-hover` and
- * `bg-active` are a few percent alpha, under the threshold. `GooLayer`
- * thresholds the shapes' coverage instead and fills the result with their own
- * token, read from their fill class, so translucent and opaque fills melt
- * alike.
- */
-
-import { animate, motion, type Transition, useMotionValue, type ValueAnimationTransition } from 'motion/react'
-import { type ReactNode, useId, useLayoutEffect, useRef, useState } from 'react'
-import { useReduceMotion } from './reduced-motion'
-import { spring } from './springs'
-import type { ItemRect } from './use-fluid-hover'
-import { GOO_BLUR_RATIO, GOO_MATRIX } from './use-morph'
-import { cn } from './utils'
-
-// Any coverage counts as solid before the blur, so a 4%-alpha fill melts like an opaque one.
-const COVERAGE = '0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 255 0'
-// The share of its cross size a retracting blob keeps: it thins into a neck instead of a point.
-const NECK = 0.5
-
-function union(a: ItemRect | null, b: ItemRect): ItemRect {
-  if (!a) return b
-  const left = Math.min(a.left, b.left)
-  const top = Math.min(a.top, b.top)
-  return {
-    left,
-    top,
-    width: Math.max(a.left + a.width, b.left + b.width) - left,
-    height: Math.max(a.top + a.height, b.top + b.height) - top,
-  }
-}
-
-function pad(rect: ItemRect, by: number): ItemRect {
-  return { left: rect.left - by, top: rect.top - by, width: rect.width + by * 2, height: rect.height + by * 2 }
-}
-
-function center(rect: ItemRect) {
-  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
-}
-
-/** A move worth a blob: the center travels more than half the indicator's size, not a resize in place. */
-function travels(from: ItemRect, to: ItemRect) {
-  const a = center(from)
-  const b = center(to)
-  return (
-    Math.abs(b.x - a.x) > Math.min(from.width, to.width) / 2 ||
-    Math.abs(b.y - a.y) > Math.min(from.height, to.height) / 2
-  )
-}
-
-/**
- * Where the blob left at `from` goes: the back edge of `to` on each axis that
- * moved, so it follows the indicator and is absorbed, and a neck on the other.
- */
-function retract(from: ItemRect, to: ItemRect): ItemRect {
-  const axis = (start: number, size: number, toStart: number, toSize: number) => {
-    const delta = toStart + toSize / 2 - (start + size / 2)
-    if (Math.abs(delta) < 1) return [start + (size * (1 - NECK)) / 2, size * NECK] as const
-    return [delta > 0 ? toStart : toStart + toSize, 0] as const
-  }
-  const [left, width] = axis(from.left, from.width, to.left, to.width)
-  const [top, height] = axis(from.top, from.height, to.top, to.height)
-  return { left, top, width, height }
-}
-
-function toTarget(rect: ItemRect) {
-  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
-}
-
-function blurOf(el: Element, rect: ItemRect) {
-  const r = Number.parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0
-  return Math.min(r, rect.width / 2, rect.height / 2) * GOO_BLUR_RATIO
-}
-
-interface GooLayerProps {
-  /** Filter on: the shapes melt into one. Off at rest. */
-  active: boolean
-  /** Blur in px: the shapes' radius times `GOO_BLUR_RATIO`. */
-  blur: number
-  /** The layer's box in the container's coordinates, covering every shape; padded for the blur here. */
-  box: ItemRect | null
-  /** The shapes' classes (a bg token, a radius): the melted result is filled with their background. */
-  fill: string
-  /** The shapes, positioned in the container's coordinates. */
-  children?: ReactNode
-}
-
-/** A box of shapes that melt into one while `active`. The filter's region follows the box, so keep it tight. */
-export function GooLayer({ active, blur, box, fill, children }: GooLayerProps) {
-  const id = `goo-${useId().replace(/:/g, '')}`
-  const flood = useRef<SVGFEFloodElement>(null)
-  const probe = useRef<HTMLDivElement>(null)
-  const layer = box ? pad(box, blur * 3) : { left: 0, top: 0, width: 0, height: 0 }
-
-  // Resolved each time the goo starts, so it follows the scheme.
-  useLayoutEffect(() => {
-    if (!active || !probe.current) return
-    flood.current?.setAttribute('flood-color', getComputedStyle(probe.current).backgroundColor)
-  }, [active])
-
-  return (
-    <>
-      <svg aria-hidden className="absolute size-0">
-        <filter id={id} x="-50%" y="-50%" width="200%" height="200%" colorInterpolationFilters="sRGB">
-          <feColorMatrix in="SourceGraphic" values={COVERAGE} result="coverage" />
-          <feGaussianBlur in="coverage" stdDeviation={blur} result="blur" />
-          <feColorMatrix in="blur" values={GOO_MATRIX} result="goo" />
-          <feFlood ref={flood} />
-          <feComposite in2="goo" operator="in" />
-        </filter>
-      </svg>
-      <div
-        aria-hidden
-        className="pointer-events-none absolute"
-        // Geometry is the shapes' own; the filter is the effect itself, melting their token fill.
-        style={{ ...layer, filter: active ? `url(#${id})` : undefined }}
-      >
-        {/* Zero-sized, so it paints nothing: it carries the fill token for the flood and maps the shapes back to the container's coordinates. */}
-        <div ref={probe} className={cn(fill, 'absolute')} style={{ left: -layer.left, top: -layer.top }}>
-          {children}
-        </div>
-      </div>
-    </>
-  )
-}
-
-interface Trail {
-  id: number
-  from: ItemRect
-  to: ItemRect
-}
-
-interface GooIndicatorProps {
-  /** The rect to sit on, in the container's coordinates (as `useFluidHover` measures them). */
-  rect: ItemRect
-  /** Where it first appears; it then travels to `rect`. Defaults to `rect`. */
-  from?: ItemRect | null
-  /** Fill and radius classes: a bg token and the shape's radius. */
-  className?: string
-  /** Shadow class. While it melts, the shapes are drawn again beneath the goo with it, since the filter flattens shadows. */
-  shadow?: string
-  /** The travel: a spring tier. `false` snaps (a reflow, reduced motion). Defaults to `spring.moderate`. */
-  transition?: Transition | false
-  /** Opacity of the whole indicator, faded on `spring.fast`. Defaults to `1`. */
-  opacity?: number
-}
-
-/**
- * An indicator that travels between items with a liquid neck. Render it in the
- * items' `relative` container, beneath them: the items' text stays above it,
- * unfiltered.
- */
-export function GooIndicator({
-  rect,
-  from,
-  className,
-  shadow,
-  transition = spring.moderate,
-  opacity = 1,
-}: GooIndicatorProps) {
-  const reduced = useReduceMotion()
-  const start = from ?? rect
-  const x = useMotionValue(start.left)
-  const y = useMotionValue(start.top)
-  const width = useMotionValue(start.width)
-  const height = useMotionValue(start.height)
-  const lead = useRef<HTMLDivElement>(null)
-  const [trails, setTrails] = useState<Trail[]>([])
-  const [blur, setBlur] = useState(0)
-  const ids = useRef(0)
-  const travel = transition === false || reduced ? false : transition
-  const travelRef = useRef(travel)
-  travelRef.current = travel
-  const read = () => ({ left: x.get(), top: y.get(), width: width.get(), height: height.get() })
-
-  // Only a new rect moves it: the transition is often an inline object.
-  useLayoutEffect(() => {
-    const move = travelRef.current as ValueAnimationTransition<number> | false
-    const current = read()
-    if (!move) {
-      x.jump(rect.left)
-      y.jump(rect.top)
-      width.jump(rect.width)
-      height.jump(rect.height)
-      return
-    }
-    const goo = lead.current && travels(current, rect) ? blurOf(lead.current, current) : 0
-    // Square shapes have no radius to melt with.
-    if (goo >= 1) {
-      setBlur(goo)
-      setTrails(list => [...list, { id: ++ids.current, from: current, to: retract(current, rect) }])
-    }
-    animate(x, rect.left, move)
-    animate(y, rect.top, move)
-    animate(width, rect.width, move)
-    animate(height, rect.height, move)
-  }, [rect.left, rect.top, rect.width, rect.height])
-
-  const melting = trails.length > 0
-  const linger = travel ? { ...travel, delay: (travel.duration ?? 0) / 3 } : undefined
-  const shape = cn('pointer-events-none absolute top-0 left-0', className)
-  const box = trails.reduce<ItemRect>((all, trail) => union(all, trail.from), union(read(), rect))
-  const drop = (trail: Trail) => setTrails(list => list.filter(t => t.id !== trail.id))
-
-  return (
-    <motion.div
-      aria-hidden
-      className="pointer-events-none absolute top-0 left-0"
-      initial={false}
-      animate={{ opacity }}
-      transition={{ duration: spring.fast.duration }}
-    >
-      {shadow && (
-        <>
-          {/* Fading as it shrinks: the goo lets a sliver vanish, a crisp shadow would not. */}
-          {trails.map(trail => (
-            <motion.div
-              key={trail.id}
-              className={cn(shape, shadow)}
-              initial={{ ...toTarget(trail.from), opacity: 1 }}
-              animate={{ ...toTarget(trail.to), opacity: 0 }}
-              transition={linger}
-            />
-          ))}
-          <motion.div className={cn(shape, shadow, !melting && 'invisible')} style={{ x, y, width, height }} />
-        </>
-      )}
-      <GooLayer active={melting} blur={blur} box={box} fill={className ?? ''}>
-        {trails.map(trail => (
-          <motion.div
-            key={trail.id}
-            className={shape}
-            initial={toTarget(trail.from)}
-            animate={toTarget(trail.to)}
-            transition={linger}
-            onAnimationComplete={() => drop(trail)}
-          />
-        ))}
-        {/* At rest it wears its own shadow; melting, a shadow would count as coverage and swell the goo. */}
-        <motion.div ref={lead} className={cn(shape, !melting && shadow)} style={{ x, y, width, height }} />
-      </GooLayer>
-    </motion.div>
-  )
-}
-
-export type { GooIndicatorProps, GooLayerProps }
-export { union }