@formicoidea/labre-core 0.40.0 → 0.42.0

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

@@ -1,4 +1,13 @@
-import type { ConnectorElementModel } from '../../affine-model/index.js';
-import type { IVec } from '../../global/gfx/index.js';
-import type { BlockComponent } from '../../std/index.js';
-export declare function mountConnectorLabelEditor(connector: ConnectorElementModel, edgeless: BlockComponent, point?: IVec): void;
+/**
+ * The barrel's door onto the label editor.
+ *
+ * It used to carry a SECOND copy of `mountConnectorLabelEditor`, byte-alike
+ * with the one in `edgeless-connector-label-editor.ts` — and since this file is
+ * what `text/index.ts` re-exports, the toolbar and the keyboard reached this
+ * copy while the connector view's double-click imported the other one directly.
+ * Two bodies, one behaviour, and no way to add the per-end selector
+ * (`docs/adr/0018` phase 2) to both at once without adding it twice.
+ *
+ * One body now lives next door; this file only forwards it.
+ */
+export * from './edgeless-connector-label-editor.js';

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

@@ -1,44 +1,13 @@
-import { DefaultTool, EdgelessCRUDIdentifier, } from '../../affine-block-surface/index.js';
-import { BlockSuiteError, ErrorCode } from '../../global/exceptions/index.js';
-import { Bound } from '../../global/gfx/index.js';
-import { GfxControllerIdentifier } from '../../std/gfx/index.js';
-import * as Y from 'yjs';
-import { EdgelessConnectorLabelEditor } from './edgeless-connector-label-editor.js';
-export function mountConnectorLabelEditor(connector, edgeless, point) {
-    const mountElm = edgeless.querySelector('.edgeless-mount-point');
-    if (!mountElm) {
-        throw new BlockSuiteError(ErrorCode.ValueNotExists, "edgeless block's mount point does not exist");
-    }
-    const gfx = edgeless.std.get(GfxControllerIdentifier);
-    gfx.tool.setTool(DefaultTool);
-    gfx.selection.set({
-        elements: [connector.id],
-        editing: true,
-    });
-    if (!connector.text) {
-        const text = new Y.Text();
-        const labelOffset = connector.labelOffset;
-        let labelXYWH = connector.labelXYWH ?? [0, 0, 16, 16];
-        if (point) {
-            const center = connector.getNearestPoint(point);
-            const distance = connector.getOffsetDistanceByPoint(center);
-            const bounds = Bound.fromXYWH(labelXYWH);
-            bounds.center = center;
-            labelOffset.distance = distance;
-            labelXYWH = bounds.toXYWH();
-        }
-        edgeless.std.get(EdgelessCRUDIdentifier).updateElement(connector.id, {
-            text,
-            labelXYWH,
-            labelOffset: { ...labelOffset },
-        });
-    }
-    const editor = new EdgelessConnectorLabelEditor();
-    editor.connector = connector;
-    mountElm.append(editor);
-    editor.updateComplete
-        .then(() => {
-        editor.inlineEditor?.focusEnd();
-    })
-        .catch(console.error);
-}
+/**
+ * The barrel's door onto the label editor.
+ *
+ * It used to carry a SECOND copy of `mountConnectorLabelEditor`, byte-alike
+ * with the one in `edgeless-connector-label-editor.ts` — and since this file is
+ * what `text/index.ts` re-exports, the toolbar and the keyboard reached this
+ * copy while the connector view's double-click imported the other one directly.
+ * Two bodies, one behaviour, and no way to add the per-end selector
+ * (`docs/adr/0018` phase 2) to both at once without adding it twice.
+ *
+ * One body now lives next door; this file only forwards it.
+ */
+export * from './edgeless-connector-label-editor.js';

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

@@ -1,4 +1,60 @@
+import { PointStyle } from '../../affine-model/index.js';
 import { type ToolbarContext, type ToolbarGenericAction } from '../../affine-shared/services/index.js';
+/**
+ * Every `PointStyle` must appear in BOTH lists.
+ *
+ * `renderMenu` paints the menu's trigger with
+ * `renderCurrentMenuItemWith(items, currentValue, 'icon')`, which returns
+ * `undefined` for a value the list does not carry — an unlisted style gives a
+ * blank button, so a connector created by a framework (or imported) with that
+ * head shows an empty endpoint control. There is no test that can catch a
+ * forgotten entry at the type level; `endpoint-style.unit.spec.ts` asserts the
+ * coverage instead.
+ */
+export declare const FRONT_ENDPOINT_STYLE_LIST: [{
+    readonly value: PointStyle.None;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Arrow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Triangle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.TriangleHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Circle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Diamond;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.DiamondHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}];
+export declare const REAR_ENDPOINT_STYLE_LIST: [{
+    readonly value: PointStyle.Diamond;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.DiamondHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Circle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Triangle;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.TriangleHollow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.Arrow;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}, {
+    readonly value: PointStyle.None;
+    readonly icon: import("lit-html").TemplateResult<1>;
+}];
 export declare const connectorToolbarConfig: {
     readonly actions: [{
         readonly id: "a.stroke-color";
@@ -16,6 +72,7 @@ export declare const connectorToolbarConfig: {
             readonly id: "b.flip-direction";
             readonly icon: import("lit-html").TemplateResult<1>;
             readonly tooltip: "Flip direction";
+            readonly tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
             /**
              * Hidden for a TYPED EDGE (`docs/adr/0010` M3).
              *
@@ -56,7 +113,8 @@ export declare const connectorToolbarConfig: {
              */
             readonly id: "b.invert-direction";
             readonly icon: import("lit-html").TemplateResult<1>;
-            readonly tooltip: "Reverse direction";
+            readonly tooltip: string | undefined;
+            readonly tooltipWording: readonly [string, string];
             /**
              * 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
@@ -77,6 +135,7 @@ export declare const connectorToolbarConfig: {
     }, {
         readonly id: "g.text";
         readonly tooltip: "Add text";
+        readonly tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
         readonly icon: import("lit-html").TemplateResult<1>;
         readonly when: (ctx: ToolbarContext) => boolean;
         readonly run: (ctx: ToolbarContext) => void;

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

@@ -1,8 +1,8 @@
 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 { createTextActions, normalizeTextBound } from '../../affine-gfx-text/index.js';
 import { ConnectorElementModel, ConnectorMode, DEFAULT_FRONT_ENDPOINT_STYLE, DEFAULT_REAR_ENDPOINT_STYLE, DefaultTheme, LineWidth, PointStyle, resolveColor, StrokeStyle, } from '../../affine-model/index.js';
-import { ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
+import { CONNECTOR_SOURCE_LABEL, CONNECTOR_TARGET_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonResolvedValue, getMostCommonValue, } from '../../affine-shared/utils/index.js';
 import { getRootBlock, LINE_STYLE_LIST, renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { Bound } from '../../global/gfx/index.js';
@@ -11,10 +11,23 @@ import { BlockFlavourIdentifier, getRegisteredCommands, runCommand, } from '../.
 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 { INVERT_EDGE_DIRECTION, invertEdgeDirection, } 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 = [
+import { EndPointDiamondHollowIcon, EndPointTriangleHollowIcon, StartPointDiamondHollowIcon, StartPointTriangleHollowIcon, } from './hollow-endpoint-icons.js';
+import { CONNECTOR_ADD_TEXT, CONNECTOR_LABEL_END_POINT_STYLE, CONNECTOR_LABEL_SHAPE, CONNECTOR_LABEL_START_POINT_STYLE, CONNECTOR_LABEL_STROKE_STYLE, CONNECTOR_LABEL_STYLE, CONNECTOR_MODE_WORDING, CONNECTOR_TOOLTIP_CONNECTOR_SHAPE, CONNECTOR_TOOLTIP_FLIP_DIRECTION, } from '../translations.js';
+/**
+ * Every `PointStyle` must appear in BOTH lists.
+ *
+ * `renderMenu` paints the menu's trigger with
+ * `renderCurrentMenuItemWith(items, currentValue, 'icon')`, which returns
+ * `undefined` for a value the list does not carry — an unlisted style gives a
+ * blank button, so a connector created by a framework (or imported) with that
+ * head shows an empty endpoint control. There is no test that can catch a
+ * forgotten entry at the type level; `endpoint-style.unit.spec.ts` asserts the
+ * coverage instead.
+ */
+export const FRONT_ENDPOINT_STYLE_LIST = [
     {
         value: PointStyle.None,
         icon: StartPointIcon(),
@@ -27,6 +40,10 @@ const FRONT_ENDPOINT_STYLE_LIST = [
         value: PointStyle.Triangle,
         icon: StartPointTriangleIcon(),
     },
+    {
+        value: PointStyle.TriangleHollow,
+        icon: StartPointTriangleHollowIcon(),
+    },
     {
         value: PointStyle.Circle,
         icon: StartPointCircleIcon(),
@@ -35,12 +52,20 @@ const FRONT_ENDPOINT_STYLE_LIST = [
         value: PointStyle.Diamond,
         icon: StartPointDiamondIcon(),
     },
+    {
+        value: PointStyle.DiamondHollow,
+        icon: StartPointDiamondHollowIcon(),
+    },
 ];
-const REAR_ENDPOINT_STYLE_LIST = [
+export const REAR_ENDPOINT_STYLE_LIST = [
     {
         value: PointStyle.Diamond,
         icon: EndPointDiamondIcon(),
     },
+    {
+        value: PointStyle.DiamondHollow,
+        icon: EndPointDiamondHollowIcon(),
+    },
     {
         value: PointStyle.Circle,
         icon: EndPointCircleIcon(),
@@ -49,6 +74,10 @@ const REAR_ENDPOINT_STYLE_LIST = [
         value: PointStyle.Triangle,
         icon: EndPointTriangleIcon(),
     },
+    {
+        value: PointStyle.TriangleHollow,
+        icon: EndPointTriangleHollowIcon(),
+    },
     {
         value: PointStyle.Arrow,
         icon: EndPointArrowIcon(),
@@ -126,16 +155,22 @@ export const connectorToolbarConfig = {
                     }
                     updateModelsWith(ctx, models, 'strokeStyle', value);
                 };
+                // A link belongs to what it links: the carousel opens on the framework
+                // of its endpoints, else of the board it crosses (`docs/adr/0027`).
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
                 return html `
           <edgeless-color-picker-button
             class="stroke-color"
-            .label="${'Stroke style'}"
+            .label="${translateKey(ctx.std, ...CONNECTOR_LABEL_STROKE_STYLE)}"
             .pick=${onPickColor}
             .color=${stroke}
             .theme=${theme}
             .hollowCircle=${true}
             .originalColor=${firstModel.stroke}
             .enableCustomColor=${enableCustomColor}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
+            .std=${ctx.std}
           >
             <edgeless-line-styles-panel
               slot="other"
@@ -169,7 +204,7 @@ export const connectorToolbarConfig = {
                     updateModelsWith(ctx, models, field, value);
                 };
                 return renderMenu({
-                    label: 'Style',
+                    label: translateKey(ctx.std, ...CONNECTOR_LABEL_STYLE),
                     items: LINE_STYLE_LIST,
                     currentValue: rough,
                     onPick,
@@ -191,7 +226,7 @@ export const connectorToolbarConfig = {
                             updateModelsWith(ctx, models, field, value);
                         };
                         return renderMenu({
-                            label: 'Start point style',
+                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_START_POINT_STYLE),
                             items: FRONT_ENDPOINT_STYLE_LIST,
                             currentValue: pointStyle,
                             onPick,
@@ -202,6 +237,7 @@ export const connectorToolbarConfig = {
                     id: 'b.flip-direction',
                     icon: FlipDirectionIcon(),
                     tooltip: 'Flip direction',
+                    tooltipWording: CONNECTOR_TOOLTIP_FLIP_DIRECTION,
                     /**
                      * Hidden for a TYPED EDGE (`docs/adr/0010` M3).
                      *
@@ -257,7 +293,7 @@ export const connectorToolbarConfig = {
                             updateModelsWith(ctx, models, field, value);
                         };
                         return renderMenu({
-                            label: 'End point style',
+                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_END_POINT_STYLE),
                             items: REAR_ENDPOINT_STYLE_LIST,
                             currentValue: pointStyle,
                             onPick,
@@ -277,7 +313,13 @@ export const connectorToolbarConfig = {
                      */
                     id: 'b.invert-direction',
                     icon: FlipDirectionIcon(),
-                    tooltip: 'Reverse direction',
+                    tooltip: invertEdgeDirection.labelFallback,
+                    // Reuses the registered command's own key/fallback — no restated
+                    // literal (see `direction/invert-direction.ts`).
+                    tooltipWording: [
+                        invertEdgeDirection.labelKey,
+                        invertEdgeDirection.labelFallback,
+                    ],
                     /**
                      * 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
@@ -314,10 +356,14 @@ export const connectorToolbarConfig = {
                         const onPick = (value) => {
                             updateModelsWith(ctx, models, field, value);
                         };
+                        const items = CONNECTOR_MODE_LIST.map(item => ({
+                            ...item,
+                            key: translateKey(ctx.std, ...CONNECTOR_MODE_WORDING[item.value]),
+                        }));
                         return renderMenu({
-                            label: 'Shape',
-                            tooltip: 'Connector shape',
-                            items: CONNECTOR_MODE_LIST,
+                            label: translateKey(ctx.std, ...CONNECTOR_LABEL_SHAPE),
+                            tooltip: translateKey(ctx.std, ...CONNECTOR_TOOLTIP_CONNECTOR_SHAPE),
+                            items,
                             currentValue: mode,
                             onPick,
                         });
@@ -328,6 +374,7 @@ export const connectorToolbarConfig = {
         {
             id: 'g.text',
             tooltip: 'Add text',
+            tooltipWording: CONNECTOR_ADD_TEXT,
             icon: AddTextIcon(),
             when(ctx) {
                 const models = ctx.getSurfaceModelsByType(ConnectorElementModel);
@@ -346,6 +393,41 @@ export const connectorToolbarConfig = {
                 mountConnectorLabelEditor(model, rootBlock);
             },
         },
+        /**
+         * The two END labels (`docs/adr/0018` phase 2).
+         *
+         * After the caption and its style controls, because that is the order the
+         * notation itself has: an association is named in the middle and adorned at
+         * its ends. Each entry appears only while its own end is bare — an end
+         * label that exists is edited by double-clicking it, exactly as the caption
+         * is, and `g.text` has always hidden itself on the same rule.
+         *
+         * Wordings, not literals: the row is a host's UI, and a hard-coded "Source
+         * label" is the one word a translated editor cannot translate (#183).
+         */
+        ...['source', 'target'].map(end => ({
+            id: end === 'source' ? 'h.source-label' : 'h.target-label',
+            tooltipWording: end === 'source' ? CONNECTOR_SOURCE_LABEL : CONNECTOR_TARGET_LABEL,
+            labelWording: end === 'source' ? CONNECTOR_SOURCE_LABEL : CONNECTOR_TARGET_LABEL,
+            icon: AddTextIcon(),
+            when(ctx) {
+                const models = ctx.getSurfaceModelsByType(ConnectorElementModel);
+                if (models.length !== 1)
+                    return false;
+                return end === 'source'
+                    ? !models[0].sourceLabel
+                    : !models[0].targetLabel;
+            },
+            run(ctx) {
+                const model = ctx.getCurrentModelByType(ConnectorElementModel);
+                if (!model)
+                    return;
+                const rootBlock = getRootBlock(ctx);
+                if (!rootBlock)
+                    return;
+                mountConnectorLabelEditor(model, rootBlock, undefined, { which: end });
+            },
+        })),
         // id: `g.text`
         ...createTextActions(ConnectorElementModel, 'connector', (ctx, model, props) => {
             if (!isConnectorWithLabel(model))

package/dist/_pkgs/affine-gfx-connector/toolbar/connector-dense-menu.js

@@ -1,8 +1,9 @@
 import { menu } from '../../affine-components/context-menu/index.js';
 import { ConnectorMode } from '../../affine-model/index.js';
-import { EditPropsStore } from '../../affine-shared/services/index.js';
+import { EditPropsStore, translateKey } from '../../affine-shared/services/index.js';
 import { ConnectorCIcon, ConnectorEIcon, ConnectorLIcon, } from '@blocksuite/icons/lit';
 import { ConnectorTool } from '../connector-tool.js';
+import { CONNECTOR_LABEL_CONNECTOR, CONNECTOR_MODE_WORDING, } from '../translations.js';
 export const buildConnectorDenseMenu = (edgeless, gfx) => {
     const prevMode = edgeless.std.get(EditPropsStore).lastProps$.value.connector.mode;
     const isSelected = gfx.tool.currentToolName$.peek() === 'connector';
@@ -14,27 +15,28 @@ export const buildConnectorDenseMenu = (edgeless, gfx) => {
             edgeless.std.get(EditPropsStore).recordLastProps('connector', { mode });
     };
     const iconSize = { width: '20', height: '20' };
+    const std = edgeless.std;
     return menu.subMenu({
-        name: 'Connector',
+        name: translateKey(std, ...CONNECTOR_LABEL_CONNECTOR),
         prefix: ConnectorCIcon(iconSize),
         select: createSelect(prevMode, false),
         isSelected,
         options: {
             items: [
                 menu.action({
-                    name: 'Curve',
+                    name: translateKey(std, ...CONNECTOR_MODE_WORDING[ConnectorMode.Curve]),
                     prefix: ConnectorCIcon(iconSize),
                     select: createSelect(ConnectorMode.Curve),
                     isSelected: isSelected && prevMode === ConnectorMode.Curve,
                 }),
                 menu.action({
-                    name: 'Elbowed',
+                    name: translateKey(std, ...CONNECTOR_MODE_WORDING[ConnectorMode.Orthogonal]),
                     prefix: ConnectorEIcon(iconSize),
                     select: createSelect(ConnectorMode.Orthogonal),
                     isSelected: isSelected && prevMode === ConnectorMode.Orthogonal,
                 }),
                 menu.action({
-                    name: 'Straight',
+                    name: translateKey(std, ...CONNECTOR_MODE_WORDING[ConnectorMode.Straight]),
                     prefix: ConnectorLIcon(iconSize),
                     select: createSelect(ConnectorMode.Straight),
                     isSelected: isSelected && prevMode === ConnectorMode.Straight,

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

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { ConnectorMode, DefaultTheme, } from '../../affine-model/index.js';
-import { EditPropsStore, FeatureFlagService, ThemeProvider, } from '../../affine-shared/services/index.js';
+import { EditPropsStore, FeatureFlagService, ThemeProvider, translateKey, } from '../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../global/lit/index.js';
 import { ConnectorCIcon, ConnectorEIcon, ConnectorLIcon, } from '@blocksuite/icons/lit';
@@ -41,7 +41,8 @@ import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ConnectorTool } from '../connector-tool.js';
-function ConnectorModeButtonGroup(mode, setConnectorMode) {
+import { CONNECTOR_MODE_WORDING } from '../translations.js';
+function ConnectorModeButtonGroup(std, mode, setConnectorMode) {
     /**
      * There is little hacky on rendering tooltip.
      * We don't want either tooltip overlap the top button or tooltip on left.
@@ -52,7 +53,7 @@ function ConnectorModeButtonGroup(mode, setConnectorMode) {
       <edgeless-tool-icon-button
         .active=${mode === ConnectorMode.Curve}
         .activeMode=${'background'}
-        .tooltip=${'Curve'}
+        .tooltip=${translateKey(std, ...CONNECTOR_MODE_WORDING[ConnectorMode.Curve])}
         .iconSize=${'20px'}
         @click=${() => setConnectorMode({ mode: ConnectorMode.Curve })}
       >
@@ -61,7 +62,7 @@ function ConnectorModeButtonGroup(mode, setConnectorMode) {
       <edgeless-tool-icon-button
         .active=${mode === ConnectorMode.Orthogonal}
         .activeMode=${'background'}
-        .tooltip=${'Elbowed'}
+        .tooltip=${translateKey(std, ...CONNECTOR_MODE_WORDING[ConnectorMode.Orthogonal])}
         .iconSize=${'20px'}
         @click=${() => setConnectorMode({ mode: ConnectorMode.Orthogonal })}
       >
@@ -70,7 +71,7 @@ function ConnectorModeButtonGroup(mode, setConnectorMode) {
       <edgeless-tool-icon-button
         .active=${mode === ConnectorMode.Straight}
         .activeMode=${'background'}
-        .tooltip=${'Straight'}
+        .tooltip=${translateKey(std, ...CONNECTOR_MODE_WORDING[ConnectorMode.Straight])}
         .iconSize=${'20px'}
         @click=${() => setConnectorMode({ mode: ConnectorMode.Straight })}
       >
@@ -126,7 +127,7 @@ let EdgelessConnectorMenu = (() => {
   `; }
         render() {
             const { stroke, strokeWidth, mode } = this._props$.value;
-            const connectorModeButtonGroup = ConnectorModeButtonGroup(mode, this.onChange);
+            const connectorModeButtonGroup = ConnectorModeButtonGroup(this.edgeless.std, mode, this.onChange);
             return html `
       <edgeless-slide-menu>
         <div class="connector-submenu-content">
@@ -146,6 +147,7 @@ let EdgelessConnectorMenu = (() => {
             .hasTransparent=${!this.edgeless.store
                 .get(FeatureFlagService)
                 .getFlag('enable_color_picker')}
+            .std=${this.edgeless.std}
             @select=${(e) => this.onChange({ stroke: e.detail.value })}
           ></edgeless-color-panel>
         </div>

package/dist/_pkgs/affine-gfx-connector/toolbar/connector-tool-button.js

@@ -1,11 +1,12 @@
-import { ConnectorMode, getConnectorModeName } from '../../affine-model/index.js';
-import { EditPropsStore } from '../../affine-shared/services/index.js';
+import { ConnectorMode } from '../../affine-model/index.js';
+import { EditPropsStore, translateKey } from '../../affine-shared/services/index.js';
 import { QuickToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../global/lit/index.js';
 import { ConnectorCIcon, ConnectorEIcon, ConnectorLIcon, } from '@blocksuite/icons/lit';
 import { computed } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { ConnectorTool } from '../connector-tool.js';
+import { CONNECTOR_MODE_WORDING } from '../translations.js';
 const IcomMap = {
     [ConnectorMode.Straight]: ConnectorLIcon(),
     [ConnectorMode.Orthogonal]: ConnectorEIcon(),
@@ -46,7 +47,7 @@ export class EdgelessConnectorToolButton extends QuickToolMixin(SignalWatcher(Li
         .tooltip=${this.popper
             ? ''
             : html `<affine-tooltip-content-with-shortcut
-              data-tip="${getConnectorModeName(mode)}"
+              data-tip="${translateKey(this.edgeless.std, ...CONNECTOR_MODE_WORDING[mode])}"
               data-shortcut="${'C'}"
             ></affine-tooltip-content-with-shortcut>`}
         .tooltipOffset=${17}

package/dist/_pkgs/affine-gfx-connector/toolbar/hollow-endpoint-icons.d.ts

@@ -0,0 +1,8 @@
+/** Front (start) hollow diamond — the head sits at the left end of the stub. */
+export declare const StartPointDiamondHollowIcon: () => import("lit-html").TemplateResult<1>;
+/** Rear (end) hollow diamond — the head sits at the right end of the stub. */
+export declare const EndPointDiamondHollowIcon: () => import("lit-html").TemplateResult<1>;
+/** Front (start) hollow closed triangle. */
+export declare const StartPointTriangleHollowIcon: () => import("lit-html").TemplateResult<1>;
+/** Rear (end) hollow closed triangle. */
+export declare const EndPointTriangleHollowIcon: () => import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-gfx-connector/toolbar/hollow-endpoint-icons.js

@@ -0,0 +1,118 @@
+import { html } from 'lit';
+/**
+ * The four toolbar icons for the hollow UML endpoint heads.
+ *
+ * Hand-authored because `@blocksuite/icons` has no hollow variant of its
+ * `StartPoint*` / `EndPoint*` set. They mirror that set deliberately: the same
+ * `0 0 24 24` viewBox and the same `1em` box, so a hollow entry lines up
+ * pixel-for-pixel with the filled neighbour it sits next to in the endpoint
+ * menus. The difference is only the paint — the shipped icons merge stub and
+ * head into one `fill='currentColor'` path, these draw the stub as a stroked
+ * line and leave the head `fill="none"` so the reader sees the hollow head the
+ * canvas will actually draw.
+ *
+ * Each is a function returning a `TemplateResult`, matching how the
+ * `@blocksuite/icons` lit icons are called at the use site
+ * (`StartPointDiamondIcon()`).
+ */
+const ICON_STYLE = 'user-select:none;flex-shrink:0;';
+/** Front (start) hollow diamond — the head sits at the left end of the stub. */
+export const StartPointDiamondHollowIcon = () => html `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    fill="none"
+    style=${ICON_STYLE}
+  >
+    <path
+      d="M21 12H11"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M11 12L7 8L3 12L7 16Z"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+/** Rear (end) hollow diamond — the head sits at the right end of the stub. */
+export const EndPointDiamondHollowIcon = () => html `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    fill="none"
+    style=${ICON_STYLE}
+  >
+    <path
+      d="M3 12H13"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M13 12L17 8L21 12L17 16Z"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+/** Front (start) hollow closed triangle. */
+export const StartPointTriangleHollowIcon = () => html `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    fill="none"
+    style=${ICON_STYLE}
+  >
+    <path
+      d="M21 12H10.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M10.5 7.5L3 12L10.5 16.5Z"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+/** Rear (end) hollow closed triangle. */
+export const EndPointTriangleHollowIcon = () => html `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    fill="none"
+    style=${ICON_STYLE}
+  >
+    <path
+      d="M3 12H13.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M13.5 7.5L21 12L13.5 16.5Z"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;