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

package/components/overlays/popover/anchored-demo.tsx

@@ -1,59 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): the docs stage of the
- * Popover page's anchored example. A field whose icon opens a panel anchored
- * to the whole field, focus moving into the list and back to the text, so
- * the example can hold its refs and the picked value.
- */
-
-import { History } from 'lucide-react'
-import { useRef, useState } from 'react'
-import Button from '../../button'
-import Input, { InputAction } from '../../inputs/input'
-import Popover from './index'
-
-const RECENT = ['Quarterly report', 'Invoices from March', 'Design review notes']
-
-export default function AnchoredDemo() {
-  const field = useRef<HTMLDivElement | null>(null)
-  const input = useRef<HTMLInputElement | null>(null)
-  const first = useRef<HTMLButtonElement | null>(null)
-  const [value, setValue] = useState('')
-
-  return (
-    <div ref={field} className="w-80 max-w-full">
-      <Popover>
-        <Input
-          ref={input}
-          variant="bordered"
-          placeholder="Search documents"
-          value={value}
-          onChange={setValue}
-          endAdornment={<Popover.Trigger render={<InputAction label="Recent searches" icon={History} />} />}
-        />
-        <Popover.Content
-          anchor={field}
-          align="start"
-          sideOffset={8}
-          // From the keyboard, straight onto the first result; a click leaves the caret in the field.
-          initialFocus={type => (type === 'keyboard' ? first.current : false)}
-          finalFocus={input}
-          className="w-[var(--anchor-width)] max-w-none gap-0 p-1"
-        >
-          <Popover.Title className="sr-only">Recent searches</Popover.Title>
-          {RECENT.map((item, i) => (
-            <Popover.Close
-              key={item}
-              ref={i === 0 ? first : undefined}
-              render={
-                <Button variant="ghost" className="w-full justify-start">
-                  {item}
-                </Button>
-              }
-              onClick={() => setValue(item)}
-            />
-          ))}
-        </Popover.Content>
-      </Popover>
-    </div>
-  )
-}

package/components/overlays/popover/examples.mdx

@@ -1,203 +0,0 @@
-import Popover from './index'
-import Button from '../../button'
-import { InputGroup } from '../../inputs/input'
-import AnchoredDemo from './anchored-demo'
-
-# Basics
-
-## Edit profile
-
-The panel oozes out of the trigger through a liquid neck, then lets go. Escape or a press outside closes it back into the button.
-
-<Popover>
-  <Popover.Trigger render={<Button variant="secondary">Edit profile</Button>} />
-  <Popover.Content className="w-72 gap-3">
-    <div className="flex flex-col gap-1">
-      <Popover.Title>Edit profile</Popover.Title>
-      <Popover.Description>Update how others see you.</Popover.Description>
-    </div>
-    <InputGroup>
-      <InputGroup.Field index={0} label="Name" placeholder="Ada Lovelace" />
-      <InputGroup.Field index={1} label="Username" placeholder="@ada" />
-    </InputGroup>
-    <div className="flex justify-end">
-      <Popover.Close render={<Button size="compact">Save</Button>} />
-    </div>
-  </Popover.Content>
-</Popover>
-
-## Hover
-
-With `openOnHover` the trigger opens it on hover too; a tap still toggles it on touch.
-
-<Popover>
-  <Popover.Trigger openOnHover delay={100} closeDelay={120} render={<Button variant="tertiary">Hover me</Button>} />
-  <Popover.Content>
-    <Popover.Title>Liquid preview</Popover.Title>
-    <Popover.Description>Move away and it melts back into the button.</Popover.Description>
-  </Popover.Content>
-</Popover>
-
-## Any element as the trigger
-
-`render` takes any element, and the trigger's children fill it when it has none of its own. Pass `nativeButton={false}` when it isn't a `<button>`: Base UI adds the role and the keyboard handling.
-
-<Popover>
-  <Popover.Trigger
-    nativeButton={false}
-    render={<span className="cursor-pointer weight-medium text-foreground underline decoration-border underline-offset-4" />}
-  >
-    Ada Lovelace
-  </Popover.Trigger>
-  <Popover.Content>
-    <Popover.Title>Ada Lovelace</Popover.Title>
-    <Popover.Description>Wrote the first published program.</Popover.Description>
-  </Popover.Content>
-</Popover>
-
-# Placement
-
-## Sides
-
-Each side keeps the neck between trigger and panel; near a viewport edge the panel flips.
-
-<div className="flex flex-wrap items-center justify-center gap-3">
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">Top</Button>} />
-    <Popover.Content side="top">
-      <Popover.Description>Above the trigger.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">Right</Button>} />
-    <Popover.Content side="right">
-      <Popover.Description>To the right.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">Bottom</Button>} />
-    <Popover.Content side="bottom">
-      <Popover.Description>Below the trigger.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">Left</Button>} />
-    <Popover.Content side="left">
-      <Popover.Description>To the left.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-</div>
-
-## Align
-
-`align` lines the panel up with the trigger's start edge, its center (the default) or its end edge; the neck stays between them.
-
-<div className="flex flex-wrap items-center justify-center gap-3">
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">Start</Button>} />
-    <Popover.Content align="start">
-      <Popover.Description>Lined up with the trigger's start edge.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">Center</Button>} />
-    <Popover.Content align="center">
-      <Popover.Description>Centered on the trigger.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">End</Button>} />
-    <Popover.Content align="end">
-      <Popover.Description>Lined up with the trigger's end edge.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-</div>
-
-## Anchored to a field
-
-`anchor` positions the panel against another element than its trigger, here
-the whole field around the icon, and the panel grows out of that box.
-`--anchor-width` sizes it to the field. `initialFocus` moves focus to the
-first result when it opens from the keyboard and leaves the caret in the field
-on a click; `finalFocus` hands focus back to the text, so typing goes on.
-`AnchoredDemo` is a docs stage that holds the refs and the picked value:
-
-```tsx
-const field = useRef(null)
-const input = useRef(null)
-const first = useRef(null)
-
-<div ref={field}>
-  <Popover>
-    <Input ref={input} endAdornment={<Popover.Trigger render={<InputAction label="Recent searches" icon={History} />} />} />
-    <Popover.Content
-      anchor={field}
-      align="start"
-      initialFocus={type => (type === 'keyboard' ? first.current : false)}
-      finalFocus={input}
-      className="w-[var(--anchor-width)] max-w-none"
-    >
-      …
-    </Popover.Content>
-  </Popover>
-</div>
-```
-
-<AnchoredDemo />
-
-# Behavior
-
-## Morph
-
-`effect="morph"` with `hideSource`: the trigger itself grows into the panel and shrinks back, one continuous surface.
-
-<Popover>
-  <Popover.Trigger render={<Button variant="secondary">Add note</Button>} />
-  <Popover.Content effect="morph" hideSource className="w-72 gap-3">
-    <Popover.Title>Add note</Popover.Title>
-    <InputGroup>
-      <InputGroup.Field index={0} label="Note" placeholder="Write something…" />
-    </InputGroup>
-    <div className="flex justify-end">
-      <Popover.Close render={<Button size="compact">Done</Button>} />
-    </div>
-  </Popover.Content>
-</Popover>
-
-## Sources
-
-`from` changes where the surface starts: the press point grows a circle under the cursor, `center` unfolds the panel in place.
-
-<div className="flex flex-wrap items-center justify-center gap-3">
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">From the pointer</Button>} />
-    <Popover.Content from="pointer">
-      <Popover.Description>A circle from where you pressed.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-  <Popover>
-    <Popover.Trigger render={<Button variant="secondary">From its center</Button>} />
-    <Popover.Content from="center" effect="morph">
-      <Popover.Description>Unfolds from its own center.</Popover.Description>
-    </Popover.Content>
-  </Popover>
-</div>
-
-## Dismissal
-
-`onOpenChange` gets Base UI's change details with the open state: `details.reason` says what asked (`'escape-key'`, `'outside-press'`, `'trigger-press'`, `'close-press'`, …) and `details.cancel()` keeps the popover as it is. This one ignores a press outside; Escape or Done close it.
-
-<Popover
-  onOpenChange={(open, details) => {
-    if (!open && details.reason === 'outside-press') details.cancel()
-  }}
->
-  <Popover.Trigger render={<Button variant="secondary">Pin a note</Button>} />
-  <Popover.Content className="w-72 gap-3">
-    <Popover.Title>Pinned note</Popover.Title>
-    <Popover.Description>Click around the page: it stays until you close it.</Popover.Description>
-    <div className="flex justify-end">
-      <Popover.Close render={<Button size="compact">Done</Button>} />
-    </div>
-  </Popover.Content>
-</Popover>

package/components/overlays/popover/index.tsx

@@ -1,317 +0,0 @@
-/*
- * Local addition (not part of Fluid Functionalism): a morphing popover. The
- * panel grows out of its trigger through `lib/use-morph.ts`, with the goo neck
- * by default. After beUI's gooey popover (github.com/starc007/ui-components
- * `components/motion/popover.tsx` @ de52f337e520e7ee37749b36eb1c32df86137bcb —
- * MIT © 2026 Saurabh Chauhan, notice: LICENSE.beui) and motion-primitives'
- * morphing popover (github.com/ibelick/motion-primitives
- * `components/core/morphing-popover.tsx` @ 120f64f6ca60348e251f929e9c81f11ccbe45eda
- * — MIT © 2024 ibelick, notice: LICENSE.motion-primitives). Behavior is Base
- * UI's Popover; neither project's own dismissal, gesture or positioning code
- * is ported.
- */
-
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
-import {
-  type ComponentProps,
-  createContext,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-  type RefObject,
-  useContext,
-  useImperativeHandle,
-  useMemo,
-} from 'react'
-import { MorphSurface } from '../../../lib/morph-layers'
-import { useShape } from '../../../lib/shape-context'
-import { type SlotProps, slotId, slotRender } from '../../../lib/slot'
-import { SURFACE_BG, SURFACE_SHADOW } from '../../../lib/surface-classes'
-import { SurfaceProvider, useSurface } from '../../../lib/surface-context'
-import { useControllableState } from '../../../lib/use-controllable-state'
-import { inPlaceOffset, type MorphOrigin, opensInPlace, useMorph, useMorphOrigin } from '../../../lib/use-morph'
-import { cn } from '../../../lib/utils'
-
-interface PopoverContextValue {
-  open: boolean
-  origin: RefObject<MorphOrigin>
-}
-
-const PopoverContext = createContext<PopoverContextValue>({ open: false, origin: { current: {} } })
-
-interface PopoverTriggerProps extends SlotProps {
-  /** Open on hover as well as on press (a tap still toggles it on touch). Defaults to `false`. */
-  openOnHover?: boolean
-  /** Hover delay before opening, in ms. Needs `openOnHover`. Defaults to `300`. */
-  delay?: number
-  /** Delay before closing once the pointer leaves, in ms. Needs `openOnHover`. Defaults to `0`. */
-  closeDelay?: number
-}
-
-const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(
-  ({ render, asChild, children, ...props }, ref) => {
-    const el = slotRender(render, asChild, children)
-    return el ? (
-      <PopoverPrimitive.Trigger ref={ref} render={el} {...props} id={slotId(el, props.id)} />
-    ) : (
-      <PopoverPrimitive.Trigger ref={ref} {...props}>
-        {children}
-      </PopoverPrimitive.Trigger>
-    )
-  },
-)
-PopoverTrigger.displayName = 'PopoverTrigger'
-
-const PopoverClose = forwardRef<HTMLButtonElement, SlotProps>(({ render, asChild, children, ...props }, ref) => {
-  const el = slotRender(render, asChild, children)
-  return el ? (
-    <PopoverPrimitive.Close ref={ref} render={el} {...props} />
-  ) : (
-    <PopoverPrimitive.Close ref={ref} {...props}>
-      {children}
-    </PopoverPrimitive.Close>
-  )
-})
-PopoverClose.displayName = 'PopoverClose'
-
-type PositionerProps = ComponentProps<typeof PopoverPrimitive.Positioner>
-type PopupProps = ComponentProps<typeof PopoverPrimitive.Popup>
-
-/** What the panel is positioned against: an element, a ref to one, a virtual element (`{ getBoundingClientRect }`), or a function returning either. */
-type PopoverAnchor = PositionerProps['anchor']
-
-/** Resolves an `anchor` to the element the panel grows from; a virtual or missing anchor gives `null`. */
-function anchorElement(anchor: PopoverAnchor): HTMLElement | null {
-  const resolved = typeof anchor === 'function' ? anchor() : anchor
-  const el = resolved && 'current' in resolved ? resolved.current : resolved
-  return el instanceof HTMLElement ? el : null
-}
-
-interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
-  /** Side of the anchor the panel opens on; it flips when there is no room. Defaults to `'bottom'`. */
-  side?: 'top' | 'right' | 'bottom' | 'left'
-  /** Alignment along that side. Defaults to `'center'`, or `'start'` when the panel opens in place (`effect="morph"` with `hideSource`). */
-  align?: 'start' | 'center' | 'end'
-  /** Gap between anchor and panel in px — the length of the goo neck. Ignored when the panel opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `12`. */
-  sideOffset?: number
-  /** Shift along the aligned edge in px, after `align` (a number, or Base UI's function of side, align and sizes). Defaults to `0`. */
-  alignOffset?: PositionerProps['alignOffset']
-  /** What the panel is positioned against instead of the trigger: an element, a ref to one, a virtual element (`{ getBoundingClientRect }`) or a function returning either. An element anchor is also where the panel grows from, and sets `--anchor-width` / `--anchor-height` for sizing the panel to it. Defaults to the trigger. */
-  anchor?: PopoverAnchor
-  /** Space kept between the panel and the edge of its collision boundary, in px or per side. Defaults to `5`. */
-  collisionPadding?: PositionerProps['collisionPadding']
-  /** The area the panel must stay inside: an element, several, or a rect. Defaults to `'clipping-ancestors'`. */
-  collisionBoundary?: PositionerProps['collisionBoundary']
-  /** Where focus goes when the panel opens: a ref, `false` to leave it, `true` for the default, or a function of how it opened (`'mouse'`, `'touch'`, `'pen'`, `'keyboard'`). Defaults to the panel itself. */
-  initialFocus?: PopupProps['initialFocus']
-  /** Where focus goes when the panel closes: a ref, `false` to leave it, `true` for the default, or a function of how it closed. Defaults to the trigger. */
-  finalFocus?: PopupProps['finalFocus']
-  /** Where the panel grows from (see Morph): the pressed trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to the `anchor` when it is an element, otherwise `'trigger'`. */
-  from?: 'trigger' | 'pointer' | 'center' | 'top' | 'right' | 'bottom' | 'left' | RefObject<HTMLElement | null>
-  /** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
-  effect?: 'goo' | 'morph' | 'slide' | 'fade'
-  /** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
-  hideSource?: boolean
-  /** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
-  tier?: 'moderate' | 'slow'
-  /** Portal target. Defaults to the document body. */
-  container?: HTMLElement | null
-  /** Classes for the panel's content box: padding, width, layout. */
-  className?: string
-  /** The panel's content. Everything inside reads the popover's surface level as its substrate. */
-  children?: ReactNode
-}
-
-const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
-  (
-    {
-      side = 'bottom',
-      align,
-      sideOffset = 12,
-      alignOffset,
-      anchor,
-      collisionPadding,
-      collisionBoundary,
-      initialFocus,
-      finalFocus,
-      from,
-      effect,
-      hideSource,
-      tier,
-      container,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { open, origin } = useContext(PopoverContext)
-    // An element anchor is the morph's source, read as the morph starts (a
-    // ref fills after this render). A virtual anchor has no box to grow
-    // from, so the panel grows from the trigger.
-    const anchorSource = useMemo<RefObject<HTMLElement | null> | undefined>(
-      () =>
-        anchor
-          ? {
-              get current() {
-                return anchorElement(anchor) ?? origin.current?.trigger ?? null
-              },
-            }
-          : undefined,
-      [anchor, origin],
-    )
-    const morph = useMorph(open, origin, {
-      from: from ?? anchorSource,
-      effect,
-      hideSource,
-      tier,
-      // A custom `finalFocus` places focus itself; the morph's own return
-      // to the trigger would undo it.
-      returnFocus: typeof finalFocus === 'boolean' ? finalFocus : finalFocus === undefined,
-    })
-    const inPlace = opensInPlace({ effect, hideSource })
-    useImperativeHandle(ref, () => morph.popup as HTMLDivElement, [morph.popup])
-    const shape = useShape()
-    // Fixed shadow, like the dropdown and select menus (see Elevated).
-    const level = Math.min(useSurface() + 2, 8)
-
-    return (
-      <PopoverPrimitive.Portal container={container ?? undefined}>
-        <PopoverPrimitive.Positioner
-          side={side}
-          align={align ?? (inPlace ? 'start' : 'center')}
-          sideOffset={inPlace ? inPlaceOffset : sideOffset}
-          alignOffset={alignOffset}
-          anchor={anchor}
-          collisionPadding={collisionPadding}
-          collisionBoundary={collisionBoundary}
-          className="z-50 outline-none"
-        >
-          <PopoverPrimitive.Popup
-            ref={morph.popupRef}
-            initialFocus={initialFocus}
-            finalFocus={finalFocus}
-            className="relative outline-none"
-            {...props}
-          >
-            <SurfaceProvider value={level}>
-              <MorphSurface
-                morph={morph}
-                bg={SURFACE_BG[level]}
-                shadow={SURFACE_SHADOW[3]}
-                radius={shape.container}
-                className={cn('flex w-max max-w-[min(92vw,20rem)] flex-col gap-1 p-4', className)}
-              >
-                {children}
-              </MorphSurface>
-            </SurfaceProvider>
-          </PopoverPrimitive.Popup>
-        </PopoverPrimitive.Positioner>
-      </PopoverPrimitive.Portal>
-    )
-  },
-)
-PopoverContent.displayName = 'PopoverContent'
-
-const PopoverTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <PopoverPrimitive.Title
-      ref={ref}
-      className={cn('text-subtitle weight-semibold text-foreground', className)}
-      {...props}
-    />
-  ),
-)
-PopoverTitle.displayName = 'PopoverTitle'
-
-const PopoverDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <PopoverPrimitive.Description
-      ref={ref}
-      className={cn('text-caption text-muted-foreground', className)}
-      {...props}
-    />
-  ),
-)
-PopoverDescription.displayName = 'PopoverDescription'
-
-/** What `onOpenChange` receives besides the open state: Base UI's Popover change details. */
-type PopoverOpenChangeDetails = PopoverPrimitive.Root.ChangeEventDetails
-
-interface PopoverProps {
-  /** Controlled open state. Pair with `onOpenChange`. */
-  open?: boolean
-  /** Initial open state, for an uncontrolled popover. Defaults to `false`. */
-  defaultOpen?: boolean
-  /** Called when the popover opens or closes, with Base UI's change details: `reason` (`'escape-key'`, `'outside-press'`, `'trigger-press'`, …), the `event`, and `cancel()` to keep it as it is. */
-  onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void
-  /** Trap focus and block page interaction while open. Defaults to `false`. */
-  modal?: boolean
-  /** The trigger and the panel — `Popover.Trigger` plus a `Popover.Content`. */
-  children?: ReactNode
-}
-
-/**
- * A panel that oozes out of its trigger: the surface melts out of the button
- * through a liquid neck, then lets go and settles beside it.
- *
- * The morph comes from the shared engine (see Morph), so the panel can grow
- * from the trigger (the default), the press point, its own center, a viewport
- * edge or any element, with the goo neck, a plain morph, a slide or a fade.
- * It closes back into wherever it came from. The panel lifts 2 surface levels
- * off its substrate and re-provides that level. Built on Base UI's Popover:
- * it opens on press, or on hover too with `openOnHover`; it flips to the
- * other side when there is no room; Escape and an outside press close it.
- * `onOpenChange` hears why (`details.reason`) and can `details.cancel()` it.
- *
- * Statics:
- * - `Popover.Trigger` — the control that opens it: `render={<Button/>}` or
- *   `asChild`; `openOnHover`, `delay`, `closeDelay`. Children fill a render
- *   element that has none of its own (`render={<span/>}` + children), and
- *   `nativeButton={false}` tells Base UI it isn't a `<button>`.
- * - `Popover.Content` — the panel: `side`, `align` (the trigger's `start`,
- *   `center` or `end`), `sideOffset`, `alignOffset`, `anchor` (position it
- *   against another element than the trigger, which it then grows from),
- *   `collisionPadding`, `collisionBoundary`, `initialFocus`, `finalFocus`
- *   and the morph options `from`, `effect`, `hideSource`, `tier`.
- * - `Popover.Title` / `Popover.Description` — its labelled heading and
- *   supporting line, wired for screen readers.
- * - `Popover.Close` — closes it; same `render` / `asChild` shape.
- *
- * @example {@include ./examples.mdx}
- */
-function Popover({ open, defaultOpen = false, onOpenChange, modal = false, children }: PopoverProps) {
-  // The change is reported here, not through the state hook, so the
-  // handler gets Base UI's details and can cancel it.
-  const [current, setCurrent] = useControllableState(open, defaultOpen)
-  const { origin, capture } = useMorphOrigin()
-  const ctx = useMemo(() => ({ open: current, origin }), [current, origin])
-
-  return (
-    <PopoverContext.Provider value={ctx}>
-      <PopoverPrimitive.Root
-        open={current}
-        modal={modal}
-        onOpenChange={(next, details) => {
-          onOpenChange?.(next, details)
-          if (details.isCanceled) return
-          if (next) capture(details)
-          setCurrent(next)
-        }}
-      >
-        {children}
-      </PopoverPrimitive.Root>
-    </PopoverContext.Provider>
-  )
-}
-
-Popover.Trigger = PopoverTrigger
-Popover.Content = PopoverContent
-Popover.Title = PopoverTitle
-Popover.Description = PopoverDescription
-Popover.Close = PopoverClose
-
-export type { PopoverContentProps, PopoverOpenChangeDetails, PopoverProps, PopoverTriggerProps }
-export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger }
-
-export default Popover

package/components/overlays/preview-card/examples.mdx

@@ -1,61 +0,0 @@
-import PreviewCard from './index'
-
-# Link preview
-
-Hover the link: after a short delay the card oozes out of it, and the pointer can travel into the card without closing it.
-
-<p className="max-w-md text-body text-muted-foreground">
-  This port takes its looks from{' '}
-  <PreviewCard>
-    <PreviewCard.Trigger href="https://www.fluidfunctionalism.com">Fluid Functionalism</PreviewCard.Trigger>
-    <PreviewCard.Content className="w-72">
-      <div className="flex items-center gap-3">
-        <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-accent text-subtitle weight-semibold text-accent-foreground">FF</span>
-        <div className="flex min-w-0 flex-col gap-0.5">
-          <span className="text-subtitle weight-semibold text-foreground">Fluid Functionalism</span>
-          <span className="text-caption text-muted-foreground">fluidfunctionalism.com</span>
-        </div>
-      </div>
-      <p className="text-caption text-muted-foreground">A component registry layering springs, a fluid hover, a size ladder and elevated surfaces over Radix or Base UI.</p>
-    </PreviewCard.Content>
-  </PreviewCard>{' '}
-  and its behavior from Base UI.
-</p>
-
-# Profile
-
-A mention that previews the person behind it. `delay` shortens the wait before it opens.
-
-<p className="max-w-md text-body text-muted-foreground">
-  The first notes on the engine came from{' '}
-  <PreviewCard>
-    <PreviewCard.Trigger href="#" delay={200}>@ada</PreviewCard.Trigger>
-    <PreviewCard.Content side="top" className="w-64">
-      <div className="flex items-center gap-3">
-        <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-brand/15 text-subtitle weight-semibold text-brand">AL</span>
-        <div className="flex min-w-0 flex-col gap-0.5">
-          <span className="text-subtitle weight-semibold text-foreground">Ada Lovelace</span>
-          <span className="text-caption text-muted-foreground">@ada</span>
-        </div>
-      </div>
-      <p className="text-caption text-muted-foreground">Writes programs for engines that do not exist yet.</p>
-    </PreviewCard.Content>
-  </PreviewCard>{' '}
-  before the first commit.
-</p>
-
-# Morph
-
-`effect="morph"` grows the card out of the link without the liquid neck.
-
-<p className="max-w-md text-body text-muted-foreground">
-  Read the{' '}
-  <PreviewCard>
-    <PreviewCard.Trigger href="#">morph engine</PreviewCard.Trigger>
-    <PreviewCard.Content effect="morph" className="w-64">
-      <span className="text-subtitle weight-semibold text-foreground">Morph</span>
-      <p className="text-caption text-muted-foreground">One progress value on a spring tier carries the surface from its source to its own box.</p>
-    </PreviewCard.Content>
-  </PreviewCard>{' '}
-  docs for every source and effect.
-</p>