styles

src/components/graph/BaseNode.tsx

@@ -80,11 +80,6 @@ export function BaseNode({
           )}
           style={{ margin: 0, touchAction: "none", userSelect: "none" }}
         >
-          <span
-            className="absolute bottom-0 right-0 w-8 h-8 rounded-br border-l border-t border-border/30 hover:border-border/50"
-            title="Drag corner to resize"
-            aria-label="Resize node"
-          />
         </NodeResizeControl>
       )}
       {handles}
@@ -113,23 +108,6 @@ export function BaseNodeHeader({
   );
 }
 
-/**
- * The title text for the node. To maintain a native application feel, the title
- * text is not selectable.
- */
-export function BaseNodeHeaderTitle({
-  className,
-  ...props
-}: ComponentProps<"h3">) {
-  return (
-    <h3
-      data-slot="base-node-title"
-      className={cn("user-select-none flex-1 font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
 /**
  * Standard node header: icon on the left, title taking the rest. Use for all node types.
  * Inlined so it does not depend on BaseNodeHeader/BaseNodeHeaderTitle (avoids reference errors with HMR).
@@ -153,7 +131,7 @@ export function BaseNodeHeaderRow({
       {icon}
       <h3
         data-slot="base-node-title"
-        className="user-select-none flex-1 font-semibold"
+        className="user-select-none flex-1 font-mono"
       >
         {title}
       </h3>

src/components/graph/ConfigNode.tsx

@@ -162,7 +162,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
 
     return (
         <BaseNode className="min-w-80 min-h-[280px]" dimensions={dimensions} resizable nodeId={id} handles={<><InputHandle id="ain" /><OutputHandle id="out" /></>}>
-            <BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={`${id}.puml`} />} />
+            <BaseNodeHeaderRow icon={<ScrollText className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={`${id}`} />} />
 
             <BaseNodeContent>
                 <div className="shrink-0 w-full">
@@ -248,7 +248,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
                     />
                 </div>
 
-                <div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden rounded border border-input">
+                <div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden border-t border-input">
                     <CodeMirror
                         // @ts-expect-error ref is { view, state, editor }; package ref type not in our node_modules
                         ref={editorRef}

src/components/graph/FunctionNode.tsx

@@ -52,13 +52,10 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
             <BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
 
             <BaseNodeContent>
-                <div className="shrink-0 w-full mb-1">
+                <div className="shrink-0 w-full">
                     <NodeMenubar nodeId={id} nodeType="function" />
                 </div>
-                <p className="shrink-0 text-[10px] text-muted-foreground mb-1">
+                <div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden border-t border-input">
-                    Call in config: <code className="rounded bg-muted px-0.5">$&#123;{id}(var1, var2)&#125;</code>
-                </p>
-                <div ref={editorContainerRef} className="min-h-0 flex-1 w-full nodrag nopan overflow-hidden rounded border border-input">
                     <CodeMirror
                         value={bodyValue}
                         height={`${editorHeight}px`}
@@ -72,7 +69,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <BaseNodeFooterText>Body: {bodyValue ? `${bodyValue.length} chars` : 'none'}</BaseNodeFooterText>
+                <BaseNodeFooterText>{bodyValue ? `${bodyValue.length} chars` : 'none'}</BaseNodeFooterText>
             </BaseNodeFooter>
         </BaseNode>
     )

src/components/graph/NodeMenubar.tsx

@@ -79,7 +79,7 @@ export function NodeMenubar({ nodeId, nodeType, editInputsContent, insertTagsCon
     }, [nodeId, ctx])
 
     return (
-        <Menubar className="h-auto min-h-0 flex items-center bg-none p-1 border-none shadow-none">
+        <Menubar className="h-auto min-h-0 flex items-center bg-none p-1 border-t-0 border-l-0 border-r-0 border-b shadow-none rounded-none text-muted-foreground">
             <MenubarMenu>
                 <MenubarTrigger className="px-1.5 py-0 text-xs">
                     Node

src/components/graph/RenderingNode.tsx

@@ -403,7 +403,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
                         <div className="flex min-h-0 flex-1 items-center justify-center text-xs text-muted-foreground">Rendering…</div>
                     ) : svgContent ? (
                         <div
-                            className="min-h-0 flex-1 w-full overflow-auto rounded border border-input bg-white dark:bg-gray-900 [&_svg]:max-w-full [&_svg]:h-auto"
+                            className="min-h-0 flex-1 w-full overflow-auto bg-white dark:bg-secondary [&_svg]:max-w-full [&_svg]:h-auto"
                             dangerouslySetInnerHTML={{ __html: svgContent }}
                         />
                     ) : null}

src/components/graph/VariableNode.tsx

@@ -94,10 +94,11 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
         <BaseNode className="min-w-56 min-h-[180px]" handles={<OutputHandle id="out" />}>
             <BaseNodeHeaderRow icon={<Variable className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
 
-            <BaseNodeContent className="gap-2 p-3">
+            <BaseNodeContent>
                 <div className="shrink-0 w-full">
                     <NodeMenubar nodeId={id} nodeType="variable" />
                 </div>
+                <div className="flex flex-col p-2 gap-2">
                     <div className="flex flex-col gap-1.5">
                         <label className="text-xs font-medium text-muted-foreground">Type</label>
                         <Select value={valueType} onValueChange={onTypeChange}>
@@ -129,11 +130,11 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
                             />
                         )}
                     </div>
+                </div>
             </BaseNodeContent>
 
             <BaseNodeFooter>
                 <BaseNodeFooterText>
-                    Use in config: <code className="rounded bg-muted px-0.5">prop: {'${'}{id}{'}'}</code>
                 </BaseNodeFooterText>
             </BaseNodeFooter>
         </BaseNode>