,
,
\n const isContentEditable = (activeElement as HTMLElement).isContentEditable;\n \n return tagName === 'input' || tagName === 'textarea' || isContentEditable;\n }, []);\n\n // Register keyboard shortcuts only when this layer is selected\n const keyCombinations = useMemo
(() => {\n if (!isSelected) return [];\n\n return [\n {\n keys: SHORTCUTS.copy.keys,\n key: SHORTCUTS.copy.key,\n preventDefault: false,\n handler: (e) => {\n if (isInputFocused()) return;\n e.preventDefault();\n handleCopy();\n },\n },\n {\n keys: SHORTCUTS.cut.keys,\n key: SHORTCUTS.cut.key,\n preventDefault: false,\n handler: (e) => {\n if (isInputFocused()) return;\n e.preventDefault();\n handleCut();\n },\n },\n {\n keys: SHORTCUTS.paste.keys,\n key: SHORTCUTS.paste.key,\n preventDefault: false,\n handler: (e) => {\n if (isInputFocused()) return;\n if (!getCanPaste()) return;\n e.preventDefault();\n handlePaste();\n },\n },\n {\n keys: SHORTCUTS.duplicate.keys,\n key: SHORTCUTS.duplicate.key,\n preventDefault: false,\n handler: (e) => {\n if (isInputFocused()) return;\n e.preventDefault();\n handleDuplicate();\n },\n },\n {\n keys: SHORTCUTS.delete.keys,\n key: SHORTCUTS.delete.key,\n preventDefault: false,\n handler: (e) => {\n if (isInputFocused()) return;\n e.preventDefault();\n handleDelete();\n },\n },\n ];\n }, [isSelected, handleCopy, handleCut, handlePaste, handleDuplicate, handleDelete, getCanPaste, isInputFocused]);\n\n useKeyboardShortcuts(keyCombinations);\n\n // If children is a single React element, clone it with the context menu handler\n // Otherwise, wrap in a span\n if (React.isValidElement(children)) {\n return React.cloneElement(children as React.ReactElement>, {\n onContextMenu: handleContextMenu,\n className: className ? `${(children.props as React.HTMLAttributes).className || ''} ${className}`.trim() : (children.props as React.HTMLAttributes).className,\n style: style ? { ...(children.props as React.HTMLAttributes).style, ...style } : (children.props as React.HTMLAttributes).style,\n });\n }\n\n return (\n \n {children}\n \n );\n};\n",
+ "type": "registry:ui",
+ "target": "components/ui/ui-builder/internal/components/layer-context-menu.tsx"
+ },
+ {
+ "path": "components/ui/ui-builder/internal/components/layer-context-menu-portal.tsx",
+ "content": "\"use client\";\n\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Plus, Trash, Copy, Scissors, ClipboardPaste, CopyPlus } from \"lucide-react\";\nimport { useEditorStore } from \"@/lib/ui-builder/store/editor-store\";\nimport { useLayerStore } from \"@/lib/ui-builder/store/layer-store\";\nimport { canComponentAcceptChildren } from \"@/lib/ui-builder/store/schema-utils\";\nimport { SHORTCUTS } from \"@/lib/ui-builder/shortcuts/shortcut-registry\";\nimport { useGlobalLayerActions } from \"@/lib/ui-builder/hooks/use-layer-actions\";\nimport { canPasteLayer } from \"@/lib/ui-builder/utils/paste-validation\";\nimport { AddComponentsPopover } from \"@/components/ui/ui-builder/internal/components/add-component-popover\";\nimport { cn } from \"@/lib/utils\";\nimport { useFrame } from \"@/components/ui/ui-builder/internal/canvas/auto-frame\";\nimport { useDndContext } from \"@/lib/ui-builder/context/dnd-context\";\nimport {\n useFloating,\n offset,\n flip,\n shift,\n limitShift,\n type VirtualElement,\n} from \"@floating-ui/react\";\n\n/**\n * Global context menu portal that renders at mouse position INSIDE the iframe.\n * This component should be rendered inside the AutoFrame/iframe context.\n * It subscribes to context menu state from editor-store and renders\n * a menu at the captured mouse coordinates using floating-ui for smart positioning.\n */\nexport const LayerContextMenuPortal: React.FC = () => {\n const contextMenu = useEditorStore((state) => state.contextMenu);\n const closeContextMenu = useEditorStore((state) => state.closeContextMenu);\n const selectedLayerId = useLayerStore((state) => state.selectedLayerId);\n const { isDragging } = useDndContext();\n const [mounted, setMounted] = useState(false);\n \n // Track the layer ID that the context menu was opened for\n const contextMenuLayerIdRef = useRef(null);\n \n // Get iframe context - if we're inside an iframe, we'll render there\n const frameContext = useFrame();\n\n // Use floating-ui for smart positioning with boundary detection\n const { refs, floatingStyles } = useFloating({\n placement: \"bottom-start\",\n middleware: [\n offset(2), // Small offset from cursor\n flip({\n fallbackPlacements: [\"top-start\", \"bottom-end\", \"top-end\"],\n padding: 8,\n }),\n shift({\n crossAxis: true,\n limiter: limitShift(),\n padding: 8,\n }),\n ],\n });\n\n // Update the virtual reference position when context menu coordinates change\n useEffect(() => {\n if (!contextMenu.open) return;\n \n const virtualReference: VirtualElement = {\n getBoundingClientRect: () => ({\n x: contextMenu.x,\n y: contextMenu.y,\n width: 0,\n height: 0,\n top: contextMenu.y,\n left: contextMenu.x,\n right: contextMenu.x,\n bottom: contextMenu.y,\n }),\n };\n \n refs.setPositionReference(virtualReference);\n }, [contextMenu.open, contextMenu.x, contextMenu.y, refs]);\n\n // Ensure we only render portal on client\n useEffect(() => {\n setMounted(true);\n }, []);\n\n // Track which layer the context menu was opened for\n useEffect(() => {\n if (contextMenu.open && contextMenu.layerId) {\n contextMenuLayerIdRef.current = contextMenu.layerId;\n } else {\n contextMenuLayerIdRef.current = null;\n }\n }, [contextMenu.open, contextMenu.layerId]);\n\n // Close menu when a different layer is selected\n useEffect(() => {\n if (contextMenu.open && contextMenuLayerIdRef.current && selectedLayerId !== contextMenuLayerIdRef.current) {\n closeContextMenu();\n }\n }, [selectedLayerId, contextMenu.open, closeContextMenu]);\n\n // Close menu when drag starts\n useEffect(() => {\n if (isDragging && contextMenu.open) {\n closeContextMenu();\n }\n }, [isDragging, contextMenu.open, closeContextMenu]);\n\n // Handle click outside to close menu\n useEffect(() => {\n if (!contextMenu.open) return;\n\n const handleClickOutside = (e: MouseEvent) => {\n const floatingEl = refs.floating.current;\n if (floatingEl && !floatingEl.contains(e.target as Node)) {\n closeContextMenu();\n }\n };\n\n const handleContextMenuOutside = (e: MouseEvent) => {\n // If right-clicking outside the menu, close it\n // (The new context menu event will open a new one if applicable)\n const floatingEl = refs.floating.current;\n if (floatingEl && !floatingEl.contains(e.target as Node)) {\n closeContextMenu();\n }\n };\n\n // Attach listeners to iframe document if available, otherwise parent document\n // This ensures events inside the iframe are captured correctly\n const targetDoc = frameContext.document ?? document;\n\n // Use mousedown for faster response\n targetDoc.addEventListener(\"mousedown\", handleClickOutside);\n targetDoc.addEventListener(\"contextmenu\", handleContextMenuOutside);\n \n return () => {\n targetDoc.removeEventListener(\"mousedown\", handleClickOutside);\n targetDoc.removeEventListener(\"contextmenu\", handleContextMenuOutside);\n };\n }, [contextMenu.open, closeContextMenu, refs.floating, frameContext.document]);\n\n // Handle escape key to close menu\n useEffect(() => {\n if (!contextMenu.open) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n closeContextMenu();\n }\n };\n\n // Attach listener to iframe document if available, otherwise parent document\n // This ensures escape key is captured when focus is inside the iframe\n const targetDoc = frameContext.document ?? document;\n\n targetDoc.addEventListener(\"keydown\", handleKeyDown);\n return () => targetDoc.removeEventListener(\"keydown\", handleKeyDown);\n }, [contextMenu.open, closeContextMenu, frameContext.document]);\n\n if (!mounted || !contextMenu.open || !contextMenu.layerId) {\n return null;\n }\n\n // Determine where to render the portal\n // If we're inside an iframe, render to the iframe's body\n // Otherwise, render to the parent document's body\n const portalTarget = frameContext.document?.body || document.body;\n\n const menuContent = (\n \n \n \n );\n\n // Render portal to the appropriate body (iframe or parent)\n return createPortal(menuContent, portalTarget);\n};\n\ninterface ContextMenuPortalItemsProps {\n layerId: string;\n onAction: () => void;\n}\n\n/**\n * Menu items for the context menu portal.\n */\nconst ContextMenuPortalItems: React.FC
= ({\n layerId,\n onAction,\n}) => {\n const selectedLayer = useLayerStore((state) => state.findLayerById(layerId));\n const findLayerById = useLayerStore((state) => state.findLayerById);\n const componentRegistry = useEditorStore((state) => state.registry);\n\n // Subscribe to clipboard reactively here — this is a singleton component\n // (only one context menu open at a time) so O(1) re-renders are fine.\n const clipboardLayer = useEditorStore((state) => state.clipboard.layer);\n\n const {\n canDuplicate,\n canDelete,\n canCut,\n handleCopy,\n handleCut,\n handlePaste,\n handleDelete,\n handleDuplicate,\n } = useGlobalLayerActions(layerId);\n\n // Compute reactive canPaste locally from the clipboard subscription.\n // `selectedLayer` is included so the memo recomputes when the target\n // layer's data changes (e.g. children type switches from array to string),\n // since `findLayerById` is a stable function ref that won't trigger updates.\n const canPaste = React.useMemo(() => {\n if (!clipboardLayer || !selectedLayer) return false;\n return canPasteLayer(clipboardLayer, layerId, componentRegistry, findLayerById);\n }, [clipboardLayer, layerId, componentRegistry, findLayerById, selectedLayer]);\n\n // Check if component can have children added\n const canRenderAddChild = React.useMemo(() => {\n if (!selectedLayer) return false;\n\n const componentDef = componentRegistry[selectedLayer.type as keyof typeof componentRegistry];\n if (!componentDef) return false;\n\n return canComponentAcceptChildren(componentDef.schema);\n }, [selectedLayer, componentRegistry]);\n\n const handleCopyClick = useCallback(() => {\n handleCopy();\n onAction();\n }, [handleCopy, onAction]);\n\n const handleCutClick = useCallback(() => {\n handleCut();\n onAction();\n }, [handleCut, onAction]);\n\n const handlePasteClick = useCallback(() => {\n handlePaste();\n onAction();\n }, [handlePaste, onAction]);\n\n const handleDuplicateClick = useCallback(() => {\n handleDuplicate();\n onAction();\n }, [handleDuplicate, onAction]);\n\n const handleDeleteClick = useCallback(() => {\n handleDelete();\n onAction();\n }, [handleDelete, onAction]);\n\n return (\n <>\n {canRenderAddChild && (\n <>\n \n \n \n \n \n )}\n\n \n\n {canCut && (\n \n )}\n\n \n\n \n\n {canDuplicate && (\n \n )}\n\n {canDelete && (\n \n \n Delete\n {SHORTCUTS.delete.shortcutDisplay}\n \n )}\n \n );\n};\n\n// Simple menu item component\ninterface MenuItemProps {\n children: React.ReactNode;\n onClick?: (e: React.MouseEvent) => void;\n disabled?: boolean;\n className?: string;\n}\n\nconst MenuItem: React.FC = ({\n children,\n onClick,\n disabled,\n className,\n}) => {\n return (\n \n {children}\n \n );\n};\n\n// Simple separator component\nconst MenuSeparator: React.FC = () => {\n return
;\n};\n\n// Simple shortcut display component\nconst MenuShortcut: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n return (\n
\n {children}\n \n );\n};\n",
+ "type": "registry:ui",
+ "target": "components/ui/ui-builder/internal/components/layer-context-menu-portal.tsx"
+ },
+ {
+ "path": "components/ui/ui-builder/internal/components/error-fallback.tsx",
+ "content": "import React from \"react\";\nimport type { FallbackProps } from \"react-error-boundary\";\n\nexport function ErrorFallback({ error }: FallbackProps) {\n // Call resetErrorBoundary() to reset the error boundary and retry the render.\n \n // Handle error as unknown type (react-error-boundary v5+)\n // Check for null/undefined first, then instanceof Error, then convert to string\n const errorMessage = error == null \n ? undefined \n : error instanceof Error \n ? error.message \n : String(error);\n const errorStack = error instanceof Error ? error.stack : undefined;\n \n return (\n
\n
Component Error
\n
Error: {errorMessage || \"Unknown error\"}
\n
\n Stack trace
\n {errorStack}\n \n
\n );\n }",
+ "type": "registry:ui",
+ "target": "components/ui/ui-builder/internal/components/error-fallback.tsx"
+ },
+ {
+ "path": "components/ui/ui-builder/internal/components/element-selector.tsx",
+ "content": "\"use client\";\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n useLayoutEffect,\n useMemo,\n useContext,\n} from \"react\";\nimport { useTransformEffect } from \"react-zoom-pan-pinch\";\nimport type { ComponentLayer } from \"@/components/ui/ui-builder/types\";\nimport { LayerMenu } from \"@/components/ui/ui-builder/internal/components/layer-menu\";\nimport { DragHandle as ComponentDragHandle } from \"@/components/ui/ui-builder/internal/dnd/drag-handle\";\nimport { DragHandleContext } from \"@/components/ui/ui-builder/internal/canvas/resizable-wrapper\";\nimport { useDndContext } from \"@/lib/ui-builder/context/dnd-context\";\nimport { cn } from \"@/lib/utils\";\nimport {\n offset,\n useFloating,\n autoUpdate,\n shift,\n limitShift,\n} from \"@floating-ui/react\";\nimport { getScrollParent } from \"@/lib/ui-builder/utils/get-scroll-parent\";\nimport { useFrame } from \"@/components/ui/ui-builder/internal/canvas/auto-frame\";\nimport { LayerContextMenu } from \"@/components/ui/ui-builder/internal/components/layer-context-menu\";\n\nconst style: React.CSSProperties = {\n display: \"contents\",\n};\n\ninterface ElementSelectorProps {\n layer: ComponentLayer;\n isSelected: boolean;\n zIndex: number;\n totalLayers: number;\n onSelectElement: (layerId: string) => void;\n children: React.ReactNode;\n isPageLayer?: boolean;\n}\n\n/**\n * Element selector that measures elements using offset properties (relative to parent)\n * instead of getBoundingClientRect (relative to viewport). This works correctly with\n * zoom/pan transformations since the overlays are rendered inside the canvas.\n */\nexport const ElementSelector: React.FC
= ({\n layer,\n isSelected,\n zIndex,\n onSelectElement,\n children,\n isPageLayer = false,\n}) => {\n const [boundingRect, setBoundingRect] = useState<{\n top: number;\n left: number;\n bottom: number;\n right: number;\n width: number;\n height: number;\n } | null>(null);\n\n const dndContext = useDndContext();\n\n const { refs, floatingStyles } = useFloating({\n placement: \"top-start\",\n whileElementsMounted: autoUpdate,\n middleware: [\n offset(-2), // Negative offset to overlap like the sticky label\n shift({\n crossAxis: true, // Allow sliding along the cross axis\n limiter: limitShift(),\n }),\n ],\n });\n\n // Check if this specific layer is being dragged\n const isBeingDragged = dndContext.activeLayerId === layer.id;\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n onSelectElement(layer.id);\n },\n [layer.id, onSelectElement]\n );\n\n // Block all pointer events from passing through\n const handlePointerEvent = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n }, []);\n\n\n const overlayStyle = useMemo(() => {\n if (!boundingRect) return { display: \"none\" };\n return {\n position: \"fixed\" as const,\n top: boundingRect.top,\n left: boundingRect.left,\n width: boundingRect.width,\n height: boundingRect.height,\n zIndex: zIndex,\n boxSizing: \"border-box\" as const,\n pointerEvents: \"auto\" as const, // Ensure overlay captures all pointer events\n } as React.CSSProperties;\n }, [boundingRect, zIndex]);\n\n const handleBoundingRectChange = useCallback(\n (\n rect: {\n top: number;\n left: number;\n bottom: number;\n right: number;\n width: number;\n height: number;\n } | null\n ) => {\n setBoundingRect(rect);\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [layer.id]\n );\n\n return (\n <>\n \n {children}\n \n\n {boundingRect && (\n \n