{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-hover-card",
  "type": "registry:component",
  "title": "Hover card",
  "description": "A rich surface previewed from a name, on hover or on focus",
  "author": "sudo-kw <https://github.com/sudo-kw>",
  "dependencies": [
    "@gpuix/native@0.11.0",
    "@gpuix/react@0.11.0",
    "effect@4.1.2",
    "react@^19.2.4"
  ],
  "registryDependencies": [
    "https://gpuixui.sudokw.com/gpuix-motion.json",
    "https://gpuixui.sudokw.com/gpuix-primitives.json",
    "https://gpuixui.sudokw.com/gpuix-tokens.json",
    "https://gpuixui.sudokw.com/gpuix-tw.json"
  ],
  "files": [
    {
      "path": "packages/components/src/hover-card.tsx",
      "target": "@ui/gpuixui/components/hover-card.tsx",
      "type": "registry:component",
      "content": "/** @jsxImportSource @gpuix/react */\nimport type {\n  EventPayload,\n  KeyEvent,\n  PublicInstance,\n  StyleDesc,\n} from \"@gpuix/react\";\nimport { useGpuix } from \"@gpuix/react\";\nimport {\n  FloatingLayer,\n  floatingRootStyle,\n  mergeStyles,\n} from \"@gpuix/react/floating\";\nimport { HOVER_CARD_CONTENT } from \"../tw/index.js\";\nimport {\n  createContext,\n  useContext,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type RefObject,\n} from \"react\";\nimport { Button, type ButtonProps } from \"./internal/button.js\";\nimport { hoverDelay } from \"./internal/clock.js\";\nimport { useControllableState } from \"./internal/controllable.js\";\nimport { dismissTopLayer, pushDismissLayer } from \"./internal/dismiss-layer.js\";\nimport { DismissScope, useDismissDepth } from \"./internal/dismiss-scope.js\";\nimport { useHoverDelays } from \"./internal/hover.js\";\nimport { isDismiss } from \"./internal/key.js\";\nimport { overlaySurfaceStyle } from \"./internal/overlay.js\";\nimport {\n  assertParts,\n  type PartChildren,\n  type PartComponent,\n  type PartsContract,\n} from \"./internal/parts.js\";\nimport {\n  fadeFromAnchor,\n  PresenceShield,\n  presenceMotion,\n  presenceStyle,\n  useSurfacePresence,\n  useSurfaceTiming,\n} from \"./internal/presence.js\";\nimport { useMergedRef } from \"./internal/ref.js\";\nimport { useTheme } from \"./internal/theme.js\";\nimport { usePlacement } from \"./internal/use-placement.js\";\n\ninterface HoverCardContextValue {\n  readonly open: boolean;\n  readonly hover: ReturnType<typeof useHoverDelays>;\n  readonly trigger: RefObject<PublicInstance | null>;\n\n  readonly dismissedByOutsidePress: RefObject<boolean>;\n}\n\nconst HoverCardContext = createContext<HoverCardContextValue | undefined>(\n  undefined,\n);\n\nconst useHoverCard = (): HoverCardContextValue => {\n  const value = useContext(HoverCardContext);\n  if (value === undefined) {\n    throw new Error(\"HoverCard parts must be used inside HoverCard\");\n  }\n  return value;\n};\n\nexport interface HoverCardProps {\n  readonly open?: boolean;\n\n  readonly defaultOpen?: boolean;\n  readonly onOpenChange?: (open: boolean) => void;\n\n  readonly openDelay?: number;\n\n  readonly closeDelay?: number;\n  readonly children?: PartChildren;\n}\n\nconst OPEN_DELAY_MS = 700;\nconst CLOSE_DELAY_MS = 300;\n\nexport const HoverCard = ({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  openDelay = OPEN_DELAY_MS,\n  closeDelay = CLOSE_DELAY_MS,\n  children,\n}: HoverCardProps) => {\n  const [open, setOpen] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const trigger = useRef<PublicInstance | null>(null);\n  const dismissedByOutsidePress = useRef(false);\n  const hover = useHoverDelays({\n    open,\n    setOpen,\n    openDelay: hoverDelay(openDelay, OPEN_DELAY_MS),\n    closeDelay: hoverDelay(closeDelay, CLOSE_DELAY_MS),\n  });\n\n  const context = useMemo<HoverCardContextValue>(\n    () => ({ open, hover, trigger, dismissedByOutsidePress }),\n    [hover, open],\n  );\n\n  assertParts(hoverCardRoot, children);\n\n  return (\n    <HoverCardContext.Provider value={context}>\n      <div style={floatingRootStyle()}>{children}</div>\n    </HoverCardContext.Provider>\n  );\n};\n\nexport type HoverCardTriggerProps = ButtonProps;\n\nexport const HoverCardTrigger = ({\n  onClick,\n  onFocus,\n  onBlur,\n  ref,\n  disabled = false,\n  variant = \"link\",\n  ...rest\n}: HoverCardTriggerProps) => {\n  const { open, hover, trigger, dismissedByOutsidePress } = useHoverCard();\n  const setTrigger = useMergedRef<PublicInstance | null>(trigger, ref);\n\n  const pressed = useRef(false);\n\n  useLayoutEffect(() => {\n    if (disabled) hover.cancelOpening();\n  }, [disabled, hover]);\n\n  return (\n    <Button\n      {...rest}\n      ref={setTrigger}\n      disabled={disabled}\n      variant={variant}\n      aria-expanded={open}\n      onMouseEnter={(event) => {\n        rest.onMouseEnter?.(event);\n        if (disabled) return;\n        hover.pointer(\"trigger\", true);\n      }}\n      onMouseDown={(event) => {\n        rest.onMouseDown?.(event);\n        pressed.current = true;\n      }}\n      onMouseLeave={(event) => {\n        rest.onMouseLeave?.(event);\n        pressed.current = false;\n        if (disabled) return;\n        hover.pointer(\"trigger\", false);\n      }}\n      onFocus={(event) => {\n        onFocus?.(event);\n        if (disabled) return;\n        if (pressed.current) return;\n        hover.focus(\"trigger\", true);\n      }}\n      onBlur={(event) => {\n        onBlur?.(event);\n        pressed.current = false;\n        hover.focus(\"trigger\", false);\n      }}\n      onClick={(event: EventPayload) => {\n        pressed.current = false;\n        onClick?.(event);\n\n        if (dismissedByOutsidePress.current) {\n          dismissedByOutsidePress.current = false;\n          return;\n        }\n        hover.cancel();\n        hover.request(!open);\n      }}\n      onKeyDown={(event: KeyEvent) => {\n        rest.onKeyDown?.(event);\n        if (isDismiss(event)) hover.request(false);\n      }}\n    />\n  );\n};\n\nexport interface HoverCardContentProps {\n  readonly label?: string;\n\n  readonly side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  readonly align?: \"start\" | \"center\" | \"end\";\n\n  readonly sideOffset?: number;\n\n  readonly collisionPadding?: number;\n\n  readonly className?: string;\n\n  readonly style?: StyleDesc;\n  readonly testId?: string;\n  readonly children?: PartChildren;\n}\n\nexport const HoverCardContent = ({\n  label,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  collisionPadding = 8,\n  className,\n  style,\n  testId,\n  children,\n}: HoverCardContentProps) => {\n  const theme = useTheme();\n  const { open, hover, trigger, dismissedByOutsidePress } = useHoverCard();\n  const renderer = useGpuix().renderer;\n  const surface = useRef<PublicInstance | null>(null);\n  const timing = useSurfaceTiming(\"fast\");\n  const presence = useSurfacePresence(open, timing);\n  const placement = usePlacement({\n    open: presence.mounted,\n    side,\n    align,\n    margin: collisionPadding,\n    trigger,\n    surface,\n  });\n\n  const close = useRef<() => void>(() => undefined);\n  useLayoutEffect(() => {\n    close.current = () => hover.request(false);\n  });\n\n  const depth = useDismissDepth();\n  useLayoutEffect(() => {\n    if (!open) return;\n    return pushDismissLayer((event) => {\n      close.current();\n      if (event.eventType === \"keyDown\") {\n        const target = trigger.current;\n        if (target !== null) renderer?.focusElement?.(target.id);\n        return;\n      }\n\n      dismissedByOutsidePress.current = true;\n      queueMicrotask(() => {\n        dismissedByOutsidePress.current = false;\n      });\n    }, depth);\n  }, [depth, dismissedByOutsidePress, open, renderer, trigger]);\n\n  if (!presence.mounted) return null;\n\n  return (\n    <FloatingLayer\n      motion={presenceMotion(fadeFromAnchor(placement.side, 4), presence)}\n      side={placement.side}\n      align={placement.align}\n      sideOffset={sideOffset}\n      alignOffset={placement.alignOffset}\n      collisionPadding={collisionPadding}\n      role=\"group\"\n      aria-label={label}\n      tabIndex={-1}\n      ref={surface}\n      testId={testId}\n      onMouseEnter={() => hover.pointer(\"content\", true)}\n      onMouseLeave={() => hover.pointer(\"content\", false)}\n      onFocus={() => hover.focus(\"content\", true)}\n      onBlur={() => hover.focus(\"content\", false)}\n      onMouseDownOutside={(event) => dismissTopLayer(event)}\n      onKeyDown={(event: KeyEvent) => {\n        if (isDismiss(event)) dismissTopLayer(event);\n      }}\n      style={mergeStyles(\n        mergeStyles(\n          overlaySurfaceStyle(HOVER_CARD_CONTENT, className, theme),\n\n          { position: \"relative\", ...presenceStyle(presence.present) },\n        ),\n        style,\n      )}\n    >\n      <DismissScope>{children}</DismissScope>\n      <PresenceShield present={presence.present} />\n    </FloatingLayer>\n  );\n};\n\nconst hoverCardParts: ReadonlyArray<PartComponent> = [\n  HoverCard,\n  HoverCardTrigger,\n  HoverCardContent,\n];\n\nconst hoverCardRoot: PartsContract = {\n  parent: \"HoverCard\",\n  family: hoverCardParts,\n  accepts: [HoverCardTrigger, HoverCardContent],\n  hint: \"Put HoverCardTrigger and HoverCardContent directly inside HoverCard.\",\n};\n\nexport const hoverCardMeta = {\n  name: \"Hover card\",\n  tier: 2,\n  status: \"done\",\n  gpuixSupport: \"partial\",\n  limitations: [\n    \"the trigger is a button, not an HTML anchor: 0.11.0 has no link host\",\n    \"no per-trigger delay and no `aria-haspopup`; the waits are the card's\",\n    \"focus opens the card at once, and a Tab out of it closes after the close delay; the runtime does not say how focus arrived\",\n    \"Escape reaches the card through its trigger or its own content; a pointer-opened card with focus elsewhere cannot hear a window Escape, because 0.11.0 delivers window keys only at the application's render handler\",\n  ],\n  docs: \"docs/hover-card.mdx\",\n  example: \"examples/hover-card.example.tsx\",\n  testFile: \"src/behaviour/hover-card.test.tsx\",\n} as const;\n"
    },
    {
      "path": "packages/components/src/internal/button.tsx",
      "target": "@ui/gpuixui/components/internal/button.tsx",
      "type": "registry:component",
      "content": "/** @jsxImportSource @gpuix/react */\nimport type { Props } from \"@gpuix/react\";\nimport type { ReactNode } from \"react\";\nimport {\n  Button as PrimitiveButton,\n  IconButton as PrimitiveIconButton,\n  actionOnColor as primitiveActionOnColor,\n  type ButtonVariant as PrimitiveVariant,\n} from \"../../primitives/button.js\";\nimport { cn } from \"../../tw/index.js\";\nimport * as Schema from \"effect/Schema\";\nimport type { Theme } from \"./theme.js\";\n\nconst ButtonVariants = Schema.Literals([\n  \"primary\",\n  \"secondary\",\n  \"ghost\",\n  \"danger\",\n  \"link\",\n]);\n\nexport type ButtonVariant = typeof ButtonVariants.Type;\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Props {\n  readonly variant?: ButtonVariant;\n\n  readonly size?: ButtonSize;\n\n  readonly disabled?: boolean;\n\n  readonly loading?: boolean;\n\n  readonly loadingLabel?: string;\n\n  readonly reducedMotion?: boolean;\n\n  readonly leading?: ReactNode;\n\n  readonly trailing?: ReactNode;\n}\n\nexport interface IconButtonProps extends Props {\n  readonly label: string;\n\n  readonly size?: ButtonSize;\n  readonly disabled?: boolean;\n}\n\ninterface Look {\n  readonly variant: PrimitiveVariant;\n  readonly className: string;\n}\n\nconst LOOKS: Readonly<Record<ButtonVariant, Look>> = {\n  primary: { variant: \"primary\", className: \"\" },\n  secondary: { variant: \"secondary\", className: \"border border-strong\" },\n  ghost: { variant: \"ghost\", className: \"\" },\n  danger: { variant: \"destructive\", className: \"\" },\n\n  link: { variant: \"link\", className: \"underline underline-offset-4\" },\n};\n\nconst lookOf = (variant: unknown): Look =>\n  LOOKS[Schema.is(ButtonVariants)(variant) ? variant : \"secondary\"];\n\nexport const actionOnColor = (theme: Theme, variant: ButtonVariant): string =>\n  primitiveActionOnColor(theme, lookOf(variant).variant);\n\nexport const Button = ({\n  variant = \"secondary\",\n  size = \"md\",\n  disabled = false,\n  onClick,\n  style,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: ButtonProps) => {\n  const look = lookOf(variant);\n  return (\n    <PrimitiveButton\n      {...rest}\n      variant={look.variant}\n      size={size}\n      disabled={disabled}\n      label={ariaLabel}\n      className={cn(look.className)}\n      onActivate={onClick}\n      style={style}\n    />\n  );\n};\n\nexport const IconButton = ({\n  label,\n  size = \"md\",\n  disabled = false,\n  onClick,\n  style,\n  children,\n  ...rest\n}: IconButtonProps) => (\n  <PrimitiveIconButton\n    {...rest}\n    icon={children}\n    variant=\"ghost\"\n    size={size}\n    disabled={disabled}\n    label={label}\n    className=\"text-muted-foreground hover:text-foreground\"\n    onActivate={onClick}\n    style={style}\n  />\n);\n"
    },
    {
      "path": "packages/components/src/internal/clock.ts",
      "target": "@ui/gpuixui/components/internal/clock.ts",
      "type": "registry:lib",
      "content": "import { Effect } from \"effect\";\nimport * as Clock from \"effect/Clock\";\n\nexport const monotonicNanos = (): bigint =>\n  Effect.runSync(Clock.monotonicTimeNanos);\n\nexport const hoverDelay = (value: number, fallback: number): number =>\n  Number.isFinite(value) ? Math.max(0, value) : fallback;\n"
    },
    {
      "path": "packages/components/src/internal/controllable.ts",
      "target": "@ui/gpuixui/components/internal/controllable.ts",
      "type": "registry:lib",
      "content": "import { useCallback, useState } from \"react\";\n\nexport type ControllableState<Value> = readonly [Value, (next: Value) => void];\n\nexport interface ControllableStateOptions<Value> {\n  readonly value: Value | undefined;\n\n  readonly defaultValue: Value;\n\n  readonly onChange?: (next: Value) => void;\n}\n\nexport const useControllableState = <Value>({\n  value,\n  defaultValue,\n  onChange,\n}: ControllableStateOptions<Value>): ControllableState<Value> => {\n  const [internal, setInternal] = useState(defaultValue);\n  const controlled = value !== undefined;\n\n  const setValue = useCallback(\n    (next: Value) => {\n      if (!controlled) setInternal(next);\n      if (value !== next) onChange?.(next);\n    },\n    [controlled, value, onChange],\n  );\n\n  return [controlled ? value : internal, setValue];\n};\n"
    },
    {
      "path": "packages/components/src/internal/dismiss-layer.ts",
      "target": "@ui/gpuixui/components/internal/dismiss-layer.ts",
      "type": "registry:lib",
      "content": "import type { EventPayload } from \"@gpuix/react\";\nimport * as Arr from \"effect/Array\";\nimport * as Duration from \"effect/Duration\";\nimport * as Option from \"effect/Option\";\nimport * as Order from \"effect/Order\";\nimport { monotonicNanos } from \"./clock.js\";\n\nexport type DismissHandler = (event: EventPayload) => void;\n\ninterface Layer {\n  readonly onDismiss: DismissHandler;\n  readonly depth: number;\n}\n\nlet layers: ReadonlyArray<Layer> = [];\n\nlet dismissedKeystroke: Option.Option<number> = Option.none();\n\ninterface Press {\n  readonly shape: string;\n  readonly at: bigint;\n}\n\nlet dismissedPress: Option.Option<Press> = Option.none();\n\nexport const pointerGestureWindow: Duration.Duration = Duration.millis(64);\n\nconst PRESS_WINDOW_NANOS =\n  BigInt(Duration.toMillis(pointerGestureWindow)) * 1_000_000n;\n\nconst pressShape = (event: EventPayload): string =>\n  Arr.join(\":\")(\n    Arr.map(\n      [event.eventType, event.x, event.y, event.button, event.clickCount],\n      (part) => (part === undefined ? \"\" : `${part}`),\n    ),\n  );\n\nconst consumedPress = (event: EventPayload, now: bigint): boolean => {\n  const shape = pressShape(event);\n  const repeated = Option.exists(\n    dismissedPress,\n    (press) => press.shape === shape && now - press.at <= PRESS_WINDOW_NANOS,\n  );\n  if (!repeated) dismissedPress = Option.some({ shape, at: now });\n  return repeated;\n};\n\nlet lastDismissedPoint: Option.Option<{\n  readonly point: string;\n  readonly at: bigint;\n}> = Option.none();\n\nconst pointOf = (event: EventPayload): string =>\n  Arr.join(\":\")(\n    Arr.map([event.x, event.y, event.button], (part) =>\n      part === undefined ? \"\" : `${part}`,\n    ),\n  );\n\nexport const isDismissalClick = (\n  event: EventPayload,\n  now: bigint = monotonicNanos(),\n): boolean =>\n  Option.exists(\n    lastDismissedPoint,\n    (dismissed) =>\n      dismissed.point === pointOf(event) &&\n      now - dismissed.at <= PRESS_WINDOW_NANOS,\n  );\n\nconst consumedKeystroke = (keystrokeId: number): boolean => {\n  if (Option.contains(dismissedKeystroke, keystrokeId)) return true;\n  dismissedKeystroke = Option.some(keystrokeId);\n  return false;\n};\n\nconst consume = (event: EventPayload, now: bigint): boolean =>\n  Option.match(Option.fromNullishOr(event.keystrokeId), {\n    onNone: () => consumedPress(event, now),\n    onSome: consumedKeystroke,\n  });\n\nconst byDepth: Order.Order<Layer> = Order.mapInput(\n  Order.Number,\n  (layer: Layer) => layer.depth,\n);\n\nconst topmost = (): Option.Option<DismissHandler> =>\n  Option.map(Arr.last(Arr.sort(layers, byDepth)), (layer) => layer.onDismiss);\n\nexport const pushDismissLayer = (\n  onDismiss: DismissHandler,\n  depth: number,\n): (() => void) => {\n  const layer: Layer = { onDismiss, depth };\n  layers = Arr.append(layers, layer);\n  return () => {\n    layers = Arr.filter(layers, (candidate) => candidate !== layer);\n    if (Arr.length(layers) === 0) {\n      dismissedKeystroke = Option.none();\n      dismissedPress = Option.none();\n    }\n  };\n};\n\nexport const dismissTopLayer = (\n  event: EventPayload,\n  now: bigint = monotonicNanos(),\n): boolean => {\n  if (consume(event, now)) return false;\n  return Option.match(topmost(), {\n    onNone: () => false,\n    onSome: (onDismiss) => {\n      lastDismissedPoint = Option.some({ point: pointOf(event), at: now });\n      onDismiss(event);\n      return true;\n    },\n  });\n};\n\nexport const dismissLayerCount = (): number => Arr.length(layers);\n"
    },
    {
      "path": "packages/components/src/internal/dismiss-scope.tsx",
      "target": "@ui/gpuixui/components/internal/dismiss-scope.tsx",
      "type": "registry:component",
      "content": "/** @jsxImportSource @gpuix/react */\nimport { createContext, useContext, type ReactNode } from \"react\";\n\nconst AmbientDepth = createContext(0);\n\nexport const useDismissDepth = (): number => useContext(AmbientDepth) + 1;\n\nexport const DismissScope = ({\n  children,\n}: {\n  readonly children: ReactNode;\n}) => (\n  <AmbientDepth.Provider value={useDismissDepth()}>\n    {children}\n  </AmbientDepth.Provider>\n);\n"
    },
    {
      "path": "packages/components/src/internal/hover.ts",
      "target": "@ui/gpuixui/components/internal/hover.ts",
      "type": "registry:lib",
      "content": "import { Effect } from \"effect\";\nimport { useRef } from \"react\";\nimport { makeLocalState, send, useLocalStore } from \"./local-state.js\";\n\nexport type HoverSurfaceName = \"trigger\" | \"content\";\n\ninterface HoverHold {\n  readonly pointer: Readonly<Record<HoverSurfaceName, boolean>>;\n  readonly focus: Readonly<Record<HoverSurfaceName, boolean>>;\n}\n\nconst released: HoverHold = {\n  pointer: { trigger: false, content: false },\n  focus: { trigger: false, content: false },\n};\n\nconst holdStore = Effect.map(makeLocalState(released), (local) => ({\n  local,\n}));\n\nexport interface HoverTiming {\n  readonly open: boolean;\n  readonly setOpen: (open: boolean) => void;\n\n  readonly openDelay: number;\n\n  readonly closeDelay: number;\n}\n\nexport interface HoverControls {\n  readonly pointer: (surface: HoverSurfaceName, present: boolean) => void;\n\n  readonly focus: (surface: HoverSurfaceName, present: boolean) => void;\n\n  readonly cancel: () => void;\n\n  readonly cancelOpening: () => void;\n\n  readonly request: (open: boolean) => void;\n\n  readonly held: () => boolean;\n}\n\nconst holds = (hold: HoverHold): boolean =>\n  hold.pointer.trigger ||\n  hold.pointer.content ||\n  hold.focus.trigger ||\n  hold.focus.content;\n\nexport const useHoverDelays = (timing: HoverTiming): HoverControls => {\n  const { local } = useLocalStore(holdStore);\n  const latest = useRef(timing);\n  latest.current = timing;\n\n  const cancel = (): void => {\n    send(local.cancel);\n  };\n\n  const request = (open: boolean): void => {\n    if (latest.current.open === open) return;\n    latest.current.setOpen(open);\n  };\n\n  const aim = (open: boolean, delay: number): void => {\n    cancel();\n    send(\n      local.after(\n        delay,\n        Effect.sync(() => {\n          request(open);\n        }),\n      ),\n    );\n  };\n\n  const hold = (\n    channel: \"pointer\" | \"focus\",\n    surface: HoverSurfaceName,\n    present: boolean,\n  ): void => {\n    const state = local.read();\n    const next: HoverHold = {\n      ...state,\n      [channel]: { ...state[channel], [surface]: present },\n    };\n    send(local.write(next));\n\n    if (present) {\n      cancel();\n      if (latest.current.open) return;\n      if (channel === \"focus\") {\n        request(true);\n        return;\n      }\n      aim(true, latest.current.openDelay);\n      return;\n    }\n    if (holds(next)) return;\n    if (!latest.current.open) {\n      cancel();\n      return;\n    }\n    aim(false, latest.current.closeDelay);\n  };\n\n  return {\n    pointer: (surface, present) => hold(\"pointer\", surface, present),\n    focus: (surface, present) => hold(\"focus\", surface, present),\n    cancel,\n    cancelOpening: () => {\n      if (!latest.current.open) cancel();\n    },\n    request,\n    held: () => holds(local.read()),\n  };\n};\n"
    },
    {
      "path": "packages/components/src/internal/key.ts",
      "target": "@ui/gpuixui/components/internal/key.ts",
      "type": "registry:lib",
      "content": "import type { EventPayload, KeyEvent, Props } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\n\nexport type KeyPhase = \"down\" | \"up\";\n\nexport const isActivation = (event: EventPayload, phase: KeyPhase): boolean => {\n  if (event.isHeld === true) return false;\n  if (event.key === \"enter\") return phase === \"down\";\n  return event.key === \"space\" && phase === \"up\";\n};\n\nexport const swallowsDefault = (\n  event: EventPayload,\n  phase: KeyPhase,\n): boolean => event.key === \"space\" && phase === \"down\";\n\nexport const activationHandlers = (\n  activate: (event: KeyEvent) => void,\n  observe: Pick<Props, \"onKeyDown\" | \"onKeyUp\"> = {},\n): Pick<Props, \"onKeyDown\" | \"onKeyUp\"> => ({\n  onKeyDown: (event: KeyEvent) => {\n    if (swallowsDefault(event, \"down\")) event.preventDefault();\n    if (isActivation(event, \"down\")) activate(event);\n    observe.onKeyDown?.(event);\n  },\n  onKeyUp: (event: KeyEvent) => {\n    if (isActivation(event, \"up\")) activate(event);\n    observe.onKeyUp?.(event);\n  },\n});\n\nexport const isEnter = (event: EventPayload): boolean => event.key === \"enter\";\n\nexport const isDown = (event: EventPayload): boolean =>\n  event.key === \"down\" || (event.key === \"n\" && event.modifiers?.ctrl === true);\n\nexport const isUp = (event: EventPayload): boolean =>\n  event.key === \"up\" || (event.key === \"p\" && event.modifiers?.ctrl === true);\n\nexport const isRight = (event: EventPayload): boolean => event.key === \"right\";\n\nexport const isLeft = (event: EventPayload): boolean => event.key === \"left\";\n\nexport const isFirst = (event: EventPayload): boolean => event.key === \"home\";\n\nexport const isLast = (event: EventPayload): boolean => event.key === \"end\";\n\nexport const isPageUp = (event: EventPayload): boolean =>\n  event.key === \"pageup\";\n\nexport const isPageDown = (event: EventPayload): boolean =>\n  event.key === \"pagedown\";\n\nexport const isDismiss = (event: EventPayload): boolean =>\n  event.key === \"escape\";\n\nexport const isTab = (event: EventPayload): boolean => event.key === \"tab\";\n\nexport const isSelectAll = (event: EventPayload): boolean =>\n  event.key === \"a\" &&\n  (event.modifiers?.cmd === true || event.modifiers?.ctrl === true);\n\nexport const isMenuKey = (event: EventPayload): boolean =>\n  (event.key === \"f10\" && event.modifiers?.shift === true) ||\n  event.key === \"contextmenu\";\n\nexport const axisDirection = (\n  event: EventPayload,\n  orientation: \"horizontal\" | \"vertical\",\n): Option.Option<1 | -1> => {\n  if (event.key === \"right\") return Option.some(1);\n  if (event.key === \"left\") return Option.some(-1);\n  if (orientation === \"vertical\") {\n    if (isDown(event)) return Option.some(1);\n    if (isUp(event)) return Option.some(-1);\n  }\n  return Option.none();\n};\n"
    },
    {
      "path": "packages/components/src/internal/local-state.ts",
      "target": "@ui/gpuixui/components/internal/local-state.ts",
      "type": "registry:lib",
      "content": "import { Effect } from \"effect\";\nimport * as Arr from \"effect/Array\";\nimport * as Duration from \"effect/Duration\";\nimport * as Fiber from \"effect/Fiber\";\nimport * as Option from \"effect/Option\";\nimport * as Ref from \"effect/Ref\";\nimport * as SubscriptionRef from \"effect/SubscriptionRef\";\nimport { useEffect, useState, useSyncExternalStore } from \"react\";\n\nexport interface LocalState<A> {\n  readonly state: SubscriptionRef.SubscriptionRef<A>;\n\n  readonly read: () => A;\n\n  readonly subscribe: (listener: () => void) => () => void;\n\n  readonly write: (next: A) => Effect.Effect<void>;\n\n  readonly after: (\n    millis: number,\n    effect: Effect.Effect<void>,\n  ) => Effect.Effect<void>;\n\n  readonly cancel: Effect.Effect<void>;\n\n  readonly running: () => boolean;\n}\n\nexport const makeLocalState = <A>(initial: A): Effect.Effect<LocalState<A>> =>\n  Effect.gen(function* () {\n    const state = yield* SubscriptionRef.make(initial);\n    const timer = yield* Ref.make(Option.none<Fiber.Fiber<void>>());\n    const listeners = yield* Ref.make<ReadonlyArray<() => void>>(Arr.empty());\n\n    const write = Effect.fnUntraced(function* (next: A) {\n      yield* SubscriptionRef.set(state, next);\n      const subscribers = yield* Ref.get(listeners);\n      yield* Effect.sync(() => {\n        Arr.forEach(subscribers, (listener) => listener());\n      });\n    });\n\n    const cancel = Effect.gen(function* () {\n      const held = yield* Ref.getAndSet(timer, Option.none());\n      yield* Option.match(held, {\n        onNone: () => Effect.void,\n        onSome: Fiber.interrupt,\n      });\n    });\n\n    const after = Effect.fnUntraced(function* (\n      millis: number,\n      effect: Effect.Effect<void>,\n    ) {\n      yield* cancel;\n      const fiber = yield* Effect.forkDetach(\n        Effect.sleep(Duration.millis(millis)).pipe(Effect.andThen(effect)),\n      );\n      yield* Ref.set(timer, Option.some(fiber));\n    });\n\n    const running = (): boolean =>\n      Option.exists(\n        Ref.getUnsafe(timer),\n        (fiber) => fiber.pollUnsafe() === undefined,\n      );\n\n    const subscribe = (listener: () => void): (() => void) => {\n      Effect.runSync(\n        Ref.update(listeners, (current) => Arr.append(current, listener)),\n      );\n      return () => {\n        Effect.runSync(\n          Ref.update(listeners, (current) =>\n            Arr.filter(current, (held) => held !== listener),\n          ),\n        );\n      };\n    };\n\n    return {\n      state,\n\n      read: () => SubscriptionRef.getUnsafe(state),\n      subscribe,\n      write,\n      after,\n      cancel,\n      running,\n    };\n  });\n\ninterface Teardown {\n  readonly local: { readonly cancel: Effect.Effect<void> };\n}\n\nexport const useLocalStore = <Store extends Teardown>(\n  make: Effect.Effect<Store>,\n): Store => {\n  const [store] = useState(() => Effect.runSync(make));\n  useEffect(() => () => send(store.local.cancel), [store]);\n  return store;\n};\n\nexport const send = (command: Effect.Effect<void>): void => {\n  Effect.runFork(command);\n};\n\nexport const useLocalState = <A>(local: LocalState<A>): A =>\n  useSyncExternalStore(local.subscribe, local.read, local.read);\n\nexport const useLocalSlice = <A, B>(\n  local: LocalState<A>,\n  select: (state: A) => B,\n): B =>\n  useSyncExternalStore(\n    local.subscribe,\n    () => select(local.read()),\n    () => select(local.read()),\n  );\n"
    },
    {
      "path": "packages/components/src/internal/overlay.ts",
      "target": "@ui/gpuixui/components/internal/overlay.ts",
      "type": "registry:lib",
      "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport { cn } from \"../../tw/index.js\";\nimport * as Arr from \"effect/Array\";\nimport * as Option from \"effect/Option\";\nimport { recipeStyle } from \"./recipe.js\";\nimport {\n  alpha,\n  elevationShadow,\n  type BoxShadow,\n  type ElevationLevel,\n  type Theme,\n} from \"./theme.js\";\n\nexport const OVERLAY_WASH = 0.55;\n\nexport const overlayVeilColor = (theme: Theme): string =>\n  alpha(theme.colors.background, OVERLAY_WASH);\n\nconst isEdge = (shadow: BoxShadow): boolean =>\n  shadow.blurRadius === 0 && shadow.spreadRadius > 0;\n\nconst shadows = (painted: StyleDesc[\"boxShadow\"]): ReadonlyArray<BoxShadow> =>\n  Option.match(Option.fromNullishOr(painted), {\n    onNone: () => [],\n    onSome: (value) => Arr.ensure(value),\n  });\n\nexport const overlaySurfaceStyle = (\n  recipe: string,\n  className: string | undefined,\n  theme: Theme,\n  elevation?: ElevationLevel,\n): StyleDesc => {\n  const style = recipeStyle(cn(recipe, className), theme);\n  const lift = Option.fromNullishOr(elevation).pipe(\n    Option.flatMap((level) =>\n      Option.fromNullishOr(elevationShadow(theme, level)),\n    ),\n  );\n\n  return Option.match(lift, {\n    onNone: () => style,\n    onSome: (shadow) => {\n      const painted = shadows(style.boxShadow);\n      const lost = Arr.every(painted, isEdge) && painted.length > 0;\n      return lost ? { ...style, boxShadow: [shadow, ...painted] } : style;\n    },\n  });\n};\n"
    },
    {
      "path": "packages/components/src/internal/parts.ts",
      "target": "@ui/gpuixui/components/internal/parts.ts",
      "type": "registry:lib",
      "content": "import * as Arr from \"effect/Array\";\nimport * as P from \"effect/Predicate\";\nimport {\n  Children,\n  Fragment,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nexport type PartComponent = (props: never) => ReactNode;\n\nexport type PartChildren =\n  | ReactElement<unknown>\n  | boolean\n  | null\n  | undefined\n  | ReadonlyArray<PartChildren>;\n\nexport interface PartsContract {\n  readonly parent: string;\n\n  readonly family: ReadonlyArray<PartComponent>;\n\n  readonly accepts: ReadonlyArray<PartComponent>;\n\n  readonly hint?: string;\n}\n\nconst componentName = (type: unknown): string =>\n  P.isString(type)\n    ? type\n    : P.isFunction(type)\n      ? type.name || \"anonymous\"\n      : \"element\";\n\nconst fragmentChildren = (element: ReactElement<unknown>): ReactNode =>\n  hasChildren(element.props) ? element.props.children : undefined;\n\nconst hasChildren = (\n  value: unknown,\n): value is { readonly children?: ReactNode } =>\n  P.isObject(value) && \"children\" in value;\n\nconst leaves = (children: ReactNode): ReadonlyArray<unknown> =>\n  Arr.flatMap(Children.toArray(children), (child) =>\n    isValidElement<unknown>(child) && child.type === Fragment\n      ? leaves(fragmentChildren(child))\n      : [child],\n  );\n\nexport const assertParts = (\n  contract: PartsContract,\n  children: ReactNode,\n): void => {\n  Arr.forEach(leaves(children), (leaf) => {\n    if (!isValidElement(leaf)) return;\n    if (Arr.some(contract.accepts, (part) => part === leaf.type)) return;\n    if (!Arr.some(contract.family, (part) => part === leaf.type)) return;\n\n    throw new Error(\n      `${componentName(leaf.type)} cannot be used inside ${contract.parent}.` +\n        (contract.hint === undefined ? \"\" : ` ${contract.hint}`),\n    );\n  });\n};\n"
    },
    {
      "path": "packages/components/src/internal/placement.ts",
      "target": "@ui/gpuixui/components/internal/placement.ts",
      "type": "registry:lib",
      "content": "import type { FloatingAlign, FloatingSide } from \"@gpuix/react/floating\";\nimport { Match } from \"effect\";\nimport * as Schema from \"effect/Schema\";\n\nexport interface FloatingBounds {\n  readonly x: number;\n  readonly y: number;\n  readonly width: number;\n  readonly height: number;\n}\n\nexport interface WindowBounds {\n  readonly width: number;\n  readonly height: number;\n}\n\nexport interface PlacementInput {\n  readonly side: unknown;\n\n  readonly align: unknown;\n  readonly trigger: FloatingBounds;\n\n  readonly surface: FloatingBounds;\n  readonly window: WindowBounds;\n  readonly margin: number;\n}\n\nexport interface Placement {\n  readonly side: FloatingSide;\n  readonly align: FloatingAlign;\n  readonly alignOffset: number;\n}\n\nconst PlacementSide = Schema.Literals([\"top\", \"right\", \"bottom\", \"left\"]);\n\nexport const isAlign = Schema.is(Schema.Literals([\"start\", \"center\", \"end\"]));\n\nconst sideOf = (side: unknown): FloatingSide =>\n  Schema.is(PlacementSide)(side) ? side : \"bottom\";\n\nconst alignOf = (align: unknown): FloatingAlign =>\n  isAlign(align) ? align : \"start\";\n\nconst oppositeSide = (side: unknown): FloatingSide =>\n  Match.value(sideOf(side)).pipe(\n    Match.when(\"top\", () => \"bottom\" as const),\n    Match.when(\"bottom\", () => \"top\" as const),\n    Match.when(\"left\", () => \"right\" as const),\n    Match.when(\"right\", () => \"left\" as const),\n    Match.exhaustive,\n  );\n\nconst roomOn = (side: unknown, input: PlacementInput): number =>\n  Match.value(sideOf(side)).pipe(\n    Match.when(\"top\", () => input.trigger.y - input.margin),\n    Match.when(\n      \"bottom\",\n      () =>\n        input.window.height -\n        input.margin -\n        (input.trigger.y + input.trigger.height),\n    ),\n    Match.when(\"left\", () => input.trigger.x - input.margin),\n    Match.when(\n      \"right\",\n      () =>\n        input.window.width -\n        input.margin -\n        (input.trigger.x + input.trigger.width),\n    ),\n    Match.exhaustive,\n  );\n\nconst extentOn = (side: unknown, surface: FloatingBounds): number =>\n  Match.value(sideOf(side)).pipe(\n    Match.when(\"top\", () => surface.height),\n    Match.when(\"bottom\", () => surface.height),\n    Match.when(\"left\", () => surface.width),\n    Match.when(\"right\", () => surface.width),\n    Match.exhaustive,\n  );\n\nexport const resolveSide = (input: PlacementInput): FloatingSide => {\n  const side = sideOf(input.side);\n  const extent = extentOn(side, input.surface);\n  if (roomOn(side, input) >= extent) return side;\n\n  const opposite = oppositeSide(side);\n  const oppositeRoom = roomOn(opposite, input);\n  if (oppositeRoom >= extentOn(opposite, input.surface)) return opposite;\n\n  return oppositeRoom > roomOn(side, input) ? opposite : side;\n};\n\nconst alignOffsetOn = (\n  side: unknown,\n  align: unknown,\n  trigger: FloatingBounds,\n  surface: FloatingBounds,\n): number =>\n  Match.value(alignOf(align)).pipe(\n    Match.when(\"center\", () =>\n      Match.value(sideOf(side)).pipe(\n        Match.when(\"top\", () => (trigger.width - surface.width) / 2),\n        Match.when(\"bottom\", () => (trigger.width - surface.width) / 2),\n        Match.when(\"left\", () => (trigger.height - surface.height) / 2),\n        Match.when(\"right\", () => (trigger.height - surface.height) / 2),\n        Match.exhaustive,\n      ),\n    ),\n    Match.when(\"start\", () => 0),\n    Match.when(\"end\", () => 0),\n    Match.exhaustive,\n  );\n\nconst hostAlign = (align: FloatingAlign): \"start\" | \"end\" =>\n  align === \"end\" ? \"end\" : \"start\";\n\nexport const requestedPlacement = (\n  side: unknown,\n  align: unknown,\n): Placement => ({\n  side: sideOf(side),\n  align: hostAlign(alignOf(align)),\n  alignOffset: 0,\n});\n\nexport const resolvePlacement = (input: PlacementInput): Placement => {\n  const side = resolveSide(input);\n  return {\n    side,\n    align: hostAlign(alignOf(input.align)),\n    alignOffset: alignOffsetOn(side, input.align, input.trigger, input.surface),\n  };\n};\n"
    },
    {
      "path": "packages/components/src/internal/presence.tsx",
      "target": "@ui/gpuixui/components/internal/presence.tsx",
      "type": "registry:component",
      "content": "/** @jsxImportSource @gpuix/react */\nimport type { MotionProps } from \"@gpuix/react\";\nimport {\n  delayedTiming,\n  exitWindowMs,\n  fadeFrom,\n  fadeFromAnchor,\n  fadeFromSide,\n  fadeOnly,\n  presenceMotion as motionOfPresence,\n  presenceStyle,\n  transitionWindowMs,\n  type PresenceFrames,\n  type PresenceHitRule,\n  type PresenceSide,\n  type PresenceTiming,\n  type PresenceTransition,\n} from \"../../motion/presence.js\";\nimport {\n  MotionProvider,\n  useMotionPreference,\n  useSurfacePresence,\n  useSurfaceTiming,\n  type MotionProviderProps,\n  type SurfacePresence,\n} from \"../../motion/react/presence.js\";\nimport {\n  motionTiming,\n  type MotionLevel,\n  type MotionPreference,\n} from \"../../motion/timing.js\";\n\nexport { MotionProvider, useMotionPreference, type MotionProviderProps };\n\nexport type SurfaceFrames = PresenceFrames;\n\nexport type SurfaceTiming = PresenceTiming;\n\nexport type PanelSide = PresenceSide;\n\nexport {\n  delayedTiming,\n  exitWindowMs,\n  fadeFrom,\n  fadeFromAnchor,\n  fadeFromSide,\n  fadeOnly,\n  presenceStyle,\n  transitionWindowMs,\n};\nexport type { PresenceHitRule };\n\nexport { useSurfacePresence, useSurfaceTiming, type SurfacePresence };\n\nexport const moveTiming = (\n  level: MotionLevel,\n  preference: MotionPreference,\n): PresenceTransition => motionTiming(level, { phase: \"standard\", preference });\n\nexport const useMoveTiming = (level: MotionLevel): PresenceTransition =>\n  moveTiming(level, useMotionPreference());\n\nexport const presenceMotion = (\n  frames: SurfaceFrames,\n  presence: SurfacePresence,\n  timing: SurfaceTiming = presence.timing,\n): MotionProps => motionOfPresence(frames, presence.present, timing);\n\nexport const PresenceShield = ({ present }: { readonly present: boolean }) =>\n  present ? null : (\n    <div\n      testId=\"presence-shield\"\n      style={{ position: \"absolute\", top: 0, right: 0, bottom: 0, left: 0 }}\n    />\n  );\n\nexport const presenceTabStop = (\n  present: boolean,\n): { readonly tabIndex?: number } => (present ? {} : { tabIndex: -1 });\n"
    },
    {
      "path": "packages/components/src/internal/recipe.ts",
      "target": "@ui/gpuixui/components/internal/recipe.ts",
      "type": "registry:lib",
      "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport { createRecipeCache } from \"../../tw/index.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const recipeStyle: (recipe: string, theme: Theme) => StyleDesc =\n  createRecipeCache(512);\n"
    },
    {
      "path": "packages/components/src/internal/ref.ts",
      "target": "@ui/gpuixui/components/internal/ref.ts",
      "type": "registry:lib",
      "content": "import type { Ref, RefCallback } from \"react\";\nimport { useCallback } from \"react\";\n\nconst assign = <T>(ref: Ref<T> | undefined, value: T): void => {\n  if (ref === null || ref === undefined) return;\n  if (typeof ref === \"function\") {\n    ref(value);\n    return;\n  }\n  ref.current = value;\n};\n\nexport const useMergedRef = <T>(\n  internal: Ref<T>,\n  caller: Ref<T> | undefined,\n): RefCallback<T> =>\n  useCallback(\n    (value: T) => {\n      assign(internal, value);\n      assign(caller, value);\n    },\n    [internal, caller],\n  );\n"
    },
    {
      "path": "packages/components/src/internal/theme.ts",
      "target": "@ui/gpuixui/components/internal/theme.ts",
      "type": "registry:lib",
      "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport * as Schema from \"effect/Schema\";\nimport {\n  alpha,\n  avatarPixels,\n  avatarSize,\n  brandTextOn,\n  controlFocusRing,\n  controlHeight,\n  controlPaddingX,\n  currentPlatform,\n  darkTheme,\n  disabledAction,\n  disabledOpacity,\n  elevationShadow,\n  filledHover,\n  filledPressed,\n  findHighlight,\n  focusRing,\n  keyboardFocusRing,\n  lightTheme,\n  nativeTextTheme,\n  pointerWash,\n  selectionOn,\n  statusTone,\n  syntaxColors,\n  targetSize,\n  textStyle,\n  type BoxShadow,\n  type ElevationLevel,\n  type FindHighlightSource,\n  type NativeTextFill,\n  type PlatformName,\n  type PointerWashSurface,\n  type StatusTone,\n  type SyntaxColors,\n  type SyntaxRole,\n  type TextRole,\n  type Theme,\n  type ThemeColors,\n} from \"../../tokens/index.js\";\n\nexport {\n  alpha,\n  avatarPixels,\n  avatarSize,\n  controlFocusRing,\n  controlHeight,\n  controlPaddingX,\n  currentPlatform,\n  darkTheme,\n  disabledAction,\n  disabledOpacity,\n  elevationShadow,\n  filledHover,\n  filledPressed,\n  findHighlight,\n  focusRing,\n  keyboardFocusRing,\n  lightTheme,\n  nativeTextTheme,\n  statusTone,\n  syntaxColors,\n  targetSize,\n  textStyle,\n};\nexport type {\n  BoxShadow,\n  ElevationLevel,\n  FindHighlightSource,\n  NativeTextFill,\n  PlatformName,\n  StatusTone,\n  SyntaxColors,\n  SyntaxRole,\n  TextRole,\n  Theme,\n};\nexport { ThemeProvider, useTheme } from \"../../tokens/react.js\";\n\nexport const keyboardRing = (theme: Theme, invalid = false): StyleDesc =>\n  controlFocusRing(theme, { invalid }) ?? {};\n\nexport interface ControlRingState {\n  readonly disabled?: boolean;\n\n  readonly invalid?: boolean;\n}\n\nexport const controlRing = (\n  theme: Theme,\n  state: ControlRingState = {},\n): StyleDesc => controlFocusRing(theme, state) ?? {};\n\nexport const pressWash = (theme: Theme, replaced: PointerWashSurface): string =>\n  pointerWash(theme, \"active\", replaced) ?? theme.colors.active;\n\nexport const selectionWash = (theme: Theme): StyleDesc => ({\n  selectionColor: theme.colors.selection,\n});\n\nexport const keepContent: StyleDesc = { keyboardFocusDim: false };\n\nexport const disabledFade = (\n  disabled: boolean,\n): { readonly opacity: number } | undefined =>\n  disabled ? { opacity: disabledOpacity } : undefined;\n\nconst Tones = Schema.Literals([\"info\", \"success\", \"warning\", \"danger\"]);\n\nexport type Tone = typeof Tones.Type;\n\nexport const toneOf = (value: unknown): Tone =>\n  Schema.is(Tones)(value) ? value : \"info\";\n\nexport interface ToneStyle {\n  readonly fg: string;\n  readonly bg: string;\n  readonly border: string;\n}\n\nconst TOKEN_TONE: Readonly<Record<Tone, StatusTone>> = {\n  info: \"info\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"destructive\",\n};\n\nexport const tone = (theme: Theme, value: Tone): ToneStyle => {\n  const { background, border, foreground } = statusTone(\n    theme,\n    TOKEN_TONE[value],\n  );\n  return { bg: background, border, fg: foreground };\n};\n\nconst softRoles: Readonly<Record<Tone, keyof ThemeColors>> = {\n  info: \"infoSoft\",\n  success: \"successSoft\",\n  warning: \"warningSoft\",\n  danger: \"destructiveSoft\",\n};\n\nexport const messageLink = (theme: Theme, value: Tone): string =>\n  brandTextOn(theme, softRoles[value]);\n\nexport const messageSelection = (theme: Theme, value: Tone): string =>\n  selectionOn(theme, softRoles[value]);\n\nexport const toneSurface = (theme: Theme, value: Tone): StyleDesc => {\n  const { bg, border, fg } = tone(theme, value);\n  return {\n    backgroundColor: bg,\n    color: fg,\n    borderWidth: theme.borderWidth.thin,\n    borderColor: border,\n  };\n};\n"
    },
    {
      "path": "packages/components/src/internal/use-placement.ts",
      "target": "@ui/gpuixui/components/internal/use-placement.ts",
      "type": "registry:lib",
      "content": "import { useGpuix, type PublicInstance } from \"@gpuix/react\";\nimport type { FloatingAlign, FloatingSide } from \"@gpuix/react/floating\";\nimport * as Option from \"effect/Option\";\nimport { useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport {\n  requestedPlacement,\n  resolvePlacement,\n  type Placement,\n} from \"./placement.js\";\n\nexport interface UsePlacementInput {\n  readonly open: boolean;\n  readonly side: FloatingSide;\n  readonly align: FloatingAlign;\n  readonly margin: number;\n  readonly trigger: RefObject<PublicInstance | null>;\n  readonly surface: RefObject<PublicInstance | null>;\n}\n\nconst boundsOf = (\n  renderer: ReturnType<typeof useGpuix>[\"renderer\"],\n  instance: PublicInstance | null,\n): Option.Option<{ x: number; y: number; width: number; height: number }> =>\n  Option.flatMap(Option.fromNullishOr(instance), (element) =>\n    Option.fromNullishOr(renderer?.getElementBounds?.(element.id)),\n  );\n\nexport const usePlacement = ({\n  open,\n  side,\n  align,\n  margin,\n  trigger,\n  surface,\n}: UsePlacementInput): Placement => {\n  const renderer = useGpuix().renderer;\n  const [placement, setPlacement] = useState<Option.Option<Placement>>(\n    Option.none(),\n  );\n  const measuredFor = useRef<string | null>(null);\n  const key = `${side}:${align}:${margin}`;\n\n  useLayoutEffect(() => {\n    if (!open) {\n      measuredFor.current = null;\n      setPlacement(Option.none());\n      return;\n    }\n    if (measuredFor.current === key) return;\n\n    const measured = Option.all({\n      trigger: boundsOf(renderer, trigger.current),\n      surface: boundsOf(renderer, surface.current),\n      window: Option.fromNullishOr(renderer?.getWindowSize?.()),\n    });\n    if (Option.isNone(measured)) return;\n\n    measuredFor.current = key;\n    setPlacement(\n      Option.some(resolvePlacement({ ...measured.value, side, align, margin })),\n    );\n  }, [align, key, margin, open, renderer, side, surface, trigger]);\n\n  return Option.getOrElse(placement, () => requestedPlacement(side, align));\n};\n"
    }
  ],
  "docs": "[Hover card](https://gpuixui.sudokw.com/components/hover-card) — These are GPUix native components: the files render through GPUix's reconciler against `@gpuix/react`, not the DOM, and need the per-platform `@gpuix/native` binding. The CLI installs the `@gpuixui/*` runtime the components import as registry items, so the copied tree resolves on its own; wrap it in `ThemeProvider` before it renders.",
  "meta": {
    "url": "/components/hover-card",
    "kind": "component",
    "runtime": "gpuix",
    "registry": "gpuixui"
  }
}