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

package/primitives/craft/index.tsx

@@ -1,76 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the Craft page, a docs
- * stage in the spirit of fluidfunctionalism.com/docs/skill's before/after
- * pairs. Each comparison puts the naive version (`./demos.tsx`, rules broken
- * on purpose) next to the system's own items.
- */
-
-import type { ReactNode } from 'react'
-import Badge from '../../components/badge'
-import { useShape } from '../../lib/shape-context'
-import { cn } from '../../lib/utils'
-
-interface PaneProps {
-  verdict: 'bad' | 'good'
-  note?: string
-  children: ReactNode
-}
-
-function Pane({ verdict, note, children }: PaneProps) {
-  const shape = useShape()
-
-  return (
-    // A subgrid, so both panes share the stage and caption rows and their stages line up.
-    <figure className={cn('row-span-2 m-0 grid min-w-0 grid-rows-subgrid gap-0 ring-1 ring-border', shape.container)}>
-      <div className="flex min-h-40 items-center justify-center p-4">{children}</div>
-      <figcaption className="flex items-start gap-2 border-t border-border px-4 py-3">
-        <Badge variant="dot" size="compact" color={verdict === 'bad' ? 'red' : 'green'}>
-          {verdict === 'bad' ? 'Bad' : 'Good'}
-        </Badge>
-        {note && <span className="text-caption text-muted-foreground">{note}</span>}
-      </figcaption>
-    </figure>
-  )
-}
-
-interface CraftProps {
-  /** The naive version: the same interface with the detail missing. */
-  bad: ReactNode
-  /** The system's version, with the detail in place. */
-  good: ReactNode
-  /** What goes wrong on the bad side, in one line. */
-  badNote?: string
-  /** What the good side does instead, in one line. */
-  goodNote?: string
-  /** Classes for the root grid. */
-  className?: string
-}
-
-/**
- * The details that make an interface feel finished, each one shown without
- * and with it.
- *
- * Every pair below isolates one rule of the system: the bad side is the
- * version most component libraries ship, the good side is this design
- * system's own item. Try both: press, hover between rows, click and then tab,
- * open and close. The rules themselves are on the Motion, FluidHover,
- * Morph, Elevated and SizeProvider pages; this one is where they can be felt.
- * `Craft` is the frame: the two versions side by side, each with a one-line
- * verdict, stacked on narrow screens.
- *
- * @example {@include ./examples.mdx}
- */
-export default function Craft({ bad, good, badNote, goodNote, className }: CraftProps) {
-  return (
-    <div className={cn('grid w-full gap-3 sm:grid-cols-2', className)}>
-      <Pane verdict="bad" note={badNote}>
-        {bad}
-      </Pane>
-      <Pane verdict="good" note={goodNote}>
-        {good}
-      </Pane>
-    </div>
-  )
-}
-
-export type { CraftProps }

package/primitives/fluid-hover/examples.mdx

@@ -1,84 +0,0 @@
-import ScrollArea from '../scroll-area'
-import FluidHover from './index'
-
-# Blink or glide
-
-Plain `:hover` blinks off in every gap; this one glides, melting from row to
-row. Run the cursor down the rows, into the padding and past the last row.
-
-<div className="w-64 rounded-xl border border-border/60">
-  <FluidHover className="p-2" items={['Inbox', 'Drafts', 'Sent', 'Archive', 'Trash']} />
-</div>
-
-# 3 axes
-
-The same highlight down a list, across a strip and to the closest card.
-
-<div className="flex w-full max-w-md flex-col gap-8">
-  <div className="flex flex-col gap-2">
-    <span className="text-caption text-muted-foreground">axis y — lists: menus, tables, radios</span>
-    <div className="rounded-xl border border-border/60">
-      <FluidHover className="p-2" items={['Inbox', 'Drafts', 'Sent', 'Archive', 'Trash']} />
-    </div>
-  </div>
-  <div className="flex flex-col gap-2">
-    <span className="text-caption text-muted-foreground">axis x — strips: tabs, segmented controls</span>
-    <div className="w-max rounded-xl border border-border/60">
-      <FluidHover axis="x" className="p-1" items={['Library', 'Recents', 'Favorites', 'Settings']} />
-    </div>
-  </div>
-  <div className="flex flex-col gap-2">
-    <span className="text-caption text-muted-foreground">axis xy — grids: card groups</span>
-    <FluidHover columns={2} className="rounded-xl border border-border/60 p-2">
-      {[
-        { title: 'Inbox', description: 'Everything new lands here.' },
-        { title: 'Drafts', description: 'Unsent, saved as you type.' },
-        { title: 'Sent', description: 'Delivered and archived.' },
-        { title: 'Trash', description: 'Emptied after 30 days.' },
-      ].map((card) => (
-        <FluidHover.Item key={card.title}>
-          <span className="text-body text-foreground">{card.title}</span>
-          <span className="text-caption text-muted-foreground">{card.description}</span>
-        </FluidHover.Item>
-      ))}
-    </FluidHover>
-  </div>
-</div>
-
-# When to split a list
-
-The workspace rows, nested chats included, are one list; the account rows
-below the divider are a second. Knowledge is disabled.
-
-<div className="w-64 rounded-xl border border-border/60">
-  <FluidHover className="p-2">
-    <FluidHover.Item>Chat</FluidHover.Item>
-    <FluidHover.Item className="text-muted-foreground"><span className="w-4 shrink-0" />Today</FluidHover.Item>
-    <FluidHover.Item className="text-muted-foreground"><span className="w-4 shrink-0" />Yesterday</FluidHover.Item>
-    <FluidHover.Item>Agents</FluidHover.Item>
-    <FluidHover.Item disabled>Knowledge</FluidHover.Item>
-    <FluidHover.Item>Runs</FluidHover.Item>
-  </FluidHover>
-  <div className="h-px bg-border" />
-  <FluidHover className="p-2" items={['Profile', 'Log out']} />
-</div>
-
-# What it costs
-
-60 rows, and the work per move does not grow with them.
-
-<ScrollArea viewportClassName="scroll-fade" className="h-72 w-72 rounded-xl border border-border/60">
-  <FluidHover
-    className="p-2"
-    items={Array.from({ length: 60 }, (_, i) => 'Message ' + String(i + 1).padStart(3, '0'))}
-  />
-</ScrollArea>
-
-# Reduced motion
-
-This list follows the reduce-motion setting of the system it runs on: turn
-it on to see the highlight fade in place instead of sliding.
-
-<div className="w-64 rounded-xl border border-border/60">
-  <FluidHover className="p-2" items={['Inbox', 'Drafts', 'Sent', 'Archive', 'Trash']} />
-</div>

package/primitives/fluid-hover/index.tsx

@@ -1,316 +0,0 @@
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `app/docs/fluid-hover/page.tsx` + `app/docs/fluid-hover/demos.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - Upstream ships fluid hover as a hook plus a highlight component, demoed on the
- *   docs page through local `FluidRow` / `CostRow` helpers. This item wraps that
- *   pair in one documented container (`FluidHover` + `FluidHover.Item`) so the modo
- *   examples can show all three axes without hooks. The mechanism is untouched and
- *   still lives in `lib/use-fluid-hover.ts` and
- *   `lib/fluid-hover-highlight.tsx`; both are re-exported here unchanged.
- * - `items`, `renderItem`, `disabledIndices`, `columns` and `highlightClassName` are
- *   this container's own API; `axis` and `gapClick` are the hook's options, passed
- *   straight through.
- * - Row classes are upstream's `rowClass` from `demos.tsx`, with per-axis variants
- *   for the strip and the grid; the highlight rides the shape system (`shape.bg`),
- *   as in upstream's `FluidHoverList`.
- * - Prose and examples follow the FF `/docs/fluid-hover` page (its five sections,
- *   minus the two scripted-cursor demos that only exist to film the mechanism).
- * - The prose describes the highlight as it now moves: it melts from row to
- *   row (`lib/goo-indicator.tsx`, local), with the cost of that while it moves.
- * - Styling reads DS tokens (AGENTS.md styling): `text-[Npx]` →
- *   `text-<role>[-compact]`; the hex focus-ring fallback →
- *   `ring-focus-ring` / `border-focus-ring`.
- */
-
-import {
-  Children,
-  cloneElement,
-  createContext,
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type HTMLAttributes,
-  isValidElement,
-  type MutableRefObject,
-  type ReactElement,
-  type ReactNode,
-  type RefAttributes,
-  useContext,
-  useMemo,
-  useRef,
-} from 'react'
-import { FluidHoverHighlight } from '../../lib/fluid-hover-highlight'
-import { useShape } from '../../lib/shape-context'
-import { useFluidHover, useRegisterFluidHoverItem } from '../../lib/use-fluid-hover'
-import { cn } from '../../lib/utils'
-
-type FluidHoverAxis = 'x' | 'y' | 'xy'
-
-interface FluidHoverContextValue {
-  registerItem: (index: number, element: HTMLElement | null) => void
-  axis: FluidHoverAxis
-}
-
-const FluidHoverContext = createContext<FluidHoverContextValue | null>(null)
-
-function isItemDisabled(element: HTMLElement) {
-  return element.hasAttribute('data-disabled')
-}
-
-const itemBaseClass =
-  'relative z-10 flex shrink-0 cursor-pointer items-center text-left text-body text-foreground outline-none focus-visible:ring-1 focus-visible:ring-focus-ring'
-
-const itemAxisClass: Record<FluidHoverAxis, string> = {
-  y: 'h-9 w-full px-3',
-  x: 'h-9 justify-center whitespace-nowrap px-3',
-  xy: 'min-h-20 w-full flex-col items-start justify-center gap-0.5 p-3',
-}
-
-const containerAxisClass: Record<FluidHoverAxis, string> = {
-  y: 'flex flex-col gap-1',
-  x: 'flex flex-row gap-1',
-  xy: 'grid gap-1',
-}
-
-interface FluidHoverItemProps extends HTMLAttributes<HTMLButtonElement> {
-  /** Position in the list. Assigned automatically to direct children of `FluidHover`; pass it by hand for rows rendered inside a wrapper of your own. */
-  index?: number
-  /** Skips the row: never lit, never the target of a gap click. It stays registered, so its neighbours keep their indices. Defaults to `false`. */
-  disabled?: boolean
-  /** The row's content — a label, or an icon plus text, or (on `xy`) a title over a description. */
-  children?: ReactNode
-  /** Classes for the row, merged over the per-axis defaults. */
-  className?: string
-}
-
-/**
- * One row of a fluid hover list: a real button, focusable and activatable from
- * the keyboard, announced by its label. It registers itself with the
- * surrounding `FluidHover` for as long as it is mounted; outside one it is
- * just a button.
- */
-const FluidHoverItem = forwardRef<HTMLButtonElement, FluidHoverItemProps>(
-  ({ index, disabled = false, className, children, ...props }, ref) => {
-    const list = useContext(FluidHoverContext)
-    const shape = useShape()
-    const innerRef = useRef<HTMLButtonElement | null>(null)
-    useRegisterFluidHoverItem(list?.registerItem, index, innerRef)
-    const axis = list?.axis ?? 'y'
-    return (
-      <button
-        ref={node => {
-          innerRef.current = node
-          if (typeof ref === 'function') ref(node)
-          else if (ref) (ref as MutableRefObject<HTMLButtonElement | null>).current = node
-        }}
-        type="button"
-        data-slot="fluid-hover-item"
-        // Read back by `isItemDisabled` on every move: the hit test skips the
-        // row without the list having to re-measure.
-        data-disabled={disabled || undefined}
-        disabled={disabled}
-        {...props}
-        className={cn(
-          itemBaseClass,
-          itemAxisClass[axis],
-          shape.item,
-          disabled && 'cursor-default text-muted-foreground opacity-55',
-          className,
-        )}
-      >
-        {children}
-      </button>
-    )
-  },
-)
-
-FluidHoverItem.displayName = 'FluidHoverItem'
-
-interface FluidHoverProps extends HTMLAttributes<HTMLDivElement> {
-  /** Which way the list runs: `'y'` for lists, `'x'` for strips, `'xy'` for grids. Defaults to `'y'`, or `'xy'` when `columns` is above 1. */
-  axis?: FluidHoverAxis
-  /** Grid columns. Above 1 the container becomes a grid and resolves the nearest item across rows and columns. Defaults to `1`, or `2` when `axis` is `'xy'`. */
-  columns?: number
-  /** Shorthand rows: one `FluidHover.Item` per string, indexed in order. Omit it and pass `FluidHover.Item` children instead. */
-  items?: string[]
-  /** Renders the content of a shorthand row. Defaults to the string itself. */
-  renderItem?: (item: string, index: number) => ReactNode
-  /** Rows to skip: never lit, never the target of a gap click. They stay registered, so their neighbours keep their indices. */
-  disabledIndices?: number[]
-  /** Whether a click that lands between rows goes to the lit one, so what is lit is what a click hits. `false` leaves empty space inert; `{ maxDistance }` routes only clicks within that many pixels of the lit row. Defaults to `true`. */
-  gapClick?: boolean | { maxDistance?: number }
-  /** Classes for the highlight itself — radius and z-index. Merged over `absolute bg-hover` and the shape system's radius. */
-  highlightClassName?: string
-  /** Classes for the list container. Padding here is part of the list: a click in it still lands on the lit row. */
-  className?: string
-  /** `FluidHover.Item` rows, when `items` is not enough. Direct Item children are indexed in order. */
-  children?: ReactNode
-}
-
-type FluidHoverComponent = ForwardRefExoticComponent<FluidHoverProps & RefAttributes<HTMLDivElement>> & {
-  Item: typeof FluidHoverItem
-}
-
-/**
- * Hover that never blinks and always follows your cursor to the nearest item.
- *
- * One rule, no dead zones: an item the pointer is inside wins, and otherwise
- * the item whose center is nearest does — so a cursor in a gap, in the
- * padding, or past the last row still lands on something, and a click there
- * lands on what is lit (`gapClick`). One list is one FluidHover: it owns the
- * container's mouse handlers, hands every row its index, and draws the single
- * highlight that melts between the measured rectangles, stretching toward the
- * next row and letting go (the liquid indicators in Morph).
- *
- * Three axes, one feel. `y` is for lists — menus, tables, radio rows — and
- * measures the vertical center; `x` is for strips — tabs, segmented controls —
- * and measures the horizontal one; `xy` is for card grids, where the nearest
- * card is the shortest straight line to a center across both rows and columns.
- * Pass `columns` and the container becomes that grid and picks `xy` on its own.
- *
- * Split a list at the divider. Rows that are alternatives to each other share
- * one list — children ride with their parent — and the highlight never crosses
- * into a different kind of thing: that is a second FluidHover. A disabled row
- * is skipped rather than unregistered (`disabledIndices`, or `disabled` on the
- * row), so the rows around it keep their indices and their measurements.
- *
- * It costs 1 transform and 1 loop per move: the pick is one pass
- * over cached rectangles per animation frame, with no DOM reads per row, and
- * the highlight travels on a transform. While it melts, a shrinking blob and
- * the goo filter join it, and both are gone once it settles, so a resting
- * highlight is filtered by nothing. Reduced motion is honoured on its own,
- * read straight off the OS media query with no MotionConfig wrapper needed:
- * the highlight still fades in on the nearest row, it just stops travelling
- * between rows.
- *
- * Use it when everything in the list can be clicked (a menu, a list, tabs, a
- * grid of links), when the items sit close together, and when they stay where
- * they are while you look at them. Skip it when a wrong click would hurt, when
- * only some of the cards can be clicked, when there is a lot of empty space
- * around the items, or when rows change place as you scroll.
- *
- * Statics: FluidHover.Item — one row, rendered as a real button (focusable,
- * activatable from the keyboard, announced by its label); the hook only lights
- * it, it never moves focus.
- *
- * For a list this container cannot express, the machinery is re-exported
- * unchanged. `useFluidHover(containerRef, { axis, isItemDisabled, gapClick })`
- * returns `{ handlers, registerItem, activeIndex, setActiveIndex, itemRects,
- * isMeasured, remeasure, sessionRef }`: spread `handlers` on the container,
- * give each row `useRegisterFluidHoverItem(registerItem, index, ref)`, light a
- * row yourself with `setActiveIndex` for keyboard focus, and call `remeasure`
- * when the rects may be stale (a popup opening on rows that never unmounted).
- * `FluidHoverHighlight` then draws the fill: `hover` is the hook's return
- * value, `hidden` keeps the state but shows nothing, `from` is where a fresh
- * entry fades in (a dropdown passes its checked row), `className` carries
- * radius and z-index, and `transition` is the travel — `false` snaps into
- * place after a reflow instead of sliding.
- *
- * @example {@include ./examples.mdx}
- */
-const FluidHover = forwardRef<HTMLDivElement, FluidHoverProps>(
-  (
-    {
-      axis,
-      columns,
-      items,
-      renderItem,
-      disabledIndices,
-      gapClick = true,
-      highlightClassName,
-      className,
-      children,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    const containerRef = useRef<HTMLDivElement | null>(null)
-    const shape = useShape()
-
-    const resolvedAxis: FluidHoverAxis = axis ?? ((columns ?? 1) > 1 ? 'xy' : 'y')
-    const resolvedColumns = resolvedAxis === 'xy' ? Math.max(1, columns ?? 2) : 1
-
-    const hover = useFluidHover(containerRef, {
-      axis: resolvedAxis,
-      isItemDisabled,
-      gapClick,
-    })
-    const { handlers, registerItem } = hover
-
-    const contextValue = useMemo<FluidHoverContextValue>(
-      () => ({ registerItem, axis: resolvedAxis }),
-      [registerItem, resolvedAxis],
-    )
-
-    const disabled = new Set(disabledIndices)
-    // Rows come either from `items` (the container renders them) or from
-    // Item children (the container only hands them their index). A child that
-    // is not an Item keeps its slot but never registers, and the hit test
-    // skips the hole it leaves in the rects.
-    const rows = items
-      ? items.map((item, i) => (
-          <FluidHoverItem key={`${i}-${item}`} index={i} disabled={disabled.has(i)}>
-            {renderItem ? renderItem(item, i) : item}
-          </FluidHoverItem>
-        ))
-      : Children.toArray(children).map((child, i) => {
-          if (!isValidElement(child) || child.type !== FluidHoverItem) return child
-          const row = child as ReactElement<FluidHoverItemProps>
-          return cloneElement(row, {
-            index: row.props.index ?? i,
-            disabled: row.props.disabled ?? disabled.has(i),
-          })
-        })
-
-    return (
-      <FluidHoverContext.Provider value={contextValue}>
-        <div
-          ref={node => {
-            containerRef.current = node
-            if (typeof ref === 'function') ref(node)
-            else if (ref) (ref as MutableRefObject<HTMLDivElement | null>).current = node
-          }}
-          {...props}
-          {...handlers}
-          data-slot="fluid-hover"
-          data-axis={resolvedAxis}
-          className={cn('relative', containerAxisClass[resolvedAxis], className)}
-          style={
-            resolvedAxis === 'xy'
-              ? {
-                  gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
-                  ...style,
-                }
-              : style
-          }
-        >
-          <FluidHoverHighlight hover={hover} className={cn('z-0', shape.bg, highlightClassName)} />
-          {rows}
-        </div>
-      </FluidHoverContext.Provider>
-    )
-  },
-) as FluidHoverComponent
-
-FluidHover.displayName = 'FluidHover'
-
-Object.assign(FluidHover, { Item: FluidHoverItem })
-
-export type { FluidHoverHighlightProps } from '../../lib/fluid-hover-highlight'
-export { FluidHoverHighlight } from '../../lib/fluid-hover-highlight'
-export type {
-  ItemRect,
-  UseFluidHoverOptions,
-  UseFluidHoverReturn,
-} from '../../lib/use-fluid-hover'
-// The mechanism itself, unchanged — for lists this container cannot express.
-export {
-  useFluidHover,
-  useRegisterFluidHoverItem,
-} from '../../lib/use-fluid-hover'
-export type { FluidHoverAxis, FluidHoverItemProps, FluidHoverProps }
-export { FluidHover, FluidHoverItem }
-
-export default FluidHover

package/primitives/morph/examples.mdx

@@ -1,139 +0,0 @@
-import Checkbox from '../../components/inputs/checkbox'
-import Radio from '../../components/inputs/radio'
-import Switch from '../../components/inputs/switch'
-import Tabs from '../../components/navigation/tabs'
-import TabsSubtle from '../../components/navigation/tabs-subtle'
-import FluidHover from '../fluid-hover'
-import Morph from './index'
-
-# Overlays
-
-## Effects
-
-The same panel, four ways in. Goo is the default: the surface melts out of the trigger and pinches off.
-
-<div className="flex w-full flex-wrap items-start justify-center gap-x-6 gap-y-48 pb-40">
-  <Morph effect="goo" label="Goo">
-    <div className="flex flex-col gap-1">
-      <span className="text-subtitle weight-semibold text-foreground">Goo</span>
-      <span className="text-caption text-muted-foreground">A liquid neck to the trigger, then the panel lets go.</span>
-    </div>
-  </Morph>
-  <Morph effect="morph" label="Morph">
-    <div className="flex flex-col gap-1">
-      <span className="text-subtitle weight-semibold text-foreground">Morph</span>
-      <span className="text-caption text-muted-foreground">The trigger's box grows into the panel.</span>
-    </div>
-  </Morph>
-  <Morph effect="slide" label="Slide">
-    <div className="flex flex-col gap-1">
-      <span className="text-subtitle weight-semibold text-foreground">Slide</span>
-      <span className="text-caption text-muted-foreground">The finished panel travels in from the trigger.</span>
-    </div>
-  </Morph>
-  <Morph effect="fade" label="Fade">
-    <div className="flex flex-col gap-1">
-      <span className="text-subtitle weight-semibold text-foreground">Fade</span>
-      <span className="text-caption text-muted-foreground">No movement: what every effect becomes under reduced motion.</span>
-    </div>
-  </Morph>
-</div>
-
-## Sources
-
-`from` picks the starting point. Press the pointer stage anywhere on the button to see the circle start under your cursor; the edges start at the side of the window.
-
-<div className="flex w-full flex-wrap items-start justify-center gap-x-6 gap-y-48 pb-40">
-  <Morph from="trigger" label="Trigger">
-    <span className="text-caption text-muted-foreground">From the pressed trigger.</span>
-  </Morph>
-  <Morph from="pointer" label="Pointer">
-    <span className="text-caption text-muted-foreground">From the press point, as a circle.</span>
-  </Morph>
-  <Morph from="center" label="Center">
-    <span className="text-caption text-muted-foreground">Unfolds from its own center.</span>
-  </Morph>
-  <Morph from="left" label="Left edge">
-    <span className="text-caption text-muted-foreground">From the left side of the window.</span>
-  </Morph>
-  <Morph from="bottom" label="Bottom edge">
-    <span className="text-caption text-muted-foreground">From the bottom of the window.</span>
-  </Morph>
-</div>
-
-## Becoming the panel
-
-With `hideSource`, the trigger disappears while the panel is open, so it reads as turning into it. With `effect="morph"` too, the panel opens in place, over its trigger: press the panel to close it.
-
-<div className="flex w-full flex-wrap items-start justify-center gap-x-6 gap-y-48 pb-40">
-  <Morph hideSource label="Goo">
-    <span className="text-caption text-muted-foreground">The trigger melts into the panel.</span>
-  </Morph>
-  <Morph hideSource effect="morph" label="Morph">
-    <span className="text-caption text-muted-foreground">The trigger grows into the panel.</span>
-  </Morph>
-</div>
-
-## Two speeds
-
-Goo always runs on `spring.goo`, so the neck has time to stretch; a plain morph takes a tier: `moderate` for small panels, `slow` by default.
-
-<div className="flex w-full flex-wrap items-start justify-center gap-x-6 gap-y-48 pb-40">
-  <Morph effect="morph" tier="moderate" label="Moderate">
-    <span className="text-caption text-muted-foreground">spring.moderate</span>
-  </Morph>
-  <Morph effect="morph" tier="slow" label="Slow">
-    <span className="text-caption text-muted-foreground">spring.slow</span>
-  </Morph>
-</div>
-
-# Indicators
-
-## Liquid indicators
-
-Click a tab next door: the indicator stretches toward it and lets go. Click a far one: a droplet stays behind and catches up.
-
-<div className="flex flex-col items-center gap-6">
-  <Tabs defaultValue="library">
-    <Tabs.List>
-      <Tabs.Item value="library" label="Library" />
-      <Tabs.Item value="recents" label="Recents" />
-      <Tabs.Item value="favorites" label="Favorites" />
-      <Tabs.Item value="settings" label="Settings" />
-    </Tabs.List>
-  </Tabs>
-  <TabsSubtle defaultSelectedIndex={0}>
-    {['Teamspaces', 'Recents', 'Favorites', 'Shared'].map((label, i) => (
-      <TabsSubtle.Item key={label} index={i} label={label} />
-    ))}
-  </TabsSubtle>
-</div>
-
-## Thumbs, picks and highlights
-
-The thumb melts across its track, the radio pick flows between rows, and the hover highlight drips from row to row.
-
-<div className="flex flex-wrap items-start justify-center gap-6">
-  <div className="flex flex-col gap-2">
-    <Switch label="Wi-Fi" />
-    <Switch label="Bluetooth" defaultChecked />
-  </div>
-  <Radio.Group defaultSelectedIndex={0} className="w-48">
-    {['Daily', 'Weekly', 'Monthly'].map(label => (
-      <Radio key={label} label={label} />
-    ))}
-  </Radio.Group>
-  <div className="w-48 rounded-xl border border-border/60">
-    <FluidHover className="p-2" items={['Inbox', 'Drafts', 'Sent', 'Archive']} />
-  </div>
-</div>
-
-## Merging picks
-
-Check Bananas: it grows out of its row and melts the picks above and below into one. Uncheck it to pinch them apart.
-
-<Checkbox.Group defaultCheckedIndices={[0, 2]}>
-  {['Apples', 'Bananas', 'Cherries', 'Dates'].map(label => (
-    <Checkbox key={label} label={label} />
-  ))}
-</Checkbox.Group>