feat: Allow port names to be placed outside of a block

doc/examples.typ

@@ -305,6 +305,20 @@ wire.stub("g2-port-in",  "west")
 wire.stub("g2-port-out", "east")
 ```, vertical: true)
 
+#let port-names-outside = example(```
+element.block(
+  x: 0, y: 0, w: 2, h: 2, id: "block",
+  port-names-outside: true,
+  port-name-padding: 4pt,
+  ports: (
+    north: ((id: "clk", name: "CLK", clock: true),),
+    west: ((id: "in1", name: "A"),
+           (id: "in2", name: "B")),
+    east: ((id: "out", name: "Y"),)
+  )
+)
+```)
+
 #let port-shape = example(```
 // Block with pentagon-shaped ports.
 // - port-shape / port-kind / port-size are element-level defaults.

src/elements/block.typ

@@ -20,6 +20,9 @@
 /// Ports can be given a pentagon shape (with configurable direction, size,
 /// stroke and fill) via `port-shape` and per-port overrides:
 /// #examples.port-shape
+///
+/// Port name labels can be placed outside the block via `port-names-outside`:
+/// #examples.port-names-outside
 /// For other parameters description, see #doc-ref("element.elmt")
 /// - radius (number, length, ratio, dictionary): The corner radius of the block. See CeTZ documentation for more information
 #let block(
@@ -32,6 +35,7 @@
   ports: (),
   ports-margins: (),
   port-name-padding: 2pt,
+  port-names-outside: false,
   port-shape: none,
   port-kind: "in",
   port-size: 1em,
@@ -53,6 +57,7 @@
   ports: ports,
   ports-margins: ports-margins,
   port-name-padding: port-name-padding,
+  port-names-outside: port-names-outside,
   port-shape: port-shape,
   port-kind: port-kind,
   port-size: port-size,

src/elements/element.typ

@@ -38,6 +38,7 @@
 ///   - `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`)
+/// - port-names-outside (bool): If true, port name labels are drawn on the outside of the block instead of the inside (default `false`)
 /// - port-shape (none, str): Default port shape for all ports of this element. Set to `"pentagon"` to draw pentagon-shaped ports. Overridable per port via the port's `shape` field. See #examples.port-shape
 /// - port-kind (str): Default direction of ports (`"in"` or `"out"`). Overridable per port via the port's `kind` field
 /// - port-size (length): Default unit size of pentagon-shaped ports (default `1em`). Overridable per port via the port's `size` field
@@ -61,6 +62,7 @@
   ports: (:),
   ports-margins: (:),
   port-name-padding: 2pt,
+  port-names-outside: false,
   port-shape: none,
   port-kind: "in",
   port-size: 1em,
@@ -150,6 +152,7 @@
       ports-margins,
       debug: debug.ports,
       name-padding: port-name-padding,
+      outside-name: port-names-outside,
       port-shape: port-shape,
       port-kind: port-kind,
       port-size: port-size,