\n {config.title && !isMobile && (\n

\n {config.title}\n

\n )}\n\n {error && (\n \n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n

\n \n + Add Box\n \n {selectedBoxId && (\n <>\n handleEditBox(selectedBoxId)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg font-semibold text-sm\"\n >\n Edit\n \n handleStartConnecting(selectedBoxId)}\n className={`px-4 py-2 rounded-lg font-semibold text-sm ${\n connectingFrom === selectedBoxId\n ? \"bg-last-pink text-white\"\n : \"glass-button-secondary\"\n }`}\n >\n {connectingFrom === selectedBoxId\n ? \"Click target box\"\n : \"Connect\"}\n \n handleDeleteBox(selectedBoxId)}\n className=\"px-4 py-2 bg-red-500 text-white rounded-lg font-semibold text-sm hover:bg-red-600\"\n >\n Delete Box\n \n \n )}\n {connectingFrom && (\n setConnectingFrom(null)}\n className=\"px-4 py-2 bg-gray-500 text-white rounded-lg font-semibold text-sm hover:bg-gray-600\"\n >\n Cancel Connect\n \n )}\n

\n\n {/* Edit Box Modal */}\n {editingBoxId && (\n {\n handleLabelSave();\n }}\n >\n e.stopPropagation()}\n >\n

\n Edit Box Label\n

\n setEditingLabel(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleLabelSave();\n } else if (e.key === \"Escape\") {\n setEditingBoxId(null);\n setEditingLabel(\"\");\n }\n }}\n autoFocus\n className=\"w-full px-4 py-3 text-lg border-2 border-gray-300 rounded-lg focus:outline-none focus:border-last-pink mb-4\"\n placeholder=\"Enter box label\"\n />\n

\n \n Save\n \n {\n setEditingBoxId(null);\n setEditingLabel(\"\");\n }}\n className=\"flex-1 px-4 py-3 glass-button-secondary rounded-lg font-semibold text-sm\"\n >\n Cancel\n \n

\n \n \n )}\n\n {\n if (e.target === canvasRef.current) {\n setSelectedBoxId(null);\n setConnectingFrom(null);\n }\n }}\n >\n {/* SVG overlay for lines */}\n \n {lines.map((line) => {\n const fromBox = boxes.find((b) => b.id === line.fromBoxId);\n const toBox = boxes.find((b) => b.id === line.toBoxId);\n if (!fromBox || !toBox) return null;\n\n const from = getBoxCenter(fromBox);\n const to = getBoxCenter(toBox);\n\n return (\n \n \n {\n e.stopPropagation();\n handleDeleteLine(line.id);\n }}\n className=\"cursor-pointer\"\n />\n \n );\n })}\n \n \n \n \n \n \n\n {/* Boxes */}\n {boxes.map((box) => {\n const isSelected = selectedBoxId === box.id;\n const isConnecting = connectingFrom === box.id;\n\n return (\n handleBoxMouseDown(e, box.id)}\n onTouchStart={(e) => handleBoxTouchStart(e, box.id)}\n onClick={(e) => {\n e.stopPropagation();\n handleBoxClick(box.id);\n }}\n >\n \n \n {box.label}\n \n \n \n );\n })}\n \n\n {lastSubmitted ? (\n

\n ✓ Diagram {hasExistingResponse ? \"updated\" : \"saved\"}!\n

\n ) : (\n \n {loading\n ? hasExistingResponse\n ? \"Updating...\"\n : \"Saving...\"\n : hasExistingResponse\n ? \"Update Diagram\"\n : \"Save Diagram\"}\n \n )}\n \n );\n}\n","deleted","label",[168,169,170,149],"frontend","components","widgets","permalink","https://www.val.town/x/fwfben/live-talk/code/frontend/components/widgets/BoxesAndLinesWidget.tsx","extension","actionData","errors"]