@formicoidea/labre-core 0.31.0 → 0.32.0

package/dist/_pkgs/affine-gfx-connector/direction/typed-edge.d.ts

@@ -0,0 +1,69 @@
+import { ConnectorElementModel } from '../../affine-model/index.js';
+import type { BlockStdScope } from '../../std/index.js';
+import type { EdgeDirectionDef, RoleDef, RoleDefs } from '../../std/gfx/index.js';
+/**
+ * "Is this connector a TYPED EDGE, and if so what does it say?" — the one
+ * question `docs/adr/0010` turns on.
+ *
+ * For an element whose `role` resolves to a `RoleDef` with `kind: 'edge'`, the
+ * persisted pair `source → target` IS the relation's orientation and part of
+ * the document's meaning. For a connector with no role — the generalist
+ * connector, the market glyph's wiring, an EDGY decoration — the two ends stay
+ * what they always were: the first and last point of a path, carrying no claim.
+ *
+ * Everything M1, M2 and M3 do is gated on this, and none of them knows a
+ * framework's name: the vocabulary is registered by whoever owns it
+ * (`RoleVocabularyExtension`), and this file only reads `kind` and the verb.
+ */
+/** A connector, plus the declaration that makes its direction mean something. */
+export interface TypedEdge {
+    model: ConnectorElementModel;
+    role: RoleDef;
+    /** The verb and the gesture hint, when the role declares them. */
+    direction?: EdgeDirectionDef;
+}
+/** Every role vocabulary registered in this editor assembly. */
+export declare function roleVocabularies(std: BlockStdScope): readonly RoleDefs[];
+/**
+ * `element` read as a typed edge, or `null`.
+ *
+ * Three ways to be `null`, and all three are deliberate:
+ *
+ * - it is not a connector (the reveal is about edges, not about nodes);
+ * - it carries no role, or one no loaded framework declares — nothing is
+ *   claimed about its ends and nothing is shown;
+ * - it carries a role of `kind: 'node'`, which on a connector is a mistake
+ *   somebody's data made and is treated as neutral rather than guessed at.
+ */
+export declare function asTypedEdge(vocabularies: readonly RoleDefs[], element: unknown): TypedEdge | null;
+/**
+ * Whether both ends of the edge are actually BOUND to an element.
+ *
+ * The guard `docs/adr/0010` asks for by name: an edge with a free endpoint
+ * relates nothing to nothing. Releasing the link tool over empty canvas
+ * produces one at any time, so this is not an edge case — it is a state the
+ * product reaches on the first misfire, and the honest answer there is silence.
+ * No chevron, no verb, and no W4 verdict either (the rule family applies the
+ * same test).
+ */
+export declare function edgeIsBound(model: ConnectorElementModel): boolean;
+/** A word to say, and the fallback to use when the host has no catalogue. */
+export interface EdgeVerb {
+    key: string;
+    fallback?: string;
+}
+/**
+ * The ONE word a revealed edge is labelled with — the role's verb.
+ *
+ * Only the verb, since the PO recette of 02/08/2026: the label used to carry
+ * the whole sentence, `Kettle depends on Electricity`, and a sentence laid on a
+ * short link is longer than the link, so it covered the two components it was
+ * naming. The names are already on the canvas at both ends of the line; what
+ * the drawing does not say is what the line MEANS, and that is the verb.
+ *
+ * The role's LABEL when it declares no verb, because the label is the only mark
+ * left and an unlabelled arrow says which way without ever saying what. `null`
+ * when the role declares neither, which is the one case where the library
+ * genuinely has nothing to add.
+ */
+export declare function edgeVerbOf(edge: TypedEdge): EdgeVerb | null;

package/dist/_pkgs/affine-gfx-connector/direction/typed-edge.js

@@ -0,0 +1,66 @@
+import { ConnectorElementModel } from '../../affine-model/index.js';
+import { findRoleDef, RoleVocabularyIdentifier } from '../../std/gfx/index.js';
+/** Every role vocabulary registered in this editor assembly. */
+export function roleVocabularies(std) {
+    return [...std.provider.getAll(RoleVocabularyIdentifier).values()];
+}
+/**
+ * `element` read as a typed edge, or `null`.
+ *
+ * Three ways to be `null`, and all three are deliberate:
+ *
+ * - it is not a connector (the reveal is about edges, not about nodes);
+ * - it carries no role, or one no loaded framework declares — nothing is
+ *   claimed about its ends and nothing is shown;
+ * - it carries a role of `kind: 'node'`, which on a connector is a mistake
+ *   somebody's data made and is treated as neutral rather than guessed at.
+ */
+export function asTypedEdge(vocabularies, element) {
+    if (!(element instanceof ConnectorElementModel))
+        return null;
+    const role = findRoleDef(vocabularies, element.role);
+    if (role === undefined || role.kind !== 'edge')
+        return null;
+    return role.direction
+        ? { model: element, role, direction: role.direction }
+        : { model: element, role };
+}
+/**
+ * Whether both ends of the edge are actually BOUND to an element.
+ *
+ * The guard `docs/adr/0010` asks for by name: an edge with a free endpoint
+ * relates nothing to nothing. Releasing the link tool over empty canvas
+ * produces one at any time, so this is not an edge case — it is a state the
+ * product reaches on the first misfire, and the honest answer there is silence.
+ * No chevron, no verb, and no W4 verdict either (the rule family applies the
+ * same test).
+ */
+export function edgeIsBound(model) {
+    return Boolean(model.source?.id) && Boolean(model.target?.id);
+}
+/**
+ * The ONE word a revealed edge is labelled with — the role's verb.
+ *
+ * Only the verb, since the PO recette of 02/08/2026: the label used to carry
+ * the whole sentence, `Kettle depends on Electricity`, and a sentence laid on a
+ * short link is longer than the link, so it covered the two components it was
+ * naming. The names are already on the canvas at both ends of the line; what
+ * the drawing does not say is what the line MEANS, and that is the verb.
+ *
+ * The role's LABEL when it declares no verb, because the label is the only mark
+ * left and an unlabelled arrow says which way without ever saying what. `null`
+ * when the role declares neither, which is the one case where the library
+ * genuinely has nothing to add.
+ */
+export function edgeVerbOf(edge) {
+    const verb = edge.direction
+        ? { key: edge.direction.verbKey, fallback: edge.direction.verbFallback }
+        : edge.role.labelKey !== undefined
+            ? { key: edge.role.labelKey, fallback: edge.role.labelFallback }
+            : null;
+    if (verb === null)
+        return null;
+    return verb.fallback === undefined
+        ? { key: verb.key }
+        : { key: verb.key, fallback: verb.fallback };
+}

package/dist/_pkgs/affine-gfx-connector/effects.d.ts

@@ -1,4 +1,5 @@
 import { EdgelessConnectorHandle } from './components/connector-handle.js';
+import { EdgeDirectionWidget } from './direction/direction-widget.js';
 import { EdgelessConnectorLabelEditor } from './text/edgeless-connector-label-editor.js';
 import { EdgelessConnectorMenu } from './toolbar/connector-menu.js';
 import { EdgelessConnectorToolButton } from './toolbar/connector-tool-button.js';
@@ -9,5 +10,6 @@ declare global {
         'edgeless-connector-menu': EdgelessConnectorMenu;
         'edgeless-connector-label-editor': EdgelessConnectorLabelEditor;
         'edgeless-connector-handle': EdgelessConnectorHandle;
+        'affine-edge-direction-widget': EdgeDirectionWidget;
     }
 }

package/dist/_pkgs/affine-gfx-connector/effects.js

@@ -1,4 +1,5 @@
 import { EdgelessConnectorHandle } from './components/connector-handle.js';
+import { EDGE_DIRECTION_WIDGET, EdgeDirectionWidget, } from './direction/direction-widget.js';
 import { EdgelessConnectorLabelEditor } from './text/edgeless-connector-label-editor.js';
 import { EdgelessConnectorMenu } from './toolbar/connector-menu.js';
 import { EdgelessConnectorToolButton } from './toolbar/connector-tool-button.js';
@@ -7,4 +8,5 @@ export function effects() {
     customElements.define('edgeless-connector-menu', EdgelessConnectorMenu);
     customElements.define('edgeless-connector-label-editor', EdgelessConnectorLabelEditor);
     customElements.define('edgeless-connector-handle', EdgelessConnectorHandle);
+    customElements.define(EDGE_DIRECTION_WIDGET, EdgeDirectionWidget);
 }

package/dist/_pkgs/affine-gfx-connector/element-renderer/connector-dom/index.js

@@ -2,6 +2,13 @@ import { ConnectorMode, DefaultTheme, } from '../../../affine-model/index.js';
 import { PointLocation, SVGPathBuilder } from '../../../global/gfx/index.js';
 import { isConnectorWithLabel } from '../../connector-manager.js';
 import { DEFAULT_ARROW_SIZE } from '../utils.js';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * The nodes a connector host already owns, kept across renders. Rebuilding the
+ * whole `<svg>` subtree on every frame allocated one element per connector per
+ * pan, zoom or drag; the attributes are cheap to overwrite in place.
+ */
+const retainedConnectorDom = new WeakMap();
 function calculatePathBounds(path) {
     if (path.length === 0) {
         return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
@@ -40,7 +47,7 @@ function createConnectorPath(points, mode) {
     return pathBuilder.build();
 }
 function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
-    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    const marker = document.createElementNS(SVG_NS, 'marker');
     const size = DEFAULT_ARROW_SIZE * (strokeWidth / 2);
     marker.id = id;
     marker.setAttribute('viewBox', '0 0 20 20');
@@ -52,7 +59,7 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
     marker.setAttribute('markerUnits', 'strokeWidth');
     switch (style) {
         case 'Arrow': {
-            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            const path = document.createElementNS(SVG_NS, 'path');
             path.setAttribute('d', isStart ? 'M 20 5 L 10 10 L 20 15 Z' : 'M 0 5 L 10 10 L 0 15 Z');
             path.setAttribute('fill', color);
             path.setAttribute('stroke', color);
@@ -60,7 +67,7 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
             break;
         }
         case 'Triangle': {
-            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            const path = document.createElementNS(SVG_NS, 'path');
             path.setAttribute('d', isStart ? 'M 20 7 L 12 10 L 20 13 Z' : 'M 0 7 L 8 10 L 0 13 Z');
             path.setAttribute('fill', color);
             path.setAttribute('stroke', color);
@@ -68,7 +75,7 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
             break;
         }
         case 'Circle': {
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            const circle = document.createElementNS(SVG_NS, 'circle');
             circle.setAttribute('cx', '10');
             circle.setAttribute('cy', '10');
             circle.setAttribute('r', '4');
@@ -78,7 +85,7 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
             break;
         }
         case 'Diamond': {
-            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            const path = document.createElementNS(SVG_NS, 'path');
             path.setAttribute('d', 'M 10 6 L 14 10 L 10 14 L 6 10 Z');
             path.setAttribute('fill', color);
             path.setAttribute('stroke', color);
@@ -88,14 +95,53 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
     }
     return marker;
 }
-function renderConnectorLabel(model, container, renderer, zoom) {
+function clearRetainedConnectorDom(element) {
+    retainedConnectorDom.delete(element);
+    element.replaceChildren();
+}
+function getRetainedConnectorDom(element) {
+    const existing = retainedConnectorDom.get(element);
+    if (existing) {
+        return existing;
+    }
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.style.position = 'absolute';
+    svg.style.overflow = 'visible';
+    svg.style.pointerEvents = 'none';
+    const defs = document.createElementNS(SVG_NS, 'defs');
+    const path = document.createElementNS(SVG_NS, 'path');
+    path.setAttribute('fill', 'none');
+    path.setAttribute('stroke-linecap', 'round');
+    path.setAttribute('stroke-linejoin', 'round');
+    svg.append(defs, path);
+    element.replaceChildren(svg);
+    const retained = {
+        svg,
+        defs,
+        path,
+        label: null,
+    };
+    retainedConnectorDom.set(element, retained);
+    return retained;
+}
+function getOrCreateLabelElement(retained) {
+    if (retained.label) {
+        return retained.label;
+    }
+    const label = document.createElement('div');
+    retained.svg.insertAdjacentElement('afterend', label);
+    retained.label = label;
+    return label;
+}
+function renderConnectorLabel(model, retained, renderer, zoom) {
     if (!isConnectorWithLabel(model) || !model.labelXYWH) {
+        retained.label?.remove();
+        retained.label = null;
         return;
     }
     const [lx, ly, lw, lh] = model.labelXYWH;
     const { labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, }, } = model;
-    // Create label element
-    const labelElement = document.createElement('div');
+    const labelElement = getOrCreateLabelElement(retained);
     labelElement.style.position = 'absolute';
     labelElement.style.left = `${lx * zoom}px`;
     labelElement.style.top = `${ly * zoom}px`;
@@ -122,10 +168,7 @@ function renderConnectorLabel(model, container, renderer, zoom) {
     labelElement.style.whiteSpace = 'pre-wrap';
     labelElement.style.wordWrap = 'break-word';
     // Add text content
-    if (model.text) {
-        labelElement.textContent = model.text.toString();
-    }
-    container.append(labelElement);
+    labelElement.textContent = model.text ? model.text.toString() : '';
 }
 /**
  * Renders a ConnectorElementModel to a given HTMLElement using DOM/SVG.
@@ -138,12 +181,12 @@ function renderConnectorLabel(model, container, renderer, zoom) {
 export const connectorDomRenderer = (model, element, renderer) => {
     const { zoom } = renderer.viewport;
     const { mode, path: points, strokeStyle, frontEndpointStyle, rearEndpointStyle, strokeWidth, stroke, } = model;
-    // Clear previous content
-    element.innerHTML = '';
     // Early return if no path points
     if (!points || points.length < 2) {
+        clearRetainedConnectorDom(element);
         return;
     }
+    const retained = getRetainedConnectorDom(element);
     // Calculate bounds for the SVG viewBox
     const pathBounds = calculatePathBounds(points);
     const padding = Math.max(strokeWidth * 2, 20); // Add padding for arrows
@@ -151,8 +194,7 @@ export const connectorDomRenderer = (model, element, renderer) => {
     const svgHeight = (pathBounds.maxY - pathBounds.minY + padding * 2) * zoom;
     const offsetX = pathBounds.minX - padding;
     const offsetY = pathBounds.minY - padding;
-    // Create SVG element
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const { defs, path, svg } = retained;
     svg.style.position = 'absolute';
     svg.style.left = `${offsetX * zoom}px`;
     svg.style.top = `${offsetY * zoom}px`;
@@ -161,25 +203,20 @@ export const connectorDomRenderer = (model, element, renderer) => {
     svg.style.overflow = 'visible';
     svg.style.pointerEvents = 'none';
     svg.setAttribute('viewBox', `0 0 ${svgWidth / zoom} ${svgHeight / zoom}`);
-    // Create defs for markers
-    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-    svg.append(defs);
     const strokeColor = renderer.getColorValue(stroke, DefaultTheme.connectorColor, true);
     // Create markers for endpoints
+    const markers = [];
     let startMarkerId = '';
     let endMarkerId = '';
     if (frontEndpointStyle !== 'None') {
         startMarkerId = `start-marker-${model.id}`;
-        const startMarker = createArrowMarker(startMarkerId, frontEndpointStyle, strokeColor, strokeWidth, true);
-        defs.append(startMarker);
+        markers.push(createArrowMarker(startMarkerId, frontEndpointStyle, strokeColor, strokeWidth, true));
     }
     if (rearEndpointStyle !== 'None') {
         endMarkerId = `end-marker-${model.id}`;
-        const endMarker = createArrowMarker(endMarkerId, rearEndpointStyle, strokeColor, strokeWidth, false);
-        defs.append(endMarker);
+        markers.push(createArrowMarker(endMarkerId, rearEndpointStyle, strokeColor, strokeWidth, false));
     }
-    // Create path element
-    const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    defs.replaceChildren(...markers);
     // Adjust points relative to the SVG coordinate system
     const adjustedPoints = points.map(point => {
         const adjustedPoint = new PointLocation([
@@ -201,32 +238,32 @@ export const connectorDomRenderer = (model, element, renderer) => {
         return adjustedPoint;
     });
     const pathData = createConnectorPath(adjustedPoints, mode);
-    pathElement.setAttribute('d', pathData);
-    pathElement.setAttribute('stroke', strokeColor);
-    pathElement.setAttribute('stroke-width', String(strokeWidth));
-    pathElement.setAttribute('fill', 'none');
-    pathElement.setAttribute('stroke-linecap', 'round');
-    pathElement.setAttribute('stroke-linejoin', 'round');
-    // Apply stroke style
+    path.setAttribute('d', pathData);
+    path.setAttribute('stroke', strokeColor);
+    path.setAttribute('stroke-width', String(strokeWidth));
     if (strokeStyle === 'dash') {
-        pathElement.setAttribute('stroke-dasharray', '12,12');
+        path.setAttribute('stroke-dasharray', '12,12');
+    }
+    else {
+        path.removeAttribute('stroke-dasharray');
     }
-    // Apply markers
     if (startMarkerId) {
-        pathElement.setAttribute('marker-start', `url(#${startMarkerId})`);
+        path.setAttribute('marker-start', `url(#${startMarkerId})`);
+    }
+    else {
+        path.removeAttribute('marker-start');
     }
     if (endMarkerId) {
-        pathElement.setAttribute('marker-end', `url(#${endMarkerId})`);
+        path.setAttribute('marker-end', `url(#${endMarkerId})`);
+    }
+    else {
+        path.removeAttribute('marker-end');
     }
-    svg.append(pathElement);
-    element.append(svg);
     // Set element size and position
     element.style.width = `${model.w * zoom}px`;
     element.style.height = `${model.h * zoom}px`;
     element.style.overflow = 'visible';
     element.style.pointerEvents = 'none';
-    // Set z-index for layering
-    element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
     // Render label if present
-    renderConnectorLabel(model, element, renderer, zoom);
+    renderConnectorLabel(model, retained, renderer, zoom);
 };

package/dist/_pkgs/affine-gfx-connector/index.d.ts

@@ -1,6 +1,7 @@
 export * from './adapter/index.js';
 export * from './connector-manager.js';
 export * from './connector-tool.js';
+export * from './direction/index.js';
 export * from './element-renderer/index.js';
 export { ConnectorDomRendererExtension } from './element-renderer/connector-dom.js';
 export * from './element-transform/index.js';

package/dist/_pkgs/affine-gfx-connector/index.js

@@ -1,6 +1,7 @@
 export * from './adapter/index.js';
 export * from './connector-manager.js';
 export * from './connector-tool.js';
+export * from './direction/index.js';
 export * from './element-renderer/index.js';
 export { ConnectorDomRendererExtension } from './element-renderer/connector-dom.js';
 export * from './element-transform/index.js';

package/dist/_pkgs/affine-gfx-connector/toolbar/config.d.ts

@@ -16,10 +16,60 @@ export declare const connectorToolbarConfig: {
             readonly id: "b.flip-direction";
             readonly icon: import("lit-html").TemplateResult<1>;
             readonly tooltip: "Flip direction";
+            /**
+             * Hidden for a TYPED EDGE (`docs/adr/0010` M3).
+             *
+             * This entry swaps the two endpoint STYLES and does not touch
+             * `source`/`target`. On a generalist connector that is honest — it is
+             * an arrowhead menu. On an edge whose persisted direction is the
+             * relation's orientation it would move the only visible sign of that
+             * relation while leaving the relation intact: the picture and the
+             * data would then disagree. Such an edge gets `d.invert-direction`
+             * instead, which moves both.
+             *
+             * Not gated on any framework flag: the vocabulary that answers "is
+             * this a typed edge" is registered by the always-on render extension,
+             * so a Wardley link stays protected on a board whose Wardley tooling
+             * is switched off.
+             *
+             * `some`, so a MIXED selection hides it too: one swap applied to
+             * every selected connector would still lie about the typed one, and
+             * `b.invert-direction` appears in its place and acts on that half.
+             * A typed edge with a free end also keeps it hidden — the entry is
+             * hidden by what the element IS, never by what it happens to bind.
+             */
+            readonly when: (ctx: ToolbarContext) => boolean;
             readonly run: (ctx: ToolbarContext) => void;
         }, {
             readonly id: "c.end-point-style";
             readonly content: (ctx: ToolbarContext) => import("lit-html").TemplateResult<1> | null;
+        }, {
+            /**
+             * **Reverse direction** — M3 of `docs/adr/0010`, and the only
+             * supported inversion of a typed edge.
+             *
+             * It sits where `b.flip-direction` would have been, appears only when
+             * every selected connector is a typed edge, and runs the registered
+             * command rather than a private copy of it — so the contextual
+             * toolbar, the palette, Settings › Shortcuts and the agent all reach
+             * the same behaviour and the same single telemetry emission.
+             */
+            readonly id: "b.invert-direction";
+            readonly icon: import("lit-html").TemplateResult<1>;
+            readonly tooltip: "Reverse direction";
+            /**
+             * Shown as soon as the selection holds ONE reversible typed edge, and
+             * it then acts on the typed edges of that selection and on nothing
+             * else — `invertibleEdges` is the same filter on both sides.
+             *
+             * `some`, not `every`, on purpose: a selection mixing a Wardley link
+             * with a plain arrow used to show NEITHER this entry (not every model
+             * is typed) nor `b.flip-direction` (some model is), so lassoing two
+             * connectors silently took the direction affordance away. A partial
+             * gesture that says what it did beats a menu that vanishes.
+             */
+            readonly when: (ctx: ToolbarContext) => boolean;
+            readonly run: (ctx: ToolbarContext) => void;
         }, {
             readonly id: "d.connector-shape";
             readonly content: (ctx: ToolbarContext) => import("lit-html").TemplateResult<1> | null;

package/dist/_pkgs/affine-gfx-connector/toolbar/config.js

@@ -7,10 +7,12 @@ import { getMostCommonResolvedValue, getMostCommonValue, } from '../../affine-sh
 import { getRootBlock, LINE_STYLE_LIST, renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { AddTextIcon, ConnectorCIcon, ConnectorEIcon, ConnectorLIcon, EndPointArrowIcon, EndPointCircleIcon, EndPointDiamondIcon, EndPointTriangleIcon, FlipDirectionIcon, StartPointArrowIcon, StartPointCircleIcon, StartPointDiamondIcon, StartPointIcon, StartPointTriangleIcon, } from '@blocksuite/icons/lit';
-import { BlockFlavourIdentifier } from '../../std/index.js';
+import { BlockFlavourIdentifier, getRegisteredCommands, runCommand, } from '../../std/index.js';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { isConnectorWithLabel } from '../connector-manager.js';
+import { INVERT_EDGE_DIRECTION } from '../direction/invert-direction.js';
+import { asTypedEdge, edgeIsBound, roleVocabularies, } from '../direction/typed-edge.js';
 import { mountConnectorLabelEditor } from '../text/index.js';
 const FRONT_ENDPOINT_STYLE_LIST = [
     {
@@ -200,6 +202,31 @@ export const connectorToolbarConfig = {
                     id: 'b.flip-direction',
                     icon: FlipDirectionIcon(),
                     tooltip: 'Flip direction',
+                    /**
+                     * Hidden for a TYPED EDGE (`docs/adr/0010` M3).
+                     *
+                     * This entry swaps the two endpoint STYLES and does not touch
+                     * `source`/`target`. On a generalist connector that is honest — it is
+                     * an arrowhead menu. On an edge whose persisted direction is the
+                     * relation's orientation it would move the only visible sign of that
+                     * relation while leaving the relation intact: the picture and the
+                     * data would then disagree. Such an edge gets `d.invert-direction`
+                     * instead, which moves both.
+                     *
+                     * Not gated on any framework flag: the vocabulary that answers "is
+                     * this a typed edge" is registered by the always-on render extension,
+                     * so a Wardley link stays protected on a board whose Wardley tooling
+                     * is switched off.
+                     *
+                     * `some`, so a MIXED selection hides it too: one swap applied to
+                     * every selected connector would still lie about the typed one, and
+                     * `b.invert-direction` appears in its place and acts on that half.
+                     * A typed edge with a free end also keeps it hidden — the entry is
+                     * hidden by what the element IS, never by what it happens to bind.
+                     */
+                    when: ctx => !ctx
+                        .getSurfaceModelsByType(ConnectorElementModel)
+                        .some(model => asTypedEdge(roleVocabularies(ctx.std), model)),
                     run(ctx) {
                         const models = ctx.getSurfaceModelsByType(ConnectorElementModel);
                         if (!models.length)
@@ -237,6 +264,45 @@ export const connectorToolbarConfig = {
                         });
                     },
                 },
+                {
+                    /**
+                     * **Reverse direction** — M3 of `docs/adr/0010`, and the only
+                     * supported inversion of a typed edge.
+                     *
+                     * It sits where `b.flip-direction` would have been, appears only when
+                     * every selected connector is a typed edge, and runs the registered
+                     * command rather than a private copy of it — so the contextual
+                     * toolbar, the palette, Settings › Shortcuts and the agent all reach
+                     * the same behaviour and the same single telemetry emission.
+                     */
+                    id: 'b.invert-direction',
+                    icon: FlipDirectionIcon(),
+                    tooltip: 'Reverse direction',
+                    /**
+                     * Shown as soon as the selection holds ONE reversible typed edge, and
+                     * it then acts on the typed edges of that selection and on nothing
+                     * else — `invertibleEdges` is the same filter on both sides.
+                     *
+                     * `some`, not `every`, on purpose: a selection mixing a Wardley link
+                     * with a plain arrow used to show NEITHER this entry (not every model
+                     * is typed) nor `b.flip-direction` (some model is), so lassoing two
+                     * connectors silently took the direction affordance away. A partial
+                     * gesture that says what it did beats a menu that vanishes.
+                     */
+                    when: ctx => ctx
+                        .getSurfaceModelsByType(ConnectorElementModel)
+                        .some(model => asTypedEdge(roleVocabularies(ctx.std), model) !== null &&
+                        edgeIsBound(model)),
+                    run(ctx) {
+                        const command = getRegisteredCommands(ctx.std).find(candidate => candidate.id === INVERT_EDGE_DIRECTION);
+                        if (!command)
+                            return;
+                        runCommand(ctx.std, command, {
+                            surface: 'contextual-toolbar',
+                            source: 'toolbar:general',
+                        });
+                    },
+                },
                 {
                     id: 'd.connector-shape',
                     content(ctx) {

package/dist/_pkgs/affine-gfx-connector/view.js

@@ -1,6 +1,8 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
+import { CommandExtension } from '../std/index.js';
 import { ConnectionOverlay } from './connector-manager.js';
 import { ConnectorTool } from './connector-tool.js';
+import { edgeDirectionCommands, EdgeDirectionManager, edgeDirectionWidget, } from './direction/index.js';
 import { effects } from './effects.js';
 import { ConnectorElementRendererExtension } from './element-renderer/index.js';
 import { ConnectorDomRendererExtension } from './element-renderer/connector-dom.js';
@@ -29,6 +31,20 @@ export class ConnectorViewExtension extends ViewExtensionProvider {
             context.register(connectorToolbarExtension);
             context.register(ConnectionOverlay);
             context.register(ConnectorInteraction);
+            // The direction affordance of `docs/adr/0010`, registered ALWAYS-ON with
+            // the rest of the connector view: a typed edge is document content, so
+            // what shows its orientation (M2) and what lets the user reverse it (M3)
+            // must keep working when the framework that minted it is flagged off —
+            // and `b.flip-direction`, which lies about such an edge, is hidden
+            // whatever the flag says. All three are no-ops until some framework
+            // registers a role vocabulary.
+            //
+            // No canvas overlay any more: since the PO acceptance of 02/08/2026 the
+            // reveal is ONE mark, the sentence laid along the link with a point at
+            // its target end, and that mark is DOM.
+            context.register(EdgeDirectionManager);
+            context.register(edgeDirectionWidget);
+            context.register(CommandExtension(edgeDirectionCommands));
         }
     }
 }