{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-panel",
  "title": "Floating Panel",
  "description": "A shadcn-style floating panel component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/floating-panel.tsx",
      "content": "\"use client\";\n\nimport {\n  FloatingPanel as FloatingPanelPrimitive,\n  useFloatingPanelContext,\n} from \"@ark-ui/react/floating-panel\";\n\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { cn } from \"@/lib/utils\";\n\nexport type FloatingPanelProps = FloatingPanelPrimitive.RootProps;\n\nconst RESIZE_AXES = [\"n\", \"e\", \"w\", \"s\", \"ne\", \"se\", \"sw\", \"nw\"] as const;\n\nexport const FloatingPanelResizeEdges = ({\n  className,\n}: {\n  className?: string;\n}) => (\n  <>\n    {RESIZE_AXES.map((axis) => (\n      <FloatingPanelResizeTrigger\n        axis={axis}\n        className={className}\n        key={axis}\n      />\n    ))}\n  </>\n);\n\nexport const FloatingPanel = (props: FloatingPanelProps) => (\n  <FloatingPanelPrimitive.Root data-slot=\"floating-panel\" {...props} />\n);\n\nexport type FloatingPanelPopupProps = FloatingPanelPrimitive.ContentProps & {\n  disablePortal?: boolean;\n  positionerClassName?: string;\n};\n\nexport const FloatingPanelPopup = ({\n  className,\n  disablePortal,\n  positionerClassName,\n  children,\n  ...contentProps\n}: FloatingPanelPopupProps) => {\n  const inner = (\n    <FloatingPanelPrimitive.Positioner\n      className={cn(!disablePortal && \"z-50\", positionerClassName)}\n      data-slot=\"floating-panel-positioner\"\n    >\n      <FloatingPanelPrimitive.Content\n        className={cn(\n          \"relative flex w-full min-w-48 flex-col overflow-hidden rounded-xl border border-border/80 bg-popover text-popover-foreground shadow-md outline-none ring-1 ring-border/20 data-behind:opacity-40 data-maximized:rounded-none data-topmost:z-999999\",\n          className,\n        )}\n        data-slot=\"floating-panel-content\"\n        {...contentProps}\n      >\n        {children}\n        <FloatingPanelResizeEdges />\n      </FloatingPanelPrimitive.Content>\n    </FloatingPanelPrimitive.Positioner>\n  );\n  return disablePortal ? inner : <Portal>{inner}</Portal>;\n};\n\nexport const FloatingPanelTrigger = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.TriggerProps) => (\n  <FloatingPanelPrimitive.Trigger\n    className={cn(\n      \"inline-flex h-9 cursor-pointer items-center justify-center rounded-lg border border-input bg-background px-3 font-medium text-foreground text-sm shadow-xs/5 outline-none transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:h-8\",\n      className,\n    )}\n    data-slot=\"floating-panel-trigger\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelDragTrigger = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.DragTriggerProps) => (\n  <FloatingPanelPrimitive.DragTrigger\n    className={cn(\"flex min-h-0 min-w-0 shrink-0 flex-col\", className)}\n    data-slot=\"floating-panel-drag-trigger\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelHeader = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.HeaderProps) => (\n  <FloatingPanelPrimitive.Header\n    className={cn(\n      \"flex shrink-0 items-center gap-2 border-border border-b bg-muted/30 px-3 py-2.5 data-dragging:cursor-grabbing data-dragging:select-none sm:gap-3\",\n      className,\n    )}\n    data-slot=\"floating-panel-header\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelTitle = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.TitleProps) => (\n  <FloatingPanelPrimitive.Title\n    className={cn(\n      \"flex min-w-0 flex-1 items-center gap-2 truncate font-semibold text-foreground text-sm leading-tight\",\n      className,\n    )}\n    data-slot=\"floating-panel-title\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelControl = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.ControlProps) => (\n  <FloatingPanelPrimitive.Control\n    className={cn(\"flex shrink-0 items-center gap-1\", className)}\n    data-no-drag=\"\"\n    data-slot=\"floating-panel-control\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelStageTrigger = ({\n  ...props\n}: FloatingPanelPrimitive.StageTriggerProps) => (\n  <FloatingPanelPrimitive.StageTrigger\n    data-slot=\"floating-panel-stage-trigger\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelCloseTrigger = ({\n  ...props\n}: FloatingPanelPrimitive.CloseTriggerProps) => (\n  <FloatingPanelPrimitive.CloseTrigger\n    data-slot=\"floating-panel-close-trigger\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelBody = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.BodyProps) => (\n  <FloatingPanelPrimitive.Body\n    className={cn(\n      \"min-h-0 flex-1 overflow-auto px-4 py-4 text-muted-foreground text-sm leading-relaxed\",\n      className,\n    )}\n    data-slot=\"floating-panel-body\"\n    {...props}\n  />\n);\n\n/**\n * Resize hit areas only — no Button chrome. Cursor comes from the machine inline styles.\n * Slight hover tint on edges for discoverability.\n */\n\nexport const FloatingPanelResizeTrigger = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.ResizeTriggerProps) => (\n  <FloatingPanelPrimitive.ResizeTrigger\n    className={cn(\n      \"z-20 border-0 bg-transparent p-0 shadow-none ring-0 outline-none\",\n      \"transition-colors duration-150\",\n      \"hover:bg-foreground/6 active:bg-foreground/8\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-0\",\n      \"data-[axis=n]:h-2 data-[axis=n]:max-w-[calc(100%-1rem)]\",\n      \"data-[axis=s]:h-2 data-[axis=s]:max-w-[calc(100%-1rem)]\",\n      \"data-[axis=e]:w-2 data-[axis=e]:max-h-[calc(100%-1rem)]\",\n      \"data-[axis=w]:w-2 data-[axis=w]:max-h-[calc(100%-1rem)]\",\n      \"data-[axis=ne]:size-3 data-[axis=nw]:size-3 data-[axis=se]:size-3 data-[axis=sw]:size-3\",\n      className,\n    )}\n    data-slot=\"floating-panel-resize-trigger\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelContext = FloatingPanelPrimitive.Context;\n\nexport const FloatingPanelRootProvider = (\n  props: FloatingPanelPrimitive.RootProviderProps,\n) => <FloatingPanelPrimitive.RootProvider {...props} />;\n\nexport { useFloatingPanelContext };\n\nexport const FloatingPanelPositioner = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.PositionerProps) => (\n  <FloatingPanelPrimitive.Positioner\n    className={cn(className)}\n    data-slot=\"floating-panel-positioner-raw\"\n    {...props}\n  />\n);\n\nexport const FloatingPanelContent = ({\n  className,\n  ...props\n}: FloatingPanelPrimitive.ContentProps) => (\n  <FloatingPanelPrimitive.Content\n    className={cn(className)}\n    data-slot=\"floating-panel-content-raw\"\n    {...props}\n  />\n);\n",
      "type": "registry:ui",
      "target": "src/components/ui/floating-panel.tsx"
    }
  ],
  "type": "registry:ui"
}