import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react';

import { Trash2, Plus, ArrowUpFromDot, ArrowRight, ChevronLeft, ChevronRight, Package, PackageOpen, Layers, Edit3, Bookmark, Palette, Orbit, Group, Ungroup, SquarePlus, Combine, Maximize2, Minimize2, Sparkles } from 'lucide-react';

import UniversalNodeRenderer from './UniversalNodeRenderer';

import { RENDERER_PRESETS } from './UniversalNodeRenderer.presets';

import { useTheme } from './hooks/useTheme.js';

import useGraphStore from "./store/graphStore.js";

import { getNodeDimensions } from './utils.js';

import useMobileDetection from './hooks/useMobileDetection';

import { getTextColor, getLightHueText, getDarkHueText } from './utils/colorUtils.js';

import './UnifiedBottomControlPanel.css';

const TriangleCap = ({ direction = 'left', color = null, variant = 'ghost', onClick }) => {

const NodePill = ({ name, color = '#800000', onClick }) => {

const PredicateRail = ({ color = '#4A5568', leftActive, rightActive, onToggleLeft, onToggleRight, onClickCenter, centerWidth = 140, label }) => {

import { measureTextWidth } from './services/textMeasurement.js';

const UnifiedBottomControlPanel = ({