[DS 2.0] Render the default canvas port at the designed 8px

.changeset/canvas-port-size.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/ui': patch
+---
+
+Default canvas ports now render at the designed 8px outer size.

.changeset/port-connecting-target.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/ui': patch
+---
+
+A valid target port grows to its hover size while a connection is dragged near it, matching the dragged source port; a target rejected by `isValidConnection` keeps its default size.

packages/ui/built-css-pitfalls.md

@@ -99,6 +99,16 @@ legitimate pattern rather than a mis-scoped default. Every other check applies e
 
 **Automated?** - Yes. The `publint` package script validates export targets and the broader published package surface.
 
+## Incorrect built handle geometry
+
+**What breaks** - The default canvas port renders larger than its designed 8px outer size when a third-party handle minimum overrides its 4px content size plus 2px border on each side.
+
+**Why it is silent** - With `box-sizing: content-box`, `min-width` and `min-height` constrain the content box, so xyflow's 5px minimum produces a 9px outer size even though the declared width and height remain 4px.
+
+**How to spot it** - Inspect the built base `.react-flow__handle` rule and confirm its width, height, border, and `box-sizing` geometry is accompanied by `min-width: 0` and `min-height: 0`. In a running app, `offsetWidth` of a resting `.react-flow__handle` must read 8 at any zoom.
+
+**Automated?** - No. A dist check existed briefly and was dropped: it matched every rule ending in ` .react-flow__handle`, so any later state rule on the bare handle would have failed it without touching geometry, and exact-string matching against minified output was fragile. The source rule carries a comment; the geometry is covered by the manual pass.
+
 ## Missing entry-chunk font faces
 
 **What breaks** - Importing the root JavaScript barrel omits bundled font declarations, so text renders in fallback fonts unless a consumer separately imports `fonts.css`.

packages/ui/src/components/node/node-panel/handle.module.css

@@ -46,6 +46,8 @@
       box-sizing: content-box;
       width: var(--wb-public-node-port-size);
       height: var(--wb-public-node-port-size);
+      min-width: 0;
+      min-height: 0;
 
       background: var(--wb-public-node-port-background-color);
       border: var(--wb-public-node-port-border-size) solid var(--wb-public-node-port-border-color);
@@ -72,7 +74,9 @@
     /* State rules repeat the base rule's content-box opt-out: the build
        injects border-box per rule, so an undeclared box-sizing here would
        shrink the handle in exactly these states. */
-    :global(.connectingfrom) {
+    /* .connectingto is assigned by proximity (connectionRadius), so :hover cannot cover the target. */
+    :global(.connectingfrom),
+    :global(.connectingto.valid) {
       box-sizing: content-box;
       background: var(--wb-public-node-port-background-color-hover);
       border-color: var(--wb-public-node-port-border-color-hover);