feat: Add port-name-padding parameter

Replaces the hard-coded 2pt padding used when placing port name labels.
Configurable per element via port-name-padding on elmt (forwarded by
block and group), defaulting to 2pt to preserve existing layout.

doc/examples.typ

@@ -56,7 +56,7 @@ for i in range(3) {
 ```)
 
 #let wires = example(```
-for i in range(4) {
+for i in range(5) {
   draw.circle((i * 3, 0), radius: .1, name: "p" + str(i * 2))
   draw.circle((i * 3 + 2, 1), radius: .1, name: "p" + str(i * 2 + 1))
   draw.content((i * 3 + 1, -1), raw(wire.wire-styles.at(i)))
@@ -68,6 +68,8 @@ wire.wire("w3", ("p4", "p5"), style: "dodge",
 wire.wire("w4", ("p6","p7"), style: "guided",
           guided-center:(20%, 40%), guided-margins: (90%,87%),
           guided-sides: ("north","south"))
+wire.wire("w5", ("p8", "p9"), style: "u-shape",
+          u-side: "east", u-depth: 0.5)
 
 ```, vertical: true)
 
@@ -186,9 +188,93 @@ wire.wire("w2", ("b2-port-out", "b3-port-in2"),
           style: "zigzag")
 ```)
 
+#let group-ports = example(```
+// outside-port-names: true (default) — labels outside the border
+element.group(
+  id: "g1", name: "outside (default)",
+  stroke: (dash: "dashed"),
+  fill: util.colors.blue.lighten(60%),
+  padding: 2em,
+  outside-port-names: true,
+  port-name-padding: 4pt,
+  ports: (
+    west:  ((id: "in",  name: "D"),),
+    east:  ((id: "out", name: "Q"),),
+  ),
+  { element.block(id: "b1", w: 2, h: 1.5, x: 0, y: 0,
+      fill: util.colors.green,
+      ports: (west: ((id: "d", name: "d"),),
+              east: ((id: "q", name: "q"),))) }
+)
+wire.wire("wG1in",  ("g1-port-in", "b1-port-d"), directed: true)
+wire.wire("wG1out", ("b1-port-q",  "g1-port-out"), directed: true)
+
+// outside-port-names: false — labels inside the border (block style)
+// with extra padding via port-name-padding
+element.group(
+  id: "g2", name: "inside",
+  stroke: (dash: "dashed"),
+  fill: util.colors.orange.lighten(60%),
+  padding: 2em,
+  outside-port-names: false,
+  port-name-padding: 0.4em,
+  ports: (
+    west:  ((id: "in",  name: "D"),),
+    east:  ((id: "out", name: "Q"),),
+  ),
+  { element.block(id: "b2", w: 2, h: 1.5, x: 6, y: 0,
+      fill: util.colors.green,
+      ports: (west: ((id: "d"),), east: ((id: "q"),))) }
+)
+wire.stub("g2-port-in",  "west")
+wire.stub("g2-port-out", "east")
+```, vertical: true)
+
 #let intersection = example(```
 wire.wire("w1", ((0, 0), (1, 1)), style: "zigzag")
 wire.wire("w2", ((0, 0), (1, -.5)),
           style: "zigzag", zigzag-ratio: 80%)
 wire.intersection("w1.zig")
 ```)
+
+#let u-shape-wire = example(```
+// east <-> east (u-side auto-detected)
+element.block(x: 0,   y: 0,    w: 1.5, h: 1.5, id: "eA",
+  fill: util.colors.orange,
+  ports: (east: ((id: "out"),)))
+element.block(x: 0.5, y: -2.5, w: 1.5, h: 1.5, id: "eB",
+  fill: util.colors.orange,
+  ports: (east: ((id: "out"),)))
+wire.wire("uEE", ("eA-port-out", "eB-port-out"),
+          style: "u-shape", u-depth: 0.5)
+
+// west <-> west (auto-detected)
+element.block(x: 6,   y: 0,    w: 1.5, h: 1.5, id: "wA",
+  fill: util.colors.yellow,
+  ports: (west: ((id: "in"),)))
+element.block(x: 6.5, y: -2.5, w: 1.5, h: 1.5, id: "wB",
+  fill: util.colors.yellow,
+  ports: (west: ((id: "in"),)))
+wire.wire("uWW", ("wA-port-in", "wB-port-in"),
+          style: "u-shape", u-depth: 0.5)
+
+// north <-> north (auto-detected)
+element.block(x: 10,   y: -3,   w: 1.5, h: 1.5, id: "nA",
+  fill: util.colors.green,
+  ports: (north: ((id: "out"),)))
+element.block(x: 12.5, y: -2.5, w: 1.5, h: 1.5, id: "nB",
+  fill: util.colors.green,
+  ports: (north: ((id: "out"),)))
+wire.wire("uNN", ("nA-port-out", "nB-port-out"),
+          style: "u-shape", u-depth: 0.5)
+
+// south <-> south with explicit u-side override
+element.block(x: 16,   y: -3,   w: 1.5, h: 1.5, id: "sA",
+  fill: util.colors.pink,
+  ports: (south: ((id: "out"),)))
+element.block(x: 18.5, y: -3.5, w: 1.5, h: 1.5, id: "sB",
+  fill: util.colors.pink,
+  ports: (south: ((id: "out"),)))
+wire.wire("uSS", ("sA-port-out", "sB-port-out"),
+          style: "u-shape", u-side: "south", u-depth: 0.5)
+```, vertical: true)

gallery/test_group_ports.typ

@@ -0,0 +1,86 @@
+// Demonstrates ports on a group element.
+// outside-port-names: true  (default) — labels outside the group border
+// outside-port-names: false           — labels inside  (block-style)
+#import "/src/lib.typ": circuit, element, util, wire
+
+#set page(width: auto, height: auto, margin: .5cm)
+
+#circuit({
+  // --- Group with port labels INSIDE (outside-port-names: false) ---
+  element.group(
+    id: "cpu",
+    name: "CPU (labels outside)",
+    name-anchor: "north",
+    stroke: (dash: "dashed"),
+    fill: util.colors.yellow.lighten(60%),
+    padding: 1em,
+    port-name-padding: .5em,
+    outside-port-names: true,
+    ports: (
+      west: (
+        (id: "in1", name: "D1"),
+        (id: "in2", name: "D2"),
+      ),
+      east: ((id: "out", name: "Q"),),
+      south: (
+        (id: "rst", name: "RST", vertical: true),
+        (id: "done", name: "DONE", vertical: true),
+      ),
+    ),
+    {
+      element.block(
+        id: "reg2",
+        w: 2.5,
+        h: 3,
+        x: 0,
+        y: 0,
+        fill: util.colors.green,
+        ports: (
+          west: ((id: "d1"), (id: "d2")),
+          east: ((id: "q"),),
+          north: ((id: "clk", clock: true),),
+        ),
+      )
+    },
+  )
+  // --- Group with port labels INSIDE (outside-port-names: false) ---
+  element.group(
+    id: "cpu2",
+    name: "CPU (labels inside)",
+    name-anchor: "north",
+    stroke: (dash: "dashed"),
+    fill: util.colors.yellow.lighten(60%),
+    padding: 4em,
+    outside-port-names: false,
+    port-name-padding: 0.5em,
+    ports: (
+      west: (
+        (id: "in1", name: "D1"),
+        (id: "in2", name: "D2"),
+      ),
+      east: ((id: "out", name: "Q"),),
+      south: (
+        (id: "rst", name: "RST", vertical: true),
+        (id: "done", name: "DONE", vertical: true),
+      ),
+    ),
+    {
+      element.block(
+        id: "reg2",
+        w: 2.5,
+        h: 3,
+        x: 10,
+        y: 0,
+        fill: util.colors.green,
+        ports: (
+          west: ((id: "d1"), (id: "d2")),
+          east: ((id: "q"),),
+          north: ((id: "clk", clock: true),),
+        ),
+      )
+    },
+  )
+  wire.stub("cpu2-port-in1", "west", name: "A")
+  wire.stub("cpu2-port-in2", "west", name: "B")
+  wire.stub("cpu2-port-out", "east", name: "Q")
+})

gallery/test_ushape.typ

@@ -0,0 +1,53 @@
+// Demonstrates the u-shape wire style.
+// The u-side is auto-detected from the port anchors when both endpoints
+// belong to elements (deduced from the port position vs the element's
+// center anchor). It can also be set explicitly with u-side.
+#import "/src/lib.typ": circuit, element, util, wire
+
+#set page(width: auto, height: auto, margin: .5cm)
+
+#circuit({
+  // ---- east <-> east (auto-detected) ----
+  element.block(x: 0,   y: 0,    w: 1.5, h: 1.5, id: "eA",
+    fill: util.colors.orange,
+    ports: (east: ((id: "out"),)))
+  element.block(x: 0.5, y: -2.5, w: 1.5, h: 1.5, id: "eB",
+    fill: util.colors.orange,
+    ports: (east: ((id: "out"),)))
+  wire.wire("uEE", ("eA-port-out", "eB-port-out"),
+            style: "u-shape", u-depth: 0.6,
+            name: "E-E")
+
+  // ---- west <-> west (auto-detected) ----
+  element.block(x: 6,   y: 0,    w: 1.5, h: 1.5, id: "wA",
+    fill: util.colors.yellow,
+    ports: (west: ((id: "in"),)))
+  element.block(x: 6.5, y: -2.5, w: 1.5, h: 1.5, id: "wB",
+    fill: util.colors.yellow,
+    ports: (west: ((id: "in"),)))
+  wire.wire("uWW", ("wA-port-in", "wB-port-in"),
+            style: "u-shape", u-depth: 0.6,
+            name: "W-W")
+
+  // ---- north <-> north (auto-detected) ----
+  element.block(x: 10,   y: -3,   w: 1.5, h: 1.5, id: "nA",
+    fill: util.colors.green,
+    ports: (north: ((id: "out"),)))
+  element.block(x: 12.5, y: -2.5, w: 1.5, h: 1.5, id: "nB",
+    fill: util.colors.green,
+    ports: (north: ((id: "out"),)))
+  wire.wire("uNN", ("nA-port-out", "nB-port-out"),
+            style: "u-shape", u-depth: 0.6,
+            name: "N-N")
+
+  // ---- south <-> south (explicit u-side override) ----
+  element.block(x: 16,   y: 0,    w: 1.5, h: 1.5, id: "sA",
+    fill: util.colors.pink,
+    ports: (south: ((id: "out"),)))
+  element.block(x: 18.5, y: -0.5, w: 1.5, h: 1.5, id: "sB",
+    fill: util.colors.pink,
+    ports: (south: ((id: "out"),)))
+  wire.wire("uSS", ("sA-port-out", "sB-port-out"),
+            style: "u-shape", u-side: "south", u-depth: 0.6,
+            name: "S-S")
+})

src/elements/block.typ

@@ -27,6 +27,7 @@
   name-anchor: "center",
   ports: (),
   ports-margins: (),
+  port-name-padding: 2pt,
   fill: none,
   radius: 0.5em,
   stroke: black + 1pt,
@@ -44,6 +45,7 @@
   name-anchor: name-anchor,
   ports: ports,
   ports-margins: ports-margins,
+  port-name-padding: port-name-padding,
   fill: fill,
   stroke: stroke,
   id: id,

src/elements/element.typ

@@ -37,6 +37,7 @@
 ///   - `clock` (`bool`): Whether it is a clock port (triangle symbol)
 ///   - `vertical` (`bool`): Whether the name should be drawn vertically
 /// - ports-margins (dictionary): Dictionary of ports margins (used with automatic port placement). They keys are cardinal directions ("north", "east", "south", "west"). The values are tuples of (`<start>`, `<end>`) margins (numbers)
+/// - port-name-padding (number, length): Padding between the port name label and the port anchor point (default `2pt`)
 /// - fill (none, color): Fill color
 /// - stroke (stroke): Border stroke
 /// - id (str): The block id (for future reference)
@@ -56,6 +57,7 @@
   name-anchor: "center",
   ports: (:),
   ports-margins: (:),
+  port-name-padding: 2pt,
   fill: none,
   stroke: black + 1pt,
   id: "",
@@ -140,7 +142,8 @@
       tl, tr, br, bl,
       ports,
       ports-margins,
-      debug: debug.ports
+      debug: debug.ports,
+      name-padding: port-name-padding,
     )
   }
 })

src/elements/group.typ

@@ -1,9 +1,15 @@
 #import "/src/cetz.typ": draw, coordinate
 #import "../util.typ"
+#import "ports.typ": add-ports
 
 /// Draws a group of elements
 ///
 /// #examples.group
+///
+/// Ports can also be defined on a group, just like on a block. By default
+/// port labels are drawn *outside* the group border so they do not overlap
+/// child elements. Set `outside-port-names: false` to draw them inside.
+/// #examples.group-ports
 /// - body (elements, function): Elements to group
 /// - id (str): see #doc-ref("element.elmt")
 /// - name (str): The group's name
@@ -16,6 +22,11 @@
 ///    - array: either (`<all>`,), (`<vertical>`, `<horizontal>`) or (`<top>`, `<right>`, `<bottom>`, `<left>`)
 ///    - dictionary: valid keys are "top", "right", "bottom" and "left"
 /// - radius (number): The corner radius
+/// - ports (dictionary): see #doc-ref("element.elmt")
+/// - ports-margins (dictionary): see #doc-ref("element.elmt")
+/// - outside-port-names (bool): If `true` (default), port name labels are drawn outside the group border so they do not overlap child elements. Set to `false` to draw labels inside, matching the block behaviour
+/// - port-name-padding (number, length): Padding between the port name label and the group border (default `2pt`). Accepts anything CeTZ accepts as `padding` (number or length)
+/// - debug (dictionary): see #doc-ref("element.elmt")
 #let group(
   body,
   id: "",
@@ -24,7 +35,14 @@
   fill: none,
   stroke: black + 1pt,
   padding: 0.5em,
-  radius: 0.5em
+  radius: 0.5em,
+  ports: (:),
+  ports-margins: (:),
+  outside-port-names: true,
+  port-name-padding: 2pt,
+  debug: (
+    ports: false
+  )
 ) = {
   let min-x = none
   let max-x = none
@@ -68,6 +86,20 @@
     stroke: stroke,
     fill: fill
   )
+
+  add-ports(
+    id,
+    id + ".north-west",
+    id + ".north-east",
+    id + ".south-east",
+    id + ".south-west",
+    ports,
+    ports-margins,
+    debug: debug.ports,
+    outside-name: outside-port-names,
+    name-padding: port-name-padding,
+  )
+
   if name != none {
     draw.content(
       id + "." + name-anchor,

src/elements/ports.typ

@@ -1,11 +1,13 @@
 #import "/src/cetz.typ": draw
-#import "../util.typ": rotate-anchor
+#import "../util.typ": rotate-anchor, opposite-anchor
 
 #let add-port(
   elmt-id, side, port, pos,
   prev: none,
   next: none,
-  debug: false
+  debug: false,
+  outside-name: false,
+  name-padding: 2pt,
 ) = {
   let name = port.at("name", default: "")
   let name-rotate = port.at("vertical", default: false)
@@ -27,10 +29,22 @@
     // TODO: use context or vectors to have the height relative to the width
     draw.line(prev, pos1, next)
   }
+
+  // When outside-name is true (e.g. for groups) the label is placed on the
+  // exterior of the element border so it does not overlap child elements.
+  // Horizontal labels: anchor = opposite of the side (e.g. east port → west-anchored text, outside).
+  // Vertical labels:   same opposite side but rotated 90°, keeping text readable.
+  let name-anchor = if outside-name {
+    if name-rotate { rotate-anchor(opposite-anchor(side)) }
+    else           { opposite-anchor(side) }
+  } else {
+    if name-rotate { rotate-anchor(side) } else { side }
+  }
+
   draw.content(
     pos,
-    anchor: if name-rotate {rotate-anchor(side)} else {side},
-    padding: 2pt,
+    anchor: name-anchor,
+    padding: name-padding,
     angle: if name-rotate {90deg} else {0deg},
     name
   )
@@ -60,7 +74,9 @@
   tl, tr, br, bl,
   ports,
   ports-margins,
-  debug: false
+  debug: false,
+  outside-name: false,
+  name-padding: 2pt,
 ) = {
   let sides = (
     "north": (tl, tr),
@@ -109,7 +125,9 @@
         pos,
         prev: pos-prev,
         next: pos-next,
-        debug: debug
+        debug: debug,
+        outside-name: outside-name,
+        name-padding: name-padding,
       )
     }
   }

src/wire.typ

@@ -3,7 +3,10 @@
 
 /// List of valid wire styles
 /// #examples.wires
-#let wire-styles = ("direct", "zigzag", "dodge", "guided")
+///
+/// The `"u-shape"` style connects two ports that face the same cardinal side.
+/// #examples.u-shape-wire
+#let wire-styles = ("direct", "zigzag", "dodge", "guided", "u-shape")
 #let signal-width = 1pt
 #let bus-width = 1.5pt
 
@@ -109,6 +112,100 @@
   return (points, anchors)
 }
 
+#let _u-valid-sides = ("east", "west", "north", "south")
+
+// Try to deduce the cardinal side a port anchor faces by comparing its
+// position to the center of the element it belongs to. Returns none if the
+// anchor is not a port-style anchor (i.e. does not contain "-port-") or if
+// resolution fails.
+#let _u-detect-side(anchor, ctx) = {
+  if type(anchor) != str { return none }
+  let sep = "-port-"
+  if not anchor.contains(sep) { return none }
+  let elmt-id = anchor.split(sep).first()
+  let port-pos = none
+  let center-pos = none
+  // coordinate.resolve panics on unknown anchors; there is no try/catch in
+  // Typst, so we assume port anchors created by add-port always come with a
+  // matching group of the same name. If not, the user must set u-side
+  // explicitly.
+  let (_, p1) = coordinate.resolve(ctx, anchor)
+  let (_, p2) = coordinate.resolve(ctx, elmt-id + ".center")
+  port-pos = p1
+  center-pos = p2
+  let dx = port-pos.at(0) - center-pos.at(0)
+  let dy = port-pos.at(1) - center-pos.at(1)
+  if calc.abs(dx) >= calc.abs(dy) {
+    return if dx >= 0 { "east" } else { "west" }
+  } else {
+    return if dy >= 0 { "north" } else { "south" }
+  }
+}
+
+#let get-u-shape-wire(pts, u-depth, u-side, ctx) = {
+  let start = pts.first()
+  let end = pts.last()
+
+  // Resolve the (auto|explicit) side
+  let side = u-side
+  if side == auto {
+    let side-start = _u-detect-side(start, ctx)
+    let side-end = _u-detect-side(end, ctx)
+    if side-start != none and side-end != none and side-start != side-end {
+      panic(
+        "u-shape: start port faces '" + side-start
+        + "' but end port faces '" + side-end
+        + "'; both must face the same side, or set u-side explicitly"
+      )
+    }
+    if side-start != none { side = side-start }
+    else if side-end != none { side = side-end }
+    else {
+      panic(
+        "u-shape: could not auto-detect u-side (endpoints are not port anchors); "
+        + "please set u-side explicitly to one of " + repr(_u-valid-sides)
+      )
+    }
+  }
+  if not side in _u-valid-sides {
+    panic("u-shape: invalid u-side '" + repr(side) + "'; must be one of " + repr(_u-valid-sides))
+  }
+
+  let (ctx, s) = coordinate.resolve(ctx, start)
+  let (ctx, e) = coordinate.resolve(ctx, end)
+  let (sx, sy, ..) = s
+  let (ex, ey, ..) = e
+
+  let p1
+  let p2
+  if side == "east" {
+    let bx = calc.max(sx, ex) + u-depth
+    p1 = (bx, sy, 0)
+    p2 = (bx, ey, 0)
+  } else if side == "west" {
+    let bx = calc.min(sx, ex) - u-depth
+    p1 = (bx, sy, 0)
+    p2 = (bx, ey, 0)
+  } else if side == "north" {
+    let by = calc.max(sy, ey) + u-depth
+    p1 = (sx, by, 0)
+    p2 = (ex, by, 0)
+  } else if side == "south" {
+    let by = calc.min(sy, ey) - u-depth
+    p1 = (sx, by, 0)
+    p2 = (ex, by, 0)
+  }
+
+  let points = (start, p1, p2, end)
+  let anchors = (
+    "start": start,
+    "u-start": p1,
+    "u-end": p2,
+    "end": end
+  )
+  return (points, anchors)
+}
+
 #let get-guided-wire(pts, margins, sides, center-guides, ctx) = {
   let start = pts.first()
   let end = pts.last()
@@ -212,6 +309,8 @@
 /// - guided-center (array): the horizontal and vertical guides of the center guides (only with style "guided")
 /// - guided-margins (array): the start and end of guided margins of the wire (only with style "guided")
 /// - guided-sides (array): the side of start and end array (must be either "north", "south", "west", "east") (only work with style "guided")
+/// - u-side (auto, str): The cardinal side both endpoints face (one of "east", "west", "north", "south"). If `auto`, it is deduced from the endpoints when they are port anchors of the form `<elmt-id>-port-<port-id>` by comparing each port's position with its element's `.center` anchor. Auto-detection panics if the two endpoints resolve to different sides, or if neither endpoint is a port anchor (only with style "u-shape")
+/// - u-depth (number): Distance between the outermost endpoint (in the `u-side` direction) and the U-bend line (only with style "u-shape")
 #let wire(
   id, pts,
   bus: false,
@@ -231,7 +330,9 @@
   zigzag-dir: "vertical",
   dodge-y: 0,
   dodge-sides: ("east", "west"),
-  dodge-margins: (5%, 5%)
+  dodge-margins: (5%, 5%),
+  u-side: auto,
+  u-depth: 0.5,
 ) = draw.get-ctx(ctx => {
   if not style in wire-styles {
     panic("Invalid wire style '" + style + "'")
@@ -277,6 +378,13 @@
       guided-center,
       ctx
     )
+  } else if style == "u-shape" {
+    (points, anchors) = get-u-shape-wire(
+      pts,
+      u-depth,
+      u-side,
+      ctx
+    )
   }
 
   let mark = (fill: color)