27:T8516,
/** A surface the hand moves: dragged by the pointer, or focused and moved by the
 *  arrows (shift for larger steps). A press on a control inside stays the control's. */
function Draggable({
  label,
  className,
  children,
}: {
  label: string
  className?: string
  children: React.ReactNode
}) {
  const [at, setAt] = React.useState({ x: 0, y: 0 })
  const grip = React.useRef<{ x: number; y: number } | null>(null)
  return (
    <div
      role="application"
      aria-roledescription="movable card"
      aria-label={`${label}, arrows move it`}
      // biome-ignore lint/a11y/noNoninteractiveTabindex: an application the arrows move takes focus
      tabIndex={0}
      className={cn(
        "absolute cursor-grab touch-none select-none rounded-3xl active:cursor-grabbing",
        className,
      )}
      // Moved by its margin, never a transform: a transform makes a stacking
      // context, which a fluid glass's blended words then isolate, and its frost
      // would see nothing of the picture outside it.
      style={{ marginLeft: at.x, marginTop: at.y }}
      onPointerDown={(e) => {
        if ((e.target as HTMLElement).closest("button")) return
        e.currentTarget.setPointerCapture(e.pointerId)
        grip.current = { x: e.clientX - at.x, y: e.clientY - at.y }
      }}
      onPointerMove={(e) => {
        const g = grip.current
        if (g) setAt({ x: e.clientX - g.x, y: e.clientY - g.y })
      }}
      onPointerUp={() => {
        grip.current = null
      }}
      onKeyDown={(e) => {
        const step = e.shiftKey ? 48 : 12
        const by: Record<string, [number, number]> = {
          ArrowLeft: [-step, 0],
          ArrowRight: [step, 0],
          ArrowUp: [0, -step],
          ArrowDown: [0, step],
        }
        const d = by[e.key]
        if (!d) return
        e.preventDefault()
        setAt((p) => ({ x: p.x + d[0], y: p.y + d[1] }))
      }}
    >
      {children}
    </div>
  )
}

<MaterialProvider material="glass">
  <Backdrop src="/lightbox/wide.jpg" className="h-[28rem] rounded-xl">
    <div className="flex items-center gap-2 p-4">
      <Button>over the sky</Button>
      <Button variant="secondary" size="icon" aria-label="play">
        <Play />
      </Button>
      <Badge>light</Badge>
    </div>
    <div className="absolute right-4 bottom-4 flex items-center gap-2">
      <Badge>dark</Badge>
      <Button variant="secondary" size="icon" aria-label="pause">
        <Pause />
      </Button>
      <Button>over the ground</Button>
    </div>
    <Draggable label="adaptive card" className="top-16 left-[30%]">
      <Panel className="w-56 gap-2 p-4 text-sm">
        <p className="font-medium">adaptive</p>
        <p className="opacity-75">
          one scheme, read from the picture under the whole card
        </p>
        <Button
          className="mt-1 self-start"
          size="sm"
          icon={<SkipForward />}
        >
          next
        </Button>
      </Panel>
    </Draggable>
    <Draggable label="fluid card" className="top-40 left-[58%]">
      <AdaptiveGlass
        fluid
        shape="surface"
        className="flex w-56 flex-col gap-2 p-4 text-sm [--glass-radius:--theme(--radius-3xl)]"
      >
        <p className="font-medium">fluid</p>
        <p className="opacity-80">
          no scheme: dark words where the glass is light, light where it
          is dark
        </p>
      </AdaptiveGlass>
    </Draggable>
  </Backdrop>
</MaterialProvider>
26:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$27"}}]