@kubex/zinc 1.1.94 → 1.1.96

package/docs/pages/components/flow-builder.md

@@ -11,7 +11,12 @@ The Flow Builder is a three-panel editor for visual automations, with an optiona
 - **Header** (optional) — a full-width action bar rendered only when `slot="header-left"` / `slot="header-right"`
   content is provided (e.g. Close / Undo All Changes on the left, Apply Changes on the right).
 - **Left panel** — the steps panel (searchable, tabbed by step group).
-- **Canvas** (center) — a pannable, zoomable surface. Connections are **append-only**: click any **output port**
+- **Canvas** (center) — a pannable, zoomable surface. A node's branches fan out along a bus below it,
+  spaced by what they actually hold: two branches with children keep a full card lane apart, while a
+  branch that is only a pill sits close in, so declaring branches you have not wired costs little room.
+  Wires never run through a card: a branch that reaches past the next row keeps its pill on its own bus
+  and takes its wire out around the outside of whatever it flies over, so it always reads as ending where
+  it ends. Connections are **append-only**: click any **output port**
   on a node to start a **stray branch** — the wire follows your cursor until you click a node (or its output
   port) to attach it. Fan-in is allowed, and so are **loops** — a branch may point back to an earlier step (e.g.
   an answer that restarts the questioning); only wiring a node directly to itself is refused. Cancel by clicking
@@ -359,6 +364,12 @@ they're declarations that drive the rendered panel):
   trigger with no input.
 - `outputs` — a JSON array of ports, each a string id or a `{"id","label"}` object (e.g.
   `outputs='[{"id":"true","label":"TRUE"},{"id":"false","label":"FALSE"}]'`). Omit for a single default output.
+- `fixed-outputs` — the declared outputs are the *only* branches this step has: their pills carry no
+  delete, and clicking a fully-wired node's output adds nothing. Use it when the branches mirror fixed
+  fields in your own model (a success / failure / skip triple, say), where an extra or missing branch has
+  nowhere to be stored. Branches a step declares but has not wired cost almost no room — they are spaced
+  by their pill rather than by a whole child lane — so a step can offer every branch it supports without
+  fanning empty lanes across the canvas.
 
 Set an optional per-tab hint with the `triggers-hint` / `actions-hint` / `rules-hint` attributes on the
 builder. (A node's inspector `renderConfig` can't be expressed in markup — supply it via
@@ -604,6 +615,11 @@ builder.registerNodeTypes([
 A node type with `inputs: []` is a starting point (a trigger) with no incoming port. A type with
 multiple `outputs` renders one labeled port per output, so a branch can fan out to different steps.
 
+Add **`fixedOutputs: true`** when those outputs are the only branches the type can have — the canvas
+drops the delete on their pills and refuses to materialise an extra one. Unwired branches are spaced by
+their pill rather than a child lane, so a type can declare its full set of branches up front without the
+canvas fanning empty lanes for the ones a given node is not using.
+
 #### User-configurable outputs
 
 A type's `outputs` are the default. For steps whose branches are defined by the user (e.g. a conditional

package/docs/pages/components/page-builder.md

@@ -145,6 +145,37 @@ through the `config` attribute. Sections appear in page order; container section
 }
 ```
 
+## A required first section
+
+Pages that must always open with a particular section — a hero banner, a masthead — set
+`required-first` to that section type. The builder hoists an existing section of the type to
+the top of the page, or inserts an empty one when there is none, and pins it there: it has no
+remove action, ignores <kbd>Delete</kbd>, can't be dragged or moved into a container slot, and
+nothing can be dropped above it. Its content stays fully editable in the inspector, and the
+type stays in the palette, so further sections of it can still be added below.
+
+Which section is pinned is derived from the state — `sections[0]` when its type matches — so
+nothing about the lock is written into the persisted config.
+
+```html:preview
+<zn-page-builder heading="KB Homepage" required-first="hero" style="height: 420px"
+  config='{"sections":[{"id":"t1","type":"rich-text","data":{"content":"Welcome"}}]}'>
+  <template type="hero" slot="config" label="Hero" icon="star" category="Headers"
+            description="Banner with a heading and optional search">
+    <zn-input name="title" label="Title"></zn-input>
+    <zn-toggle name="showSearch" label="Show search"></zn-toggle>
+  </template>
+  <template type="rich-text" slot="config" label="Rich Text" icon="notes" category="Content"
+            description="A block of markdown content">
+    <zn-input name="content" label="Content"></zn-input>
+  </template>
+</zn-page-builder>
+```
+
+The config above declares only a rich-text section, so the hero is inserted above it — loading a
+page that lacks the required section normalises it rather than rejecting it. The guard is
+client-side, so a host that persists the config should still enforce the same rule on save.
+
 ## Container tiles
 
 A section type with a `slots` attribute becomes a full-row container: its card renders a

package/docs/pages/components/slash-menu.md

@@ -16,15 +16,16 @@ for you, as [`zn-textarea`](/components/textarea#slash-menu-quick-insertions) do
              slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}"></zn-textarea>
 ```
 
-Slot one into a textarea when you want the panel's own settings — `heading`, `max-items`, `placement`, `empty-text`, or
-its width — declared in markup. The textarea then drives your menu instead of building its own:
+Slot one into a textarea when you want the panel's own settings — `max-items`, `placement`, `empty-text`, its width, or
+the `heading` the list is announced by — declared in markup. The textarea then drives your menu instead of building its
+own:
 
 ```html:preview
 <zn-textarea label="Terms and conditions" rows="6" help-text="Type / to insert">
   <zn-slash-menu slot="slash-menu" heading="Replacement strings" max-items="6" style="--slash-menu-width: 360px">
-    <zn-slash-item icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
-    <zn-slash-item icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
-    <zn-slash-item icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
   </zn-slash-menu>
 </zn-textarea>
 ```
@@ -107,9 +108,134 @@ The menu doesn't listen for keys itself — whatever owns the field decides whic
 </script>
 ```
 
+### Grouping Items
+
+An item's `group` puts a heading above it. The heading is drawn whenever the group changes going down the list, so
+items sharing a group must be declared together — the menu lists them in the order it is given rather than gathering
+them for you. Leave the group off and an item is listed under no heading at all; declared first, those lead the list,
+which is how a handful of favourites can sit above named sections.
+
+```html:preview
+<zn-textarea label="Privacy policy" rows="7" help-text="Type / to see the sections, or 'company' to search across them">
+  <zn-slash-menu slot="slash-menu" style="--slash-menu-width: 340px">
+    <zn-slash-item icon="star@lu" label="Merchant block" value="{{MERCHANT_BLOCK}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" keywords="company" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" keywords="company" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="user@lu" label="Customer name" value="{{CUSTOMER_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="mail@lu" label="Customer email" value="{{CUSTOMER_EMAIL}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="calendar@lu" label="Refund window" value="{{REFUND_DAYS}} days"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+```
+
+Group headings are only a structure for browsing: a query ranks every match on merit, and the headings follow whatever
+order that leaves. Set `order` on an item to pin its place within a match band, and use `keywords` to make it findable
+by terms that aren't in its label.
+
+Driving the menu yourself, the same thing is a `group` on each item:
+
+```html:preview
+<zn-button id="grouped-anchor">Open the menu</zn-button>
+<zn-slash-menu id="grouped-menu"></zn-slash-menu>
+<div id="grouped-log" style="margin-top: 1rem; font-family: monospace; font-size: 0.875rem;"></div>
+
+<script type="module">
+  const anchor = document.getElementById('grouped-anchor');
+  const menu = document.getElementById('grouped-menu');
+  const log = document.getElementById('grouped-log');
+
+  await customElements.whenDefined('zn-slash-menu');
+
+  menu.items = [
+    {label: 'Paragraph', value: '', icon: 'type@lu', group: 'Basic blocks'},
+    {label: 'Heading 1', value: '# ', icon: 'heading-1@lu', group: 'Basic blocks'},
+    {label: 'Heading 2', value: '## ', icon: 'heading-2@lu', group: 'Basic blocks'},
+    {label: 'To-do list', value: '- [ ] ', icon: 'square-check@lu', group: 'Lists'},
+    {label: 'Bulleted list', value: '- ', icon: 'list@lu', group: 'Lists'},
+    {label: 'Callout', value: 'NOTE: ', icon: 'info@lu', group: 'Advanced'},
+    {label: 'Quote', value: '> ', icon: 'quote@lu', group: 'Advanced'}
+  ];
+  menu.hideKeys = true;
+  menu.anchor = anchor;
+
+  anchor.addEventListener('click', () => menu.open ? menu.hide() : menu.show());
+
+  menu.addEventListener('zn-slash-item-select', (event) => {
+    log.textContent = `selected ${event.detail.item.label} from ${event.detail.item.group}`;
+    menu.hide();
+  });
+</script>
+```
+
+### Keyboard Hints
+
+A footer pinned to the bottom of the panel spells out the keys the menu answers to. The list scrolls beneath it, so
+the hints stay in view. Use `hide-hints` on menus driven entirely by the mouse, or where the surrounding UI already
+explains the shortcuts.
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="4" help-text="Type / to see the hints"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings"></zn-slash-menu>
+</zn-textarea>
+
+<zn-textarea label="Internal note" rows="4" help-text="Type / — no hints"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}">
+  <zn-slash-menu slot="slash-menu" heading="Replacement strings" hide-hints></zn-slash-menu>
+</zn-textarea>
+```
+
+### Recently Used
+
+Set `recent-key` and the menu remembers what was chosen there, listing the most recent of those items above the rest
+under their own heading. The key is where the menu is used — `page-body`, `ticket-reply` — so each place keeps its own
+history in `localStorage`, and two fields that should share one can share a key. `max-recent` caps the section
+(3 by default), `recent-heading` names it, and `clearRecent()` forgets the lot. The section stands aside as soon as
+there is a query, when the ranked matches are the better answer.
+
+It reads as one more group, so it sits naturally above [grouped items](#grouping-items) — the section's own heading, then
+the sections the list already had. Insert a few from the first field below to see it fill:
+
+```html:preview
+<zn-textarea label="Privacy policy" rows="6" help-text="Type / and insert a few — they come back to the top">
+  <zn-slash-menu slot="slash-menu" recent-key="docs-grouped" style="--slash-menu-width: 340px">
+    <zn-slash-item group="Merchant" icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Merchant" icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="user@lu" label="Customer name" value="{{CUSTOMER_NAME}}"></zn-slash-item>
+    <zn-slash-item group="Customer" icon="mail@lu" label="Customer email" value="{{CUSTOMER_EMAIL}}"></zn-slash-item>
+    <zn-slash-item group="Policy" icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
+  </zn-slash-menu>
+</zn-textarea>
+
+<zn-button id="forget-recent" style="margin-top: 1rem">Forget them</zn-button>
+
+<script type="module">
+  import {clearRecentSlashItems} from '/dist/zn.min.js';
+
+  document.getElementById('forget-recent').addEventListener('click', () => {
+    clearRecentSlashItems('docs-grouped');
+    clearRecentSlashItems('docs-terms');
+  });
+</script>
+```
+
+Where the items below carry no heading of their own, a rule closes the section off instead. This field shares nothing
+with the one above — each key is its own history:
+
+```html:preview
+<zn-textarea label="Terms and conditions" rows="5" help-text="Type / and insert a few — the rule marks where they end"
+             slash-recent-key="docs-terms"
+             slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}},
+                          Customer name={{CUSTOMER_NAME}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>
+```
+
+`zn-input`, `zn-inline-edit`, `zn-translations` and `zn-remarkd-editor` take the same `slash-recent-key`. On a menu you
+slot in yourself, or drive with `SlashMenuController`, set `recent-key` on the `zn-slash-menu` directly.
+
 ### Truncating Long Lists
 
-`max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The panel
+`max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The list
 scrolls when its content exceeds `--slash-menu-max-height`.
 
 ```html:preview

package/docs/pages/components/textarea.md

@@ -501,6 +501,22 @@ the merge fields an application allows.
 </script>
 ```
 
+#### Recently Used Items
+
+`slash-recent-key` remembers what was inserted here and lists those items above the rest next time, under a
+"Recently used" heading. The key names the place the field is used, so each keeps its own history — see
+[`zn-slash-menu`](/components/slash-menu#recently-used) for the menu's own settings.
+
+```html:preview
+<zn-textarea
+  label="Refund policy"
+  rows="5"
+  slash-recent-key="docs-textarea-refunds"
+  help-text="Type / and insert a couple — they come back to the top"
+  slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}},
+               Refund window={{REFUND_DAYS}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>
+```
+
 #### Changing the Trigger
 
 Set `slash-trigger` to any characters. Using `{{` lets someone who already knows the token they want type it directly

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.94",
+  "version": "1.1.96",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/_root.scss

@@ -350,8 +350,14 @@ ul.square {
 
   // Frosted-glass inactive tabs for the zn-page tab navbar (consumed in
   // components/navbar/navbar.scss, scoped there to :host-context(zn-page)).
+  //
+  // The translucent background carries the frosted look on its own. Do NOT put a
+  // backdrop-filter here: navbar.scss applies it per inactive tab, so each tab
+  // becomes its own render surface and re-samples + re-blurs its backdrop every
+  // frame. On a page with a normal number of tabs that alone pushed GPU draw to
+  // ~8ms/frame and dropped frames on every scroll.
   --navbar-page-inactive-tab-background: rgba(255, 255, 255, 0.5);
-  --navbar-page-inactive-tab-filter: blur(2px);
+  --navbar-page-inactive-tab-filter: none;
 
   .zn-primary {
     color: rgb(var(--zn-color-primary));

package/src/components/button/button.scss

@@ -456,8 +456,11 @@
     inset-inline-start: 0;
     bottom: 0;
     border-left: solid 1px;
-    mix-blend-mode: multiply;
-    color: rgb(var(--zn-border-color));
+    // PERF: a blend mode here gave every non-first button in every group its own
+    // render surface, and the :not(:hover) above meant hovering a group added and
+    // removed surfaces — re-running layerize and re-compositing on pointer move.
+    // A semi-transparent border reads the same over the button fills.
+    color: rgba(var(--zn-border-color), 0.85);
   }
 }
 

package/src/components/flow-builder/flow-builder.component.ts

@@ -493,6 +493,7 @@ export default class ZnFlowBuilder extends ZincElement {
       description: el.getAttribute('description') ?? undefined,
       inputs: ZnFlowBuilder._parsePorts(el.getAttribute('inputs')),
       outputs: ZnFlowBuilder._parsePorts(el.getAttribute('outputs')),
+      fixedOutputs: el.hasAttribute('fixed-outputs'),
       branchFilters: ZnFlowBuilder._parseBranchFilters(el),
     };
   }
@@ -810,10 +811,20 @@ export default class ZnFlowBuilder extends ZincElement {
     // Centred under the branch drop (where the pill hangs), a full layer below
     // the source (same rhythm as untangle) — the child lands in a straight
     // line under the branch instead of being shoved sideways by collision.
-    const x = branchDropXs(source, t => this.registry.get(t))[idx];
+    const x = branchDropXs(source, t => this.registry.get(t), this._state.connections)[idx];
     return {x: Math.round(x - NODE_WIDTH / 2), y: source.y + LAYOUT_V_GAP};
   }
 
+  /**
+   * Whether a node refuses the branch being asked of it: a fixed-output type
+   * has only the branches it declares, so the "new branch" sentinel has nowhere
+   * to go. Checked before the history push, so a refused gesture is a no-op
+   * rather than an empty undo step.
+   */
+  private _refusesBranch(node: FlowNodeInstance, port: string): boolean {
+    return port === NEW_OUTPUT_PORT && !!this.registry.get(node.type)?.fixedOutputs;
+  }
+
   /**
    * Resolve an output port id on a node: the "new branch" sentinel materialises a
    * fresh, labelled output port (per-instance), so it exists before connecting.
@@ -847,6 +858,7 @@ export default class ZnFlowBuilder extends ZincElement {
     if (!source || !type) return;
     const inPort = typeInputs(type)[0]?.id;
     if (!inPort) return; // an entrypoint takes no inputs, so it can't be attached
+    if (this._refusesBranch(source, port)) return;
     this._pushHistory();
     port = this._ensureOutput(source, port);
     this._ensureBranchLabel(source, port);
@@ -882,6 +894,7 @@ export default class ZnFlowBuilder extends ZincElement {
     if (!source || !target || sourceId === targetId) return;
     const inPort = firstInputId(target, this.registry.get(target.type));
     if (inPort === null) return;
+    if (this._refusesBranch(source, port)) return;
     this._pushHistory();
     port = this._ensureOutput(source, port);
     this._ensureBranchLabel(source, port);
@@ -970,6 +983,7 @@ export default class ZnFlowBuilder extends ZincElement {
   private _onBranchDelete = (e: CustomEvent<{ nodeId: string; port: string }>) => {
     const node = this._state.nodes.find(n => n.id === e.detail.nodeId);
     if (!node) return;
+    if (this.registry.get(node.type)?.fixedOutputs) return; // its branches are the only ones it has
     this._pushHistory();
     const outputs = nodeOutputs(node, this.registry.get(node.type)).filter(p => p.id !== e.detail.port);
     // Deleting the last branch leaves a plain open output, so the node stays extensible.
@@ -1041,6 +1055,7 @@ export default class ZnFlowBuilder extends ZincElement {
     if (!owner || !moving) return;
     const inPort = firstInputId(moving, this.registry.get(moving.type));
     if (inPort === null) return;
+    if (this._refusesBranch(owner, e.detail.port)) return;
 
     this._pushHistory();
     const outPort = this._ensureOutput(owner, e.detail.port);

package/src/components/flow-builder/flow-builder.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
-import type {FlowNodeType, FlowState} from './flow.types';
+import {type FlowNodeType, type FlowState, NEW_OUTPUT_PORT, NODE_HEIGHT, NODE_WIDTH} from './flow.types';
 import type ZnFlowBuilder from './flow-builder.component';
 
 const TRIGGER: FlowNodeType = {type: 'webhook', label: 'Webhook', group: 'trigger', category: 'Contacts'};
@@ -293,4 +293,209 @@ describe('<zn-flow-builder>', () => {
       ]);
     });
   });
+  describe('fixed outputs', () => {
+    const FIXED: FlowNodeType = {
+      type: 'step',
+      label: 'Step',
+      group: 'action',
+      fixedOutputs: true,
+      outputs: [
+        {id: 'success', label: 'Success'},
+        {id: 'failure', label: 'Failure'},
+        {id: 'skip', label: 'Skip'},
+      ],
+    };
+
+    const wiredState: FlowState = {
+      nodes: [
+        {id: 'n1', type: 'step', x: 0, y: 0, data: {}},
+        {id: 'n2', type: 'step', x: 0, y: 220, data: {}},
+      ],
+      connections: [
+        {id: 'c1', source: {node: 'n1', port: 'success'}, target: {node: 'n2', port: 'in'}},
+        {id: 'c2', source: {node: 'n1', port: 'failure'}, target: {node: 'n2', port: 'in'}},
+        {id: 'c3', source: {node: 'n1', port: 'skip'}, target: {node: 'n2', port: 'in'}},
+      ],
+      notes: [],
+    };
+
+    const makeFixed = async (state: FlowState) => {
+      const el = await fixture<ZnFlowBuilder>(html`
+        <zn-flow-builder></zn-flow-builder>`);
+      el.registerNodeTypes([FIXED]);
+      el.setState(state);
+      await el.updateComplete;
+      return el;
+    };
+
+    it('should refuse to delete one of a fixed type\'s branches', async () => {
+      const el = await makeFixed(wiredState);
+      el.dispatchEvent(new CustomEvent('flow-branch-delete', {detail: {nodeId: 'n1', port: 'failure'}}));
+      await el.updateComplete;
+
+      const node = el.getState().nodes[0];
+      expect(node.outputs ?? FIXED.outputs).to.have.length(3);
+      expect(el.getState().connections).to.have.length(3);
+    });
+
+    it('should not offer a delete on a fixed type\'s branch pills', async () => {
+      const el = await makeFixed(wiredState);
+      const canvas = el.shadowRoot?.querySelector('zn-flow-canvas');
+      expect(canvas?.shadowRoot?.querySelector('.branch-pill')).to.exist;
+      expect(canvas?.shadowRoot?.querySelector('.branch-pill-delete')).to.not.exist;
+    });
+
+    it('should not grow a fixed type an extra branch when every one is wired', async () => {
+      const el = await makeFixed(wiredState);
+      el.dispatchEvent(new CustomEvent('flow-link-assign', {
+        detail: {nodeId: 'n1', port: NEW_OUTPUT_PORT, targetId: 'n2'},
+      }));
+      await el.updateComplete;
+
+      const node = el.getState().nodes[0];
+      expect(node.outputs ?? FIXED.outputs).to.have.length(3);
+      expect(el.getState().connections).to.have.length(3);
+    });
+
+    it('should still let an ordinary type grow a branch', async () => {
+      const el = await fixture<ZnFlowBuilder>(html`
+        <zn-flow-builder></zn-flow-builder>`);
+      el.registerNodeTypes([{...FIXED, fixedOutputs: false}]);
+      el.setState(wiredState);
+      await el.updateComplete;
+
+      el.dispatchEvent(new CustomEvent('flow-link-assign', {
+        detail: {nodeId: 'n1', port: NEW_OUTPUT_PORT, targetId: 'n2'},
+      }));
+      await el.updateComplete;
+
+      expect(el.getState().nodes[0].outputs).to.have.length(4);
+    });
+
+    it('should read fixed-outputs off a declared step', async () => {
+      const el = await fixture<ZnFlowBuilder>(html`
+        <zn-flow-builder>
+          <zn-flow-step type="step" group="action" label="Step" fixed-outputs
+                        outputs='[{"id":"success","label":"Success"},{"id":"failure","label":"Failure"}]'>
+          </zn-flow-step>
+        </zn-flow-builder>`);
+      el.setState({
+        nodes: [{id: 'n1', type: 'step', x: 0, y: 0, data: {}}],
+        connections: [],
+        notes: [],
+      });
+      await el.updateComplete;
+
+      el.dispatchEvent(new CustomEvent('flow-branch-delete', {detail: {nodeId: 'n1', port: 'failure'}}));
+      await el.updateComplete;
+      expect(el.getState().nodes[0].outputs).to.be.undefined; // untouched: still the type's two
+    });
+  });
+  describe('wire routing', () => {
+    const TRIPLE: FlowNodeType = {
+      type: 'step',
+      label: 'Step',
+      group: 'action',
+      fixedOutputs: true,
+      outputs: [
+        {id: 'success', label: 'Success'},
+        {id: 'failure', label: 'Failure'},
+        {id: 'skip', label: 'Skip'},
+      ],
+    };
+
+    // A's failure skips the middle row entirely and lands on C, while A's other
+    // branches and B's success feed the rows in between — the arrangement that
+    // drew A's failure wire straight down through B, so it read as though the
+    // branch ended at B.
+    const SKIP_A_ROW: FlowState = {
+      nodes: [
+        {id: 'a', type: 'step', x: 200, y: 700, data: {}},
+        {id: 'b', type: 'step', x: 200, y: 920, data: {}},
+        {id: 'c', type: 'step', x: 200, y: 1140, data: {}},
+      ],
+      connections: [
+        {id: 'c1', source: {node: 'a', port: 'success'}, target: {node: 'b', port: 'in'}},
+        {id: 'c2', source: {node: 'a', port: 'skip'}, target: {node: 'b', port: 'in'}},
+        {id: 'c3', source: {node: 'a', port: 'failure'}, target: {node: 'c', port: 'in'}},
+        {id: 'c4', source: {node: 'b', port: 'success'}, target: {node: 'c', port: 'in'}},
+      ],
+      notes: [],
+    };
+
+    const points = (d: string) => {
+      const numbers = d.match(/-?\d+(\.\d+)?/g)?.map(Number) ?? [];
+      const out: { x: number; y: number }[] = [];
+      for (let i = 0; i + 1 < numbers.length; i += 2) out.push({x: numbers[i], y: numbers[i + 1]});
+      return out;
+    };
+
+    const wirePaths = async (state: FlowState) => {
+      const el = await fixture<ZnFlowBuilder>(html`
+        <zn-flow-builder></zn-flow-builder>`);
+      el.registerNodeTypes([TRIPLE]);
+      el.setState(state);
+      await el.updateComplete;
+      const canvas = el.shadowRoot?.querySelector('zn-flow-canvas');
+      await canvas?.updateComplete;
+      return Array.from(canvas?.shadowRoot?.querySelectorAll('path.wire--link') ?? [])
+        .map(p => points(p.getAttribute('d') ?? ''))
+        .filter(pts => pts.length > 1);
+    };
+
+    // Segments are orthogonal, so a crossing is a plain rect overlap. The card's
+    // own edges are fair game: wires legitimately end on the top one.
+    const crossesCard = (pts: { x: number; y: number }[], card: { x: number; y: number }) => {
+      const E = 1;
+      for (let i = 0; i < pts.length - 1; i++) {
+        const minX = Math.min(pts[i].x, pts[i + 1].x);
+        const maxX = Math.max(pts[i].x, pts[i + 1].x);
+        const minY = Math.min(pts[i].y, pts[i + 1].y);
+        const maxY = Math.max(pts[i].y, pts[i + 1].y);
+        if (minX < card.x + NODE_WIDTH - E && maxX > card.x + E
+          && minY < card.y + NODE_HEIGHT - E && maxY > card.y + E) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    it('should route a row-skipping wire around the card it flies over', async () => {
+      const paths = await wirePaths(SKIP_A_ROW);
+      const middle = {x: 200, y: 920};
+
+      expect(paths.length).to.be.greaterThan(0);
+      paths.forEach(pts => {
+        expect(crossesCard(pts, middle), `wire ${JSON.stringify(pts)} crosses the middle card`)
+          .to.equal(false);
+      });
+    });
+
+    it('should take the row-skipping wire out to the side, not through the column', async () => {
+      const paths = await wirePaths(SKIP_A_ROW);
+      // A's failure pill sits on A's bus, so its wire is the one leaving highest.
+      const skipping = paths.reduce((lowestY, pts) => (pts[0].y < lowestY[0].y ? pts : lowestY));
+
+      expect(skipping[skipping.length - 1].y).to.equal(1140); // ends on C's input
+      expect(skipping.length).to.be.greaterThan(2); // not the straight drop
+      // It leaves the corridor the cards occupy (200..440) on its way past.
+      const outside = skipping.some(p => p.x > 440 || p.x < 200);
+      expect(outside, `expected a detour outside the column, got ${JSON.stringify(skipping)}`).to.equal(true);
+    });
+
+    it('should still draw a straight wire when the corridor is clear', async () => {
+      const paths = await wirePaths({
+        nodes: [
+          {id: 'a', type: 'step', x: 200, y: 700, data: {}},
+          {id: 'b', type: 'step', x: 200, y: 920, data: {}},
+        ],
+        connections: [{id: 'c1', source: {node: 'a', port: 'success'}, target: {node: 'b', port: 'in'}}],
+        notes: [],
+      });
+
+      expect(paths).to.have.length(1);
+      expect(paths[0]).to.have.length(2);
+      expect(paths[0][0].x).to.equal(paths[0][1].x);
+    });
+  });
 });