@formicoidea/labre-core 0.41.0 → 0.43.1

package/dist/_pkgs/affine-components/toolbar/toolbar.js

@@ -2,6 +2,7 @@ import { panelBaseStyle } from '../../affine-shared/styles/index.js';
 import { stopPropagation } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement } from 'lit';
+import { EDITOR_MENU_TOGGLE } from './menu-button.js';
 export class EditorToolbar extends WithDisposable(LitElement) {
     static { this.styles = css `
     ${panelBaseStyle(':host')}
@@ -13,6 +14,27 @@ export class EditorToolbar extends WithDisposable(LitElement) {
       height: 36px;
       box-sizing: content-box;
       flex-wrap: nowrap;
+      /* And never outside its own background. The row's width is a max-width
+         the positioner writes; entries keep their natural width (below), so a
+         row that has nothing left to give up would otherwise paint its last
+         icons over the document, past the border and the shadow — which is
+         what a 420px window used to show.
+
+         Clipped on the X axis alone: overflow-x hidden would make the row a
+         scroll container on BOTH axes (a visible paired with a hidden computes
+         to auto) and swallow the dropdown panels, which are positioned inside
+         the row and hang above and below it. */
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
+    /* ...except while one of those panels is open. A clipping box is also what
+       floating-ui fits a panel into, so left in place the rule above would
+       squeeze a 176px menu into the width of the row that opened it — or, for
+       a dropdown at one end of the row, cut half of it off. See
+       syncOpenMenus below, which is what raises this attribute. */
+    :host([data-menu-open]) {
+      overflow: visible;
     }
 
     :host([data-without-bg]) {
@@ -35,6 +57,38 @@ export class EditorToolbar extends WithDisposable(LitElement) {
       fill: currentColor;
     }
   `; }
+    /** The panels open in this row right now, whatever opened them. */
+    #openMenus = new Set();
+    /**
+     * Says, on the row itself, whether one of its panels is open.
+     *
+     * Why an attribute at all: the row cannot ask the question in CSS. `:host()`
+     * takes a COMPOUND selector and `:has()` is not one, so
+     * `:host(:has([data-open]))` is not a rule browsers honour (Chromium
+     * 2026-09: it matches from the document, never from inside the shadow root).
+     *
+     * Why not a `querySelector` for `data-open`, which the buttons do raise:
+     * because it answers only for the buttons the row holds DIRECTLY. A colour
+     * picker keeps its menu button inside its own shadow root, where neither a
+     * `querySelector` nor a `MutationObserver` of this row can see it — and that
+     * is the row whose panel the clip was cutting in half
+     * (`framework-palette-carousel.spec.ts`). {@link EDITOR_MENU_TOGGLE} is
+     * composed, so it crosses every boundary, and it is raised before the panel
+     * is ever positioned.
+     *
+     * A panel whose button is taken off the row by a re-render never says it
+     * closed, so the set is swept of anything no longer in a document.
+     */
+    #syncOpenMenus() {
+        for (const menu of this.#openMenus) {
+            if (!menu.isConnected)
+                this.#openMenus.delete(menu);
+        }
+        if (this.#openMenus.size > 0)
+            this.dataset.menuOpen = 'true';
+        else
+            delete this.dataset.menuOpen;
+    }
     connectedCallback() {
         super.connectedCallback();
         this._disposables.addFromEvent(this, 'pointerdown', (e) => {
@@ -44,6 +98,19 @@ export class EditorToolbar extends WithDisposable(LitElement) {
         this._disposables.addFromEvent(this, 'wheel', stopPropagation, {
             passive: false,
         });
+        this._disposables.addFromEvent(this, EDITOR_MENU_TOGGLE, (e) => {
+            // The deepest element of the path, not `target`: a composed event that
+            // crosses a shadow boundary is retargeted to the host it came out of,
+            // and one host may hold more than one panel.
+            const menu = e.composedPath()[0];
+            if (!(menu instanceof Element))
+                return;
+            if (e.detail)
+                this.#openMenus.add(menu);
+            else
+                this.#openMenus.delete(menu);
+            this.#syncOpenMenus();
+        });
     }
     render() {
         return html `<slot></slot>`;

package/dist/_pkgs/affine-components/translations.d.ts

@@ -23,6 +23,14 @@ export declare const COLOR_PICKER_TAB_CUSTOM: ChromeWording;
 export declare const COLOR_PICKER_MODE_NORMAL: ChromeWording;
 export declare const COLOR_PICKER_MODE_LIGHT: ChromeWording;
 export declare const COLOR_PICKER_MODE_DARK: ChromeWording;
+/**
+ * The carousel's own two words (`docs/adr/0027`). The PAGE names are not
+ * here: the base page is the one below, and a framework's page is named by the
+ * framework itself, through the `labelWording` it registers — the same key its
+ * senior button already uses.
+ */
+export declare const PALETTE_GROUP_DEFAULT: ChromeWording;
+export declare const PALETTE_GROUP_CHOOSE: ChromeWording;
 export { COLOR_LABEL, FILL_COLOR_LABEL };
 export declare const BORDER_COLOR_LABEL: ChromeWording;
 export declare const CONTEXT_MENU_NO_RESULTS: ChromeWording;

package/dist/_pkgs/affine-components/translations.js

@@ -51,6 +51,21 @@ export const COLOR_PICKER_MODE_DARK = [
     'com.labre.color-picker.mode.dark',
     'Dark',
 ];
+/* ── Palette carousel (the framework pages of a colour picker) ───────── */
+/**
+ * The carousel's own two words (`docs/adr/0027`). The PAGE names are not
+ * here: the base page is the one below, and a framework's page is named by the
+ * framework itself, through the `labelWording` it registers — the same key its
+ * senior button already uses.
+ */
+export const PALETTE_GROUP_DEFAULT = [
+    'com.labre.color-picker.palette.default',
+    'Default',
+];
+export const PALETTE_GROUP_CHOOSE = [
+    'com.labre.color-picker.palette.choose',
+    'Choose a palette',
+];
 /* ── Shape colour picker ─────────────────────────────────────────────── */
 export { COLOR_LABEL, FILL_COLOR_LABEL };
 export const BORDER_COLOR_LABEL = [
@@ -408,6 +423,8 @@ export const COMPONENTS_WORDINGS = [
     COLOR_PICKER_MODE_NORMAL,
     COLOR_PICKER_MODE_LIGHT,
     COLOR_PICKER_MODE_DARK,
+    PALETTE_GROUP_DEFAULT,
+    PALETTE_GROUP_CHOOSE,
     BORDER_COLOR_LABEL,
     CONTEXT_MENU_NO_RESULTS,
     CONTEXT_MENU_DONE,

package/dist/_pkgs/affine-foundation/view.js

@@ -1,7 +1,7 @@
 import { FileDropExtension } from '../affine-components/drop-indicator/index.js';
 import { PeekViewExtension, } from '../affine-components/peek/index.js';
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { AutoClearSelectionService, BlockCommentManager, BlockLifecycleTelemetryWatcher, CitationService, DefaultOpenDocExtension, DNDAPIExtension, DocDisplayMetaService, DocModeService, EditPropsStore, EmbedOptionService, FileSizeLimitService, FontConfigExtension, fontConfigSchema, FontLoaderService, LinkPreviewCache, LinkPreviewCacheConfigSchema, LinkPreviewCacheExtension, LinkPreviewService, PageViewportServiceExtension, PivotMaterialityPublisher, TelemetryExtension, ThemeService, ToolbarRegistryExtension, } from '../affine-shared/services/index.js';
+import { AutoClearSelectionService, BlockCommentManager, BlockLifecycleTelemetryWatcher, CitationService, DefaultOpenDocExtension, DNDAPIExtension, DocDisplayMetaService, DocModeService, DocumentDamageTelemetryWatcher, EditPropsStore, EmbedOptionService, FileSizeLimitService, FontConfigExtension, fontConfigSchema, FontLoaderService, LinkPreviewCache, LinkPreviewCacheConfigSchema, LinkPreviewCacheExtension, LinkPreviewService, PageViewportServiceExtension, PivotMaterialityPublisher, TelemetryExtension, ThemeService, ToolbarRegistryExtension, } from '../affine-shared/services/index.js';
 import { InteractivityManager, ToolController } from '../std/gfx/index.js';
 import { z } from 'zod';
 import { clipboardConfigs } from './clipboard.js';
@@ -44,6 +44,7 @@ export class FoundationViewExtension extends ViewExtensionProvider {
             BlockCommentManager,
             // Inert without an injected TelemetryService; see telemetry README.
             BlockLifecycleTelemetryWatcher,
+            DocumentDamageTelemetryWatcher,
         ]);
         context.register(clipboardConfigs);
         if (this.isEdgeless(context.scope)) {

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card-title-editor.js

@@ -138,7 +138,7 @@ let FrameCardTitleEditor = (() => {
                 background: 'var(--affine-background-primary-color)',
                 border: '1px solid var(--affine-primary-color)',
                 color: 'var(--affine-text-primary-color)',
-                boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30)',
+                boxShadow: '0px 0px 0px 2px color-mix(in srgb, var(--affine-primary-color) 30%, transparent)',
                 zIndex: '1',
                 display: 'block',
             });

package/dist/_pkgs/affine-fragment-frame-panel/card/frame-card.js

@@ -69,7 +69,7 @@ const styles = css `
   }
 
   .frame-card-container.selected .frame-card-body {
-    border: 2px solid var(--light-brand-color, #1e96eb);
+    border: 2px solid var(--affine-primary-color);
   }
 
   .frame-card-container.dragging {

package/dist/_pkgs/affine-gfx-brush/element-renderer.js

@@ -1,4 +1,4 @@
-import { ElementRendererExtension, } from '../affine-block-surface/index.js';
+import { ElementRendererExtension, taggedPath2D, } from '../affine-block-surface/index.js';
 import { DefaultTheme } from '../affine-model/index.js';
 export const brush = (model, ctx, matrix, renderer) => {
     const { rotate } = model;
@@ -8,6 +8,6 @@ export const brush = (model, ctx, matrix, renderer) => {
     ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy));
     const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
     ctx.fillStyle = color;
-    ctx.fill(new Path2D(model.commands));
+    ctx.fill(taggedPath2D(model.commands));
 };
 export const BrushElementRendererExtension = ElementRendererExtension('brush', brush);

package/dist/_pkgs/affine-gfx-brush/toolbar/components/eraser/icons.js

@@ -45,7 +45,7 @@ export const EdgelessEraserLightIcon = html `<svg
   />
   <path
     d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"
-    fill="#1E96EB"
+    fill="var(--affine-primary-color)"
   />
   <path
     d="M27.5 16.5H33H34.6295C35.2048 16.5 35.706 16.8921 35.8443 17.4505L35.8583 17.5067C36.0615 18.3269 36.7242 18.9534 37.5545 19.1105C38.1029 19.2142 38.5 19.6934 38.5 20.2516V21.75V27.5V39V61.5H27.5V16.5Z"

package/dist/_pkgs/affine-gfx-brush/toolbar/configs/brush.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import { packColor, } from '../../../affine-components/color-picker/index.js';
+import { frameworkPaletteGroups, packColor, } from '../../../affine-components/color-picker/index.js';
 import { BrushElementModel, DefaultTheme, LineWidth, resolveColor, } from '../../../affine-model/index.js';
 import { ToolbarModuleExtension, translateKey, } from '../../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../../affine-shared/utils/index.js';
@@ -72,6 +72,9 @@ export const brushToolbarConfig = {
                             break;
                     }
                 };
+                // A stroke drawn on a framework board opens on that framework's hues
+                // (`docs/adr/0027`); the editor palette stays page one.
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
                 return html `
           <edgeless-color-picker-button
             class="color"
@@ -81,6 +84,8 @@ export const brushToolbarConfig = {
             .theme=${theme}
             .originalColor=${originalColor}
             .enableCustomColor=${enableCustomColor}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .std=${ctx.std}
           >
           </edgeless-color-picker-button>

package/dist/_pkgs/affine-gfx-brush/toolbar/configs/highlighter.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '../../../affine-block-surface/index.js';
-import { adjustColorAlpha, keepColor, packColor, } from '../../../affine-components/color-picker/index.js';
+import { adjustColorAlpha, frameworkPaletteGroups, keepColor, packColor, } from '../../../affine-components/color-picker/index.js';
 import { DEFAULT_HIGHLIGHTER_LINE_WIDTH, DefaultTheme, HIGHLIGHTER_LINE_WIDTHS, HighlighterElementModel, resolveColor, } from '../../../affine-model/index.js';
 import { ToolbarModuleExtension, translateKey, } from '../../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../../affine-shared/utils/index.js';
@@ -82,6 +82,9 @@ export const highlighterToolbarConfig = {
                         control: 'color picker',
                     });
                 };
+                // A highlight drawn over a framework board opens on that framework's
+                // hues (`docs/adr/0027`); the short stroke palette stays page one.
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.StrokeColorShortPalettes);
                 return html `
           <edgeless-color-picker-button
             .colorPanelClass="${'one-way small'}"
@@ -91,6 +94,8 @@ export const highlighterToolbarConfig = {
             .theme=${theme}
             .originalColor=${originalColor}
             .palettes=${DefaultTheme.StrokeColorShortPalettes}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .shouldKeepColor=${true}
             .enableCustomColor=${false}
             .std=${ctx.std}

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

@@ -1,5 +1,5 @@
 import { AStarRunner, Overlay } from '../affine-block-surface/index.js';
-import { type BrushElementModel, type Connection, ConnectorElementModel, GroupElementModel, type LocalConnectorElementModel } from '../affine-model/index.js';
+import { type BrushElementModel, type Connection, ConnectorElementModel, type ConnectorLabelEnd, GroupElementModel, type LocalConnectorElementModel } from '../affine-model/index.js';
 import type { IBound, IVec } from '../global/gfx/index.js';
 import { Bound, PointLocation } from '../global/gfx/index.js';
 import type { BlockStdScope } from '../std/index.js';
@@ -26,6 +26,14 @@ export declare function isCenterAnchorEligible(ele: GfxModel): boolean;
  */
 export declare function isCenterAnchorEnabled(std: BlockStdScope): boolean;
 export declare function isConnectorWithLabel(model: GfxModel | GfxLocalElementModel): boolean;
+/**
+ * The end-label twin of `isConnectorWithLabel`: a connector carrying a painted
+ * label beside its `source` / `target` endpoint.
+ *
+ * A `LocalConnectorElementModel` has no labels at all — it is the preview a
+ * drag paints — so the `instanceof` is the guard, exactly as above.
+ */
+export declare function isConnectorWithEndLabel(model: GfxModel | GfxLocalElementModel, end: ConnectorLabelEnd): boolean;
 export declare function calculateNearestLocation(point: IVec, bounds: IBound, locations?: IVec[], shortestDistance?: number): IVec;
 export declare function isConnectorAndBindingsAllSelected(connector: ConnectorElementModel | LocalConnectorElementModel, selected: GfxModel[]): boolean;
 export declare function getAnchors(ele: GfxModel, includeCenterAnchor?: boolean): {

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

@@ -160,6 +160,46 @@ function computePerimeterPointForCenterAnchor(connectable, centerPoint, otherPoi
 export function isConnectorWithLabel(model) {
     return model instanceof ConnectorElementModel && model.hasLabel();
 }
+/**
+ * The end-label twin of `isConnectorWithLabel`: a connector carrying a painted
+ * label beside its `source` / `target` endpoint.
+ *
+ * A `LocalConnectorElementModel` has no labels at all — it is the preview a
+ * drag paints — so the `instanceof` is the guard, exactly as above.
+ */
+export function isConnectorWithEndLabel(model, end) {
+    return model instanceof ConnectorElementModel && model.hasEndLabel(end);
+}
+/**
+ * Translates one end label's box by how far its endpoint moved, so the label
+ * keeps the position the author gave it RELATIVE to that end.
+ *
+ * `ConnectorPathGenerator.updatePath` is the only caller: the label follows the
+ * end on every re-route, and on nothing else.
+ */
+function followEndpoint(model, end, previousPath) {
+    const box = model.endLabelXYWH(end);
+    if (!box || !model.hasEndLabel(end))
+        return;
+    const nextPath = model.absolutePath;
+    if (nextPath.length === 0 || previousPath.length === 0)
+        return;
+    const endpointOf = (path) => end === 'source' ? path[0] : path[path.length - 1];
+    const from = endpointOf(previousPath);
+    const to = endpointOf(nextPath);
+    const dx = to[0] - from[0];
+    const dy = to[1] - from[1];
+    if (dx === 0 && dy === 0)
+        return;
+    const [x, y, w, h] = box;
+    const moved = [x + dx, y + dy, w, h];
+    if (end === 'source') {
+        model.sourceLabelXYWH = moved;
+    }
+    else {
+        model.targetLabelXYWH = moved;
+    }
+}
 export function calculateNearestLocation(point, bounds, locations = ConnectorEndpointLocations, shortestDistance = Number.POSITIVE_INFINITY) {
     const { x, y, w, h } = bounds;
     return locations
@@ -1000,6 +1040,10 @@ export class ConnectorPathGenerator extends PathGenerator {
         const relativePoints = points.map((p) => {
             return p.setVec(Vec.sub(p, [bound.x, bound.y]));
         });
+        // Captured before the assignment below rebuilds it: the end labels are
+        // re-anchored by how far THEIR endpoint travelled, which is only knowable
+        // against the path this call replaces.
+        const previousPath = connector.absolutePath;
         connector.updatingPath = true;
         // the property assignment order matters
         connector.xywh = bound.serialize();
@@ -1015,6 +1059,23 @@ export class ConnectorPathGenerator extends PathGenerator {
                 model.labelXYWH = [cx - w / 2, cy - h / 2, w, h];
             }
         }
+        // The end labels follow THEIR OWN endpoint, not the connector's centre.
+        // Dragging one of the two nodes moves one end and leaves the other where
+        // it was: re-deriving both boxes from the offset distance (what the centre
+        // label does) would recentre them, and translating both by the element's
+        // delta would slide the far one off its line. Translating each by its
+        // endpoint's delta is the only rule under which a `0..*` typed beside an
+        // end stays beside that end — and the only one that preserves a box the
+        // author dragged somewhere else. Same persistence gate as above: these are
+        // `@field()`s too, so a watching peer must not write them.
+        if (connector instanceof ConnectorElementModel) {
+            const mayPersist = (options?.persistLabelXYWH ?? true) &&
+                !connector.surface?.store?.readonly;
+            if (mayPersist) {
+                followEndpoint(connector, 'source', previousPath);
+                followEndpoint(connector, 'target', previousPath);
+            }
+        }
         connector.updatingPath = false;
     }
     _computeStartEndPoint(connector) {

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

@@ -41,11 +41,20 @@ import { type TypedEdge } from './typed-edge.js';
  * a `@local()` field. The reveal is session state and leaves with the pointer.
  */
 /**
- * The one colour the reveal is drawn in — the house primary, i.e. the colour of
+ * The one colour the reveal is drawn in — the chrome accent, i.e. the colour of
  * an affordance rather than of ink. Deliberately NOT the framework's palette:
  * the label is the tool talking about the drawing, not part of the drawing.
+ *
+ * A TOKEN, not a hex: the chip is rendered in the DOM (`direction-widget.ts`),
+ * so it follows whatever the host sets `--affine-primary-color` to. The accent
+ * is AFFiNE's and due to be replaced — DESIGN.md, The Borrowed Blue Rule.
+ *
+ * It is the colour of EVERY typed edge of every framework: no role declares a
+ * `chipColor` any more (PO recette of 23/09/2026, after one that did produced
+ * two blues on one map). `affine/all/src/__tests__/direction-chip-accent.unit.spec.ts`
+ * reads the mounted vocabularies and keeps it that way.
  */
-export declare const EDGE_DIRECTION_COLOR = "#1e96eb";
+export declare const EDGE_DIRECTION_COLOR = "var(--affine-primary-color)";
 /**
  * Where the label sits on a typed edge, and how it is turned.
  *

package/dist/_pkgs/affine-gfx-connector/direction/direction-reveal.js

@@ -40,11 +40,20 @@ import { asTypedEdge, edgeIsBound, roleVocabularies, } from './typed-edge.js';
  * a `@local()` field. The reveal is session state and leaves with the pointer.
  */
 /**
- * The one colour the reveal is drawn in — the house primary, i.e. the colour of
+ * The one colour the reveal is drawn in — the chrome accent, i.e. the colour of
  * an affordance rather than of ink. Deliberately NOT the framework's palette:
  * the label is the tool talking about the drawing, not part of the drawing.
+ *
+ * A TOKEN, not a hex: the chip is rendered in the DOM (`direction-widget.ts`),
+ * so it follows whatever the host sets `--affine-primary-color` to. The accent
+ * is AFFiNE's and due to be replaced — DESIGN.md, The Borrowed Blue Rule.
+ *
+ * It is the colour of EVERY typed edge of every framework: no role declares a
+ * `chipColor` any more (PO recette of 23/09/2026, after one that did produced
+ * two blues on one map). `affine/all/src/__tests__/direction-chip-accent.unit.spec.ts`
+ * reads the mounted vocabularies and keeps it that way.
  */
-export const EDGE_DIRECTION_COLOR = '#1e96eb';
+export const EDGE_DIRECTION_COLOR = 'var(--affine-primary-color)';
 const pathOf = (model) => {
     const path = model.absolutePath;
     return Array.isArray(path) && path.length >= 2 ? path : null;

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

@@ -1,5 +1,11 @@
 import type { DomRenderer } from '../../../affine-block-surface/index.js';
-import { type ConnectorElementModel } from '../../../affine-model/index.js';
+import { type ConnectorElementModel, type PointStyle } from '../../../affine-model/index.js';
+/**
+ * Exported for `src/__tests__/endpoint-style.unit.spec.ts`: the hollow heads are
+ * defined by the fact that `fill` and `stroke` differ, which is only observable
+ * on the marker node this builds.
+ */
+export declare function createArrowMarker(id: string, style: PointStyle, color: string, strokeWidth: number, isStart?: boolean): SVGMarkerElement;
 /**
  * Renders a ConnectorElementModel to a given HTMLElement using DOM/SVG.
  * This function is intended to be registered via the DomElementRendererExtension.

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

@@ -1,8 +1,26 @@
 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';
+import { DEFAULT_ARROW_SIZE, HOLLOW_HEAD_FILL } from '../utils.js';
 const SVG_NS = 'http://www.w3.org/2000/svg';
+/**
+ * The outline width of a hollow head, in the marker's own `viewBox` units.
+ *
+ * Pinned rather than inherited. A marker declares `markerUnits="strokeWidth"`
+ * and a `0 0 20 20` viewBox mapped onto `markerWidth`, so one viewBox unit is
+ * already a fixed fraction of the connector's `strokeWidth` — the outline
+ * scales with the line without this attribute existing, and `1` is exactly the
+ * SVG default the solid heads get implicitly today. Nothing changes visually.
+ *
+ * It is set only on the hollow heads because they are the only ones where the
+ * value is observable: a solid head paints `fill` and `stroke` in the same
+ * colour, so its outline is invisible either way. On a hollow head the outline
+ * IS the head. Leaving it to a default that a future `stroke-width` on the
+ * `<svg>`, the `<defs>`, or the marker itself would override means the UML
+ * heads could silently thicken or vanish; the solid twins would not notice.
+ */
+const HOLLOW_HEAD_STROKE_WIDTH = 1;
+const LABEL_SLOTS = ['center', 'source', 'target'];
 /**
  * The nodes a connector host already owns, kept across renders. Rebuilding the
  * whole `<svg>` subtree on every frame allocated one element per connector per
@@ -46,7 +64,12 @@ function createConnectorPath(points, mode) {
     }
     return pathBuilder.build();
 }
-function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
+/**
+ * Exported for `src/__tests__/endpoint-style.unit.spec.ts`: the hollow heads are
+ * defined by the fact that `fill` and `stroke` differ, which is only observable
+ * on the marker node this builds.
+ */
+export function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
     const marker = document.createElementNS(SVG_NS, 'marker');
     const size = DEFAULT_ARROW_SIZE * (strokeWidth / 2);
     marker.id = id;
@@ -57,6 +80,8 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
     marker.setAttribute('markerHeight', String(size));
     marker.setAttribute('orient', 'auto');
     marker.setAttribute('markerUnits', 'strokeWidth');
+    // No `default`, as on the canvas side: an unknown persisted `PointStyle`
+    // yields an empty marker rather than a wrong head.
     switch (style) {
         case 'Arrow': {
             const path = document.createElementNS(SVG_NS, 'path');
@@ -74,6 +99,15 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
             marker.append(path);
             break;
         }
+        case 'TriangleHollow': {
+            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', HOLLOW_HEAD_FILL);
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', String(HOLLOW_HEAD_STROKE_WIDTH));
+            marker.append(path);
+            break;
+        }
         case 'Circle': {
             const circle = document.createElementNS(SVG_NS, 'circle');
             circle.setAttribute('cx', '10');
@@ -92,6 +126,15 @@ function createArrowMarker(id, style, color, strokeWidth, isStart = false) {
             marker.append(path);
             break;
         }
+        case 'DiamondHollow': {
+            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', HOLLOW_HEAD_FILL);
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', String(HOLLOW_HEAD_STROKE_WIDTH));
+            marker.append(path);
+            break;
+        }
     }
     return marker;
 }
@@ -119,29 +162,53 @@ function getRetainedConnectorDom(element) {
         svg,
         defs,
         path,
-        label: null,
+        labels: {},
     };
     retainedConnectorDom.set(element, retained);
     return retained;
 }
-function getOrCreateLabelElement(retained) {
-    if (retained.label) {
-        return retained.label;
+function getOrCreateLabelElement(retained, slot) {
+    const existing = retained.labels[slot];
+    if (existing) {
+        return existing;
     }
     const label = document.createElement('div');
-    retained.svg.insertAdjacentElement('afterend', label);
-    retained.label = label;
+    // Appended after the `<svg>` rather than inserted directly behind it, so the
+    // three captions land in slot order instead of in reverse creation order.
+    // Every one of them is absolutely positioned, so document order is a
+    // debugging convenience, not a layout decision.
+    (retained.svg.parentElement ?? retained.svg).append(label);
+    retained.labels[slot] = label;
     return label;
 }
-function renderConnectorLabel(model, retained, renderer, zoom) {
-    if (!isConnectorWithLabel(model) || !model.labelXYWH) {
-        retained.label?.remove();
-        retained.label = null;
+/**
+ * The text and box one slot paints, or `null` when that caption is absent.
+ *
+ * The DOM twin of `paintedLabels` on the canvas side: same three slots, same
+ * `labelStyle` shared by all three, so the two renderers cannot disagree about
+ * what a connector is showing.
+ */
+function labelContent(model, slot) {
+    if (slot === 'center') {
+        return isConnectorWithLabel(model) && model.labelXYWH
+            ? { text: model.text?.toString() ?? '', xywh: model.labelXYWH }
+            : null;
+    }
+    const xywh = model.endLabelXYWH(slot);
+    return model.hasEndLabel(slot) && xywh
+        ? { text: model.endLabelText(slot)?.toString() ?? '', xywh }
+        : null;
+}
+function renderConnectorLabel(model, retained, renderer, zoom, slot) {
+    const content = labelContent(model, slot);
+    if (!content) {
+        retained.labels[slot]?.remove();
+        delete retained.labels[slot];
         return;
     }
-    const [lx, ly, lw, lh] = model.labelXYWH;
+    const [lx, ly, lw, lh] = content.xywh;
     const { labelStyle: { color, fontSize, fontWeight, fontStyle, fontFamily, textAlign, }, } = model;
-    const labelElement = getOrCreateLabelElement(retained);
+    const labelElement = getOrCreateLabelElement(retained, slot);
     labelElement.style.position = 'absolute';
     labelElement.style.left = `${lx * zoom}px`;
     labelElement.style.top = `${ly * zoom}px`;
@@ -168,7 +235,7 @@ function renderConnectorLabel(model, retained, renderer, zoom) {
     labelElement.style.whiteSpace = 'pre-wrap';
     labelElement.style.wordWrap = 'break-word';
     // Add text content
-    labelElement.textContent = model.text ? model.text.toString() : '';
+    labelElement.textContent = content.text;
 }
 /**
  * Renders a ConnectorElementModel to a given HTMLElement using DOM/SVG.
@@ -264,6 +331,9 @@ export const connectorDomRenderer = (model, element, renderer) => {
     element.style.height = `${model.h * zoom}px`;
     element.style.overflow = 'visible';
     element.style.pointerEvents = 'none';
-    // Render label if present
-    renderConnectorLabel(model, retained, renderer, zoom);
+    // Render each caption that is present — the centre name and the two end
+    // labels — and drop the node of any that is not.
+    for (const slot of LABEL_SLOTS) {
+        renderConnectorLabel(model, retained, renderer, zoom, slot);
+    }
 };