{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dockable-panel", "type": "registry:ui", "title": "Dockable Panel", "description": "Non-modal workspace panel that moves between two explicit edge slots with a mobile Drawer fallback.", "dependencies": [], "registryDependencies": [ "http://127.0.0.1:3000/r/button.json", "http://127.0.0.1:3000/r/core.json", "http://127.0.0.1:3000/r/drawer.json", "http://127.0.0.1:3000/r/sidebar.json" ], "files": [ { "path": "src/registry/sources/control-ui/ui/dockable-panel-geometry.ts", "target": "@components/control-ui/ui/dockable-panel-geometry.ts", "type": "registry:ui", "content": "export type DockablePanelBounds = { width: number; height: number };\nexport type DockablePanelSize = { width: number; height: number };\nexport type DockablePanelPosition = { x: number; y: number };\n\nexport function clampDockablePanelPosition(\n position: DockablePanelPosition,\n bounds: DockablePanelBounds,\n panel: DockablePanelSize,\n inset = 12,\n): DockablePanelPosition {\n const maxX = Math.max(inset, bounds.width - panel.width - inset);\n const maxY = Math.max(inset, bounds.height - panel.height - inset);\n\n return {\n x: Math.min(Math.max(position.x, inset), maxX),\n y: Math.min(Math.max(position.y, inset), maxY),\n };\n}\n\nexport function dockablePanelSideAt(pointerX: number, width: number): \"left\" | \"right\" {\n return pointerX < width / 2 ? \"left\" : \"right\";\n}\n\nexport function oppositeDockablePanelSide(placement: \"left\" | \"right\"): \"left\" | \"right\" {\n return placement === \"left\" ? \"right\" : \"left\";\n}\n" }, { "path": "src/registry/sources/control-ui/ui/dockable-panel.tsx", "target": "@components/control-ui/ui/dockable-panel.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport type { PointerEvent as ReactPointerEvent } from \"react\";\nimport { createContext, use, useRef, useState } from \"react\";\nimport type {\n DockablePanelActionsProps,\n DockablePanelCloseProps,\n DockablePanelContentProps,\n DockablePanelDockProps,\n DockablePanelDragHandleProps,\n DockablePanelHeaderProps,\n DockablePanelPlacement,\n DockablePanelProps,\n DockablePanelTitleProps,\n DockablePanelToggleProps,\n} from \"@/components/control-ui/contracts\";\nimport { useIsMobile } from \"@/components/control-ui/hooks/use-mobile\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\nimport { skinSlot } from \"@/components/control-ui/skin\";\nimport { Button } from \"@/components/control-ui/ui/button\";\nimport { Drawer, DrawerContent } from \"@/components/control-ui/ui/drawer\";\nimport { clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide } from \"./dockable-panel-geometry\";\n\ntype DockablePanelContextValue = {\n close: () => void;\n dragging: boolean;\n isMobile: boolean;\n placement: DockablePanelPlacement;\n setPlacement: (placement: DockablePanelPlacement) => void;\n togglePlacement: () => void;\n dragHandleProps: {\n onPointerDown: (event: ReactPointerEvent) => void;\n onPointerMove: (event: ReactPointerEvent) => void;\n onPointerUp: (event: ReactPointerEvent) => void;\n onPointerCancel: (event: ReactPointerEvent) => void;\n };\n};\n\nconst DockablePanelContext = createContext(null);\n\nfunction useDockablePanelContext() {\n const context = use(DockablePanelContext);\n if (!context) throw new Error(\"DockablePanel parts must be used inside DockablePanel.\");\n return context;\n}\n\nfunction useControllableState(controlled: T | undefined, defaultValue: T, onChange?: (value: T) => void) {\n const [uncontrolled, setUncontrolled] = useState(defaultValue);\n const value = controlled ?? uncontrolled;\n function setValue(next: T) {\n if (controlled === undefined) setUncontrolled(next);\n onChange?.(next);\n }\n return [value, setValue] as const;\n}\n\nexport function DockablePanel({\n open: openProp,\n defaultOpen = true,\n onOpenChange,\n placement: placementProp,\n defaultPlacement = \"right\",\n onPlacementChange,\n className,\n style,\n children,\n \"aria-label\": ariaLabel = \"Dockable panel\",\n ...props\n}: DockablePanelProps) {\n const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);\n const [placement, setPlacementState] = useControllableState(placementProp, defaultPlacement, onPlacementChange);\n const [dragging, setDragging] = useState(false);\n const [potentialDock, setPotentialDock] = useState(placement);\n const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null);\n const [dragHeight, setDragHeight] = useState(0);\n const isMobile = useIsMobile();\n const panelRef = useRef(null);\n const potentialDockRef = useRef(placement);\n const dragRef = useRef<{ pointerId: number; offsetX: number; offsetY: number } | null>(null);\n\n function setPlacement(next: DockablePanelPlacement) {\n setPlacementState(next);\n }\n\n function togglePlacement() {\n setPlacement(oppositeDockablePanelSide(placement));\n }\n\n function close() {\n setOpen(false);\n }\n\n function finishDrag(event: ReactPointerEvent, shouldDock: boolean) {\n if (dragRef.current?.pointerId !== event.pointerId) return;\n if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);\n if (shouldDock) setPlacement(potentialDockRef.current);\n dragRef.current = null;\n setDragPosition(null);\n setDragHeight(0);\n setDragging(false);\n }\n\n function onPointerDown(event: ReactPointerEvent) {\n if (event.button !== 0 || isMobile) return;\n const panel = panelRef.current;\n const container = panel?.offsetParent;\n if (!(container instanceof HTMLElement) || !panel) return;\n\n event.preventDefault();\n event.currentTarget.setPointerCapture(event.pointerId);\n const panelRect = panel.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n dragRef.current = {\n pointerId: event.pointerId,\n offsetX: event.clientX - panelRect.left,\n offsetY: event.clientY - panelRect.top,\n };\n potentialDockRef.current = placement;\n setPotentialDock(placement);\n setDragPosition({ x: panelRect.left - containerRect.left, y: panelRect.top - containerRect.top });\n setDragHeight(panelRect.height);\n setDragging(true);\n }\n\n function onPointerMove(event: ReactPointerEvent) {\n const drag = dragRef.current;\n const panel = panelRef.current;\n const container = panel?.offsetParent;\n if (!drag || drag.pointerId !== event.pointerId || !(container instanceof HTMLElement) || !panel) return;\n\n const bounds = container.getBoundingClientRect();\n const nextDock = dockablePanelSideAt(event.clientX - bounds.left, bounds.width);\n potentialDockRef.current = nextDock;\n setPotentialDock(nextDock);\n setDragPosition(\n clampDockablePanelPosition(\n { x: event.clientX - bounds.left - drag.offsetX, y: event.clientY - bounds.top - drag.offsetY },\n { width: bounds.width, height: bounds.height },\n { width: panel.offsetWidth, height: panel.offsetHeight },\n ),\n );\n }\n\n function onPointerUp(event: ReactPointerEvent) {\n finishDrag(event, true);\n }\n\n function onPointerCancel(event: ReactPointerEvent) {\n finishDrag(event, false);\n }\n\n const context: DockablePanelContextValue = {\n close,\n dragging,\n isMobile,\n placement,\n setPlacement,\n togglePlacement,\n dragHandleProps: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel },\n };\n\n if (isMobile) {\n return (\n \n \n \n {children}\n \n \n \n );\n }\n\n if (!open) return null;\n\n return (\n \n {dragging ? (\n <>\n \n \n \n ) : null}\n \n {children}\n \n Panel docked {placement}.\n \n \n \n );\n}\n\nexport function DockablePanelHeader({ className, ...props }: DockablePanelHeaderProps) {\n return (\n \n );\n}\n\nexport function DockablePanelDragHandle({\n className,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n onPointerCancel,\n children,\n ...props\n}: DockablePanelDragHandleProps) {\n const context = useDockablePanelContext();\n if (context.isMobile) {\n return (\n \n {children}\n \n );\n }\n\n return (\n {\n onPointerDown?.(event);\n if (!event.defaultPrevented) context.dragHandleProps.onPointerDown(event);\n }}\n onPointerMove={(event) => {\n onPointerMove?.(event);\n if (!event.defaultPrevented) context.dragHandleProps.onPointerMove(event);\n }}\n onPointerUp={(event) => {\n onPointerUp?.(event);\n if (!event.defaultPrevented) context.dragHandleProps.onPointerUp(event);\n }}\n onPointerCancel={(event) => {\n onPointerCancel?.(event);\n if (!event.defaultPrevented) context.dragHandleProps.onPointerCancel(event);\n }}\n {...props}\n >\n {children}\n \n );\n}\n\nexport function DockablePanelTitle({ className, ...props }: DockablePanelTitleProps) {\n return (\n \n );\n}\n\nexport function DockablePanelActions({ className, ...props }: DockablePanelActionsProps) {\n return (\n \n );\n}\n\nexport function DockablePanelToggle({ className, children, \"aria-label\": ariaLabel, onClick, ...props }: DockablePanelToggleProps) {\n const { isMobile, placement, togglePlacement } = useDockablePanelContext();\n if (isMobile) return null;\n const target = oppositeDockablePanelSide(placement);\n const label = `Move panel to ${target}`;\n return (\n {\n onClick?.(event);\n if (!event.defaultPrevented) togglePlacement();\n }}\n {...props}\n >\n {children ?? }\n \n );\n}\n\nexport function DockablePanelDock({\n placement: nextPlacement,\n className,\n children,\n \"aria-label\": ariaLabel,\n onClick,\n ...props\n}: DockablePanelDockProps) {\n const { isMobile, placement, setPlacement } = useDockablePanelContext();\n if (isMobile) return null;\n const label = `Dock panel ${nextPlacement}`;\n return (\n {\n onClick?.(event);\n if (!event.defaultPrevented) setPlacement(nextPlacement);\n }}\n {...props}\n >\n {children ?? }\n \n );\n}\n\nexport function DockablePanelClose({\n className,\n children,\n \"aria-label\": ariaLabel = \"Close panel\",\n onClick,\n ...props\n}: DockablePanelCloseProps) {\n const { close } = useDockablePanelContext();\n return (\n {\n onClick?.(event);\n if (!event.defaultPrevented) close();\n }}\n {...props}\n >\n {children ?? }\n \n );\n}\n\nexport function DockablePanelContent({ padding = \"default\", className, ...props }: DockablePanelContentProps) {\n return (\n \n );\n}\n\nfunction DockablePanelDropZone({ side, active, height }: { side: \"left\" | \"right\"; active: boolean; height: number }) {\n return (\n \n );\n}\n\nfunction PlacementIcon({ placement }: { placement: DockablePanelPlacement }) {\n return ;\n}\n\nfunction DockPanelIcon({ side = \"right\" }: { side?: \"left\" | \"right\" }) {\n return (\n \n \n \n \n );\n}\n\nfunction CloseIcon() {\n return (\n \n \n \n );\n}\n" } ], "meta": {} }