Browse Source

feat: make PromptNode full-bleed

Textarea fills the entire node with no visible border or chrome.
Variable name badge overlays at the bottom-left. Handles use
z-index to stay visible over the content surface.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
d6bc3d8671
  1. 9
      src/components/nodes/PromptNode.tsx

9
src/components/nodes/PromptNode.tsx

@ -114,6 +114,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
<BaseNode <BaseNode
id={id} id={id}
selected={selected} selected={selected}
fullBleed
> >
{/* Text input handle - for receiving text from LLM nodes */} {/* Text input handle - for receiving text from LLM nodes */}
<Handle <Handle
@ -121,23 +122,22 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
position={Position.Left} position={Position.Left}
id="text" id="text"
data-handletype="text" data-handletype="text"
style={{ zIndex: 10 }}
/> />
<div className="relative flex-1 flex flex-col">
<textarea <textarea
value={localPrompt} value={localPrompt}
onChange={handleChange} onChange={handleChange}
onFocus={handleFocus} onFocus={handleFocus}
onBlur={handleBlur} onBlur={handleBlur}
placeholder={hasIncomingTextConnection ? "Text from connected node (editable)..." : "Describe what to generate..."} placeholder={hasIncomingTextConnection ? "Text from connected node (editable)..." : "Describe what to generate..."}
className="nodrag nopan nowheel w-full flex-1 min-h-[70px] p-2 text-xs leading-relaxed text-neutral-100 border border-neutral-700 rounded bg-neutral-900/50 resize-none focus:outline-none focus:ring-1 focus:ring-neutral-600 focus:border-neutral-600 placeholder:text-neutral-500" className="nodrag nopan nowheel w-full h-full p-3 text-xs leading-relaxed text-neutral-100 bg-neutral-800 rounded-lg resize-none focus:outline-none placeholder:text-neutral-500"
/> />
{nodeData.variableName && ( {nodeData.variableName && (
<div className="mt-1 text-[10px] text-blue-400 px-2"> <div className="absolute bottom-2 left-3 z-10 text-[10px] text-blue-400 pointer-events-none">
@{nodeData.variableName} @{nodeData.variableName}
</div> </div>
)} )}
</div>
{/* Text output handle */} {/* Text output handle */}
<Handle <Handle
@ -145,6 +145,7 @@ export function PromptNode({ id, data, selected }: NodeProps<PromptNodeType>) {
position={Position.Right} position={Position.Right}
id="text" id="text"
data-handletype="text" data-handletype="text"
style={{ zIndex: 10 }}
/> />
</BaseNode> </BaseNode>

Loading…
Cancel
Save