@formicoidea/labre-core 0.32.0 → 0.33.0

package/dist/_pkgs/affine-components/toolbar/index.d.ts

@@ -3,6 +3,7 @@ export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
 export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
+export { type PickerMenu, type PickerMenuItem, renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';
 export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';

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

@@ -8,6 +8,7 @@ export { ToolbarMoreMenuConfigExtension } from './config.js';
 export { EditorIconButton } from './icon-button.js';
 export { EditorMenuAction, EditorMenuButton, EditorMenuContent, } from './menu-button.js';
 export { MenuContext } from './menu-context.js';
+export { renderCurrentPickerItemWith, renderPickerMenu, renderPickerMenuItems, } from './picker-menu.js';
 export { EditorToolbarSeparator } from './separator.js';
 export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';

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

@@ -32,7 +32,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { panelBaseStyle, scrollbarStyle, } from '../../affine-shared/styles/index.js';
+import { panelBaseStyle, scrollbarStyle } from '../../affine-shared/styles/index.js';
 import { createButtonPopper, } from '../../affine-shared/utils/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement, } from 'lit';

package/dist/_pkgs/affine-components/toolbar/picker-menu.d.ts

@@ -0,0 +1,55 @@
+import { type TemplateResult } from 'lit';
+/**
+ * The **one-of-many picker** every toolbar in this editor uses: a chevron
+ * button that opens a row of icons, one of which is lit because it is what the
+ * selection currently is.
+ *
+ * "Switch shape type" is the one everybody knows; the framework morph dropdown
+ * is the same object. It lives HERE, in the shared component package, and not
+ * where it was first written (`@labre/affine-widget-edgeless-toolbar`) for a
+ * dependency reason that is not going away: that widget package depends on
+ * `@labre/affine-block-surface`, so nothing in the surface package — which is
+ * where the generic, framework-parameterized toolbar modules live — can import
+ * from it without closing a cycle. This package is below both, which is why the
+ * toolbar's buttons, its menu shells and its chevron already live here.
+ *
+ * The edgeless-toolbar copy is deliberately untouched by the change that added
+ * this file: it is what the shape toolbar and its neighbours already call, and
+ * collapsing the two is a follow-up whose blast radius is every shape entry in
+ * the editor rather than one new dropdown. Until then the two are the same
+ * markup twice — knowingly, and named here so the follow-up is findable.
+ *
+ * ## Names
+ *
+ * `PickerMenu` / `PickerMenuItem` rather than `Menu` / `MenuItem`: this package
+ * already exports a `MenuItem`, and it is a different thing entirely (a line in
+ * the "⋮" overflow menu, with a label and an action). Two types called
+ * `MenuItem` in one entry point is a trap, not a convenience.
+ */
+/** One option: what it is worth, what it looks like, what it is called. */
+export type PickerMenuItem<T> = {
+    /** Tooltip and accessible name. */
+    key?: string;
+    value: T;
+    icon?: TemplateResult;
+    disabled?: boolean;
+};
+export type PickerMenu<T> = {
+    label: string;
+    icon?: TemplateResult;
+    tooltip?: string;
+    items: PickerMenuItem<T>[];
+    currentValue: T;
+    onPick: (value: T) => void;
+    /**
+     * `data-testid` for the host element and, suffixed with `-option`, for each
+     * line. Optional: the shape toolbar's picker has never needed one, and a
+     * framework module that wants to be reachable from an integration spec says
+     * so rather than making every caller carry an attribute it does not use.
+     */
+    testId?: string;
+};
+/** The field of the item that currently matches — its icon, usually. */
+export declare function renderCurrentPickerItemWith<T, F extends keyof PickerMenuItem<T>>(items: PickerMenuItem<T>[], currentValue: T, field: F): PickerMenuItem<T>[F] | undefined;
+export declare function renderPickerMenu<T>({ label, tooltip, icon, items, currentValue, onPick, testId, }: PickerMenu<T>): TemplateResult<1>;
+export declare function renderPickerMenuItems<T>(items: PickerMenuItem<T>[], currentValue: T, onPick: (value: T) => void, testId?: string): unknown;

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

@@ -0,0 +1,47 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { EditorChevronDown } from './chevron-down.js';
+/** The field of the item that currently matches — its icon, usually. */
+export function renderCurrentPickerItemWith(items, currentValue, field) {
+    return items.find(({ value }) => value === currentValue)?.[field];
+}
+export function renderPickerMenu({ label, tooltip, icon, items, currentValue, onPick, testId, }) {
+    return html `
+    <editor-menu-button
+      data-testid=${ifDefined(testId)}
+      aria-label="${`${label.toLowerCase()}-menu`}"
+      .button=${html `
+        <editor-icon-button
+          data-testid=${ifDefined(testId ? `${testId}-button` : undefined)}
+          aria-label="${label}"
+          .tooltip="${tooltip ?? label}"
+        >
+          ${icon ?? renderCurrentPickerItemWith(items, currentValue, 'icon')}
+          ${EditorChevronDown}
+        </editor-icon-button>
+      `}
+    >
+      ${renderPickerMenuItems(items, currentValue, onPick, testId)}
+    </editor-menu-button>
+  `;
+}
+export function renderPickerMenuItems(items, currentValue, onPick, testId) {
+    // Keyed by `value`: the option list is rebuilt on every selection change, and
+    // an unkeyed repeat would recycle one kind's button into another's rather
+    // than moving it — which is what makes an icon and its tooltip disagree.
+    return repeat(items, item => item.value, ({ key, value, icon, disabled }) => html `
+      <editor-icon-button
+        data-testid=${ifDefined(testId ? `${testId}-option` : undefined)}
+        data-value=${ifDefined(typeof value === 'string' ? value : undefined)}
+        aria-label="${ifDefined(key)}"
+        .disabled=${ifDefined(disabled)}
+        .tooltip="${ifDefined(key)}"
+        .active="${currentValue === value}"
+        .activeMode="${'background'}"
+        @click=${() => onPick(value)}
+      >
+        ${icon}
+      </editor-icon-button>
+    `);
+}

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

@@ -33,12 +33,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EdgelessFrameManager } from '../../affine-block-frame/index.js';
-import { DocModeProvider, EditPropsStore, } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { Bound } from '../../global/gfx/index.js';
 import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement } from '../../std/index.js';
-import { generateKeyBetweenV2, GfxControllerIdentifier, } from '../../std/gfx/index.js';
+import { generateKeyBetweenV2, GfxControllerIdentifier } from '../../std/gfx/index.js';
 import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';

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

@@ -32,9 +32,9 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { PresentTool, } from '../../affine-block-frame/index.js';
+import { PresentTool } from '../../affine-block-frame/index.js';
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
-import { DocModeProvider, EditPropsStore, } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
 import { createButtonPopper } from '../../affine-shared/utils/index.js';
 import { DisposableGroup } from '../../global/disposable/index.js';
 import { WithDisposable } from '../../global/lit/index.js';

package/dist/_pkgs/affine-fragment-frame-panel/header/frames-setting-menu.js

@@ -33,7 +33,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     return useValue ? value : void 0;
 };
 import { EdgelessLegacySlotIdentifier } from '../../affine-block-surface/index.js';
-import { DocModeProvider, EditPropsStore, } from '../../affine-shared/services/index.js';
+import { DocModeProvider, EditPropsStore } from '../../affine-shared/services/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';

package/dist/_pkgs/affine-fragment-outline/mobile-outline-panel.js

@@ -37,7 +37,7 @@ import { DocModeProvider } from '../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../affine-shared/theme/index.js';
 import { matchModels } from '../affine-shared/utils/index.js';
 import { SignalWatcher, WithDisposable } from '../global/lit/index.js';
-import { PropTypes, requiredProperties, } from '../std/index.js';
+import { PropTypes, requiredProperties } from '../std/index.js';
 import { signal } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

package/dist/_pkgs/affine-gfx-brush/toolbar/components/pen/pen-tool-button.js

@@ -1,5 +1,5 @@
 import { keepColor } from '../../../../affine-components/color-picker/index.js';
-import { EditPropsStore, ThemeProvider, } from '../../../../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider } from '../../../../affine-shared/services/index.js';
 import { EdgelessToolbarToolMixin } from '../../../../affine-widget-edgeless-toolbar/index.js';
 import { SignalWatcher } from '../../../../global/lit/index.js';
 import { computed, signal } from '@preact/signals-core';

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

@@ -1,6 +1,6 @@
 import { AStarRunner, Overlay } from '../affine-block-surface/index.js';
 import { ConnectorElementModel, ConnectorMode, DEFAULT_POLYGON_VERTICES, GroupElementModel, ShapeElementModel, ShapeType, } from '../affine-model/index.js';
-import { EditPropsStore, ThemeProvider, } from '../affine-shared/services/index.js';
+import { EditPropsStore, ThemeProvider } from '../affine-shared/services/index.js';
 import { BlockSuiteError } from '../global/exceptions/index.js';
 import { almostEqual, Bound, getBezierCurveBoundingBox, getBezierParameters, getBoundFromPoints, getBoundWithRotation, getPointFromBoundsWithRotation, isOverlap, isVecZero, lineIntersects, PI2, PointLocation, polygonCentroid, sign, toRadian, Vec, } from '../global/gfx/index.js';
 import { assertType } from '../global/utils/index.js';
@@ -212,11 +212,12 @@ export function getAnchors(ele, includeCenterAnchor = true) {
     // getLineIntersections.
     if (ele.centerAnchorOnly) {
         const centerPoint = getPointFromBoundsWithRotation({ ...bound, rotate }, bound.center);
-        return [{ point: new PointLocation(centerPoint), coord: [0.5, 0.5] }];
+        return [
+            { point: new PointLocation(centerPoint), coord: [0.5, 0.5] },
+        ];
     }
     // For polygon shapes, generate anchors at each vertex and edge midpoint
-    if (ele instanceof ShapeElementModel &&
-        ele.shapeType === ShapeType.Polygon) {
+    if (ele instanceof ShapeElementModel && ele.shapeType === ShapeType.Polygon) {
         const verts = ele.vertices ?? DEFAULT_POLYGON_VERTICES;
         for (let i = 0; i < verts.length; i++) {
             const curr = verts[i];
@@ -240,10 +241,7 @@ export function getAnchors(ele, includeCenterAnchor = true) {
                 coord: vertCoord,
             });
             // --- Edge midpoint anchor ---
-            const midCoord = [
-                (curr[0] + next[0]) / 2,
-                (curr[1] + next[1]) / 2,
-            ];
+            const midCoord = [(curr[0] + next[0]) / 2, (curr[1] + next[1]) / 2];
             const midAbs = [
                 bound.x + midCoord[0] * bound.w,
                 bound.y + midCoord[1] * bound.h,
@@ -1241,8 +1239,7 @@ export class ConnectorPathGenerator extends PathGenerator {
     _isPointAtShapeCenter(connectable, point) {
         const bound = Bound.deserialize(connectable.xywh);
         const center = getPointFromBoundsWithRotation({ ...bound, rotate: connectable.rotate }, bound.center);
-        return (almostEqual(point[0], center[0], 1) &&
-            almostEqual(point[1], center[1], 1));
+        return (almostEqual(point[0], center[0], 1) && almostEqual(point[1], center[1], 1));
     }
     _getConnectionPoint(connector, type) {
         const connection = connector[type];

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

@@ -1,4 +1,4 @@
-import { ConnectorMode } from '../affine-model/index.js';
+import { type ConnectorElementProps, ConnectorMode } from '../affine-model/index.js';
 import type { IVec } from '../global/gfx/index.js';
 import type { PointerEventState } from '../std/index.js';
 import { BaseTool, type GfxModel } from '../std/gfx/index.js';
@@ -11,6 +11,24 @@ export type ConnectorToolOptions = {
      * the edge then stays neutral and no `role` key is written.
      */
     role?: string;
+    /**
+     * The FIVE stroke-and-marker props a framework toolbox arms its flow with
+     * (e.g. solid + filled triangle for a BPMN sequence flow) — the ones the
+     * stencils actually distinguish each other by. Applied at creation only,
+     * where explicit props win over the user's last plain-connector props, and
+     * NEVER recorded into `EditPropsStore`: arming a typed flow must not restyle
+     * the plain connector tool (BPMN 2.0 p.40 — other connectors must not adopt
+     * a flow's line style). Left out for the plain tool, which keeps drawing
+     * with the user's own last props.
+     *
+     * Deliberately NOT the whole look: a connector's other styled props —
+     * `rough`, `labelStyle` and the rest — are outside this bag and still come
+     * from the user's last plain-connector props, exactly as they did before
+     * this option existed. No framework declares them today, so nothing is lost;
+     * a framework that needs one must widen this `Pick` rather than reach for
+     * the store.
+     */
+    style?: Partial<Pick<ConnectorElementProps, 'stroke' | 'strokeStyle' | 'strokeWidth' | 'frontEndpointStyle' | 'rearEndpointStyle'>>;
 };
 export declare class ConnectorTool extends BaseTool<ConnectorToolOptions> {
     static toolName: string;

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

@@ -36,6 +36,10 @@ export class ConnectorTool extends BaseTool {
         this.doc.captureSync();
         const id = this.gfx.surface.addElement({
             type: CanvasElementType.CONNECTOR,
+            // The activation's own style, if any: explicit props win over the
+            // user's last plain-connector props in the edit-props middleware, so a
+            // framework look never passes through the shared store.
+            ...this.activatedOption.style,
             mode: this.activatedOption.mode,
             // `undefined` writes nothing: a neutral edge keeps no `role` key.
             role: this.activatedOption.role,
@@ -160,7 +164,9 @@ export class ConnectorTool extends BaseTool {
             }
             // Geometric centroid as a center anchor (gated on the global toggle),
             // mirroring the center anchor offered for other shape types.
-            const centerAnchorEnabled = this.std.getOptional(EditPropsStore)?.getStorage('connectorCenterAnchor') ?? true;
+            const centerAnchorEnabled = this.std
+                .getOptional(EditPropsStore)
+                ?.getStorage('connectorCenterAnchor') ?? true;
             if (centerAnchorEnabled) {
                 locations.push(polygonCentroid(verts));
             }
@@ -171,7 +177,9 @@ export class ConnectorTool extends BaseTool {
             this._sourceLocations = [[0.5, 0.5]];
         }
         else {
-            const centerAnchorEnabled = this.std.getOptional(EditPropsStore)?.getStorage('connectorCenterAnchor') ?? true;
+            const centerAnchorEnabled = this.std
+                .getOptional(EditPropsStore)
+                ?.getStorage('connectorCenterAnchor') ?? true;
             this._sourceLocations =
                 element instanceof ShapeElementModel &&
                     element.shapeType === ShapeType.Triangle

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

@@ -39,10 +39,7 @@ function reanchorConnectorsForPolygon(surface, polygonId, elementGetter) {
                 continue;
             // Convert the stored normalized [0-1] position to absolute model coords.
             const [nx, ny] = connection.position;
-            const absPos = [
-                bound.x + nx * bound.w,
-                bound.y + ny * bound.h,
-            ];
+            const absPos = [bound.x + nx * bound.w, bound.y + ny * bound.h];
             // Find the nearest anchor on the updated polygon boundary.
             let nearestCoord = connection.position;
             let minDist = Infinity;

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

@@ -273,7 +273,8 @@ export class EdgeDirectionManager extends InteractivityExtension {
             }
         }
         const current = this.revealed$.peek();
-        if (ids.length === current.length && ids.every((id, i) => id === current[i])) {
+        if (ids.length === current.length &&
+            ids.every((id, i) => id === current[i])) {
             return;
         }
         this.revealed$.value = ids;

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

@@ -168,9 +168,7 @@ const invertEdgeDirection = {
         std.getOptional(TelemetryProvider)?.track('EdgeDirectionInverted', {
             page: 'whiteboard editor',
             ...(role !== undefined ? { role } : {}),
-            ...(role !== undefined
-                ? { framework: role.split(':')[0] }
-                : {}),
+            ...(role !== undefined ? { framework: role.split(':')[0] } : {}),
             elementCount: edges.length,
             control: invocation.source,
             module: invocation.surface,

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

@@ -1,7 +1,7 @@
 import { ElementRendererExtension, } from '../../affine-block-surface/index.js';
 import { getFontString, getLineHeight, getTextWidth, isRTL, wrapTextDeltas, } from '../../affine-gfx-text/index.js';
 import { ConnectorMode, DefaultTheme, } from '../../affine-model/index.js';
-import { getBezierParameters, } from '../../global/gfx/index.js';
+import { getBezierParameters } from '../../global/gfx/index.js';
 import { deltaInsertsToChunks } from '../../std/inline/index.js';
 import { isConnectorWithLabel } from '../connector-manager.js';
 import { DEFAULT_ARROW_SIZE, getArrowOptions, renderArrow, renderCircle, renderDiamond, renderTriangle, } from './utils.js';

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

@@ -1,5 +1,5 @@
 import { ConnectorMode, } from '../../affine-model/index.js';
-import { getBezierParameters, getBezierTangent, Vec, } from '../../global/gfx/index.js';
+import { getBezierParameters, getBezierTangent, Vec } from '../../global/gfx/index.js';
 export const DEFAULT_ARROW_SIZE = 15;
 export function getArrowPoints(points, size = 10, mode, bezierParameters, endPoint = 'Rear', radians = Math.PI / 4) {
     const anchorPoint = getPointWithTangent(points, mode, endPoint, bezierParameters);

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

@@ -1,6 +1,6 @@
 import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
 import { packColor, } from '../../affine-components/color-picker/index.js';
-import { createTextActions, normalizeTextBound, } from '../../affine-gfx-text/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 { getMostCommonResolvedValue, getMostCommonValue, } from '../../affine-shared/utils/index.js';

package/dist/_pkgs/affine-gfx-mindmap/adapter/markdown/index.js

@@ -1,6 +1,6 @@
 import { ElementToMarkdownAdapterExtension } from '../../../affine-block-surface/index.js';
 import { getShapeText } from '../../../affine-gfx-shape/index.js';
-import { buildMindMapTree, } from '../../../affine-model/index.js';
+import { buildMindMapTree } from '../../../affine-model/index.js';
 export const mindmapToMarkdownAdapterMatcher = ElementToMarkdownAdapterExtension({
     name: 'mindmap',
     match: elementModel => elementModel.type === 'mindmap',

package/dist/_pkgs/affine-gfx-mindmap/adapter/utils.js

@@ -1,5 +1,5 @@
 import { getShapeText } from '../../affine-gfx-shape/index.js';
-import { buildMindMapTree, } from '../../affine-model/index.js';
+import { buildMindMapTree } from '../../affine-model/index.js';
 /**
  * traverse the mindMapTree and construct the content string
  * like: