@dskripchenko/flow 1.0.0 → 1.0.1

package/dist/style.css

@@ -1057,17 +1057,6 @@
   margin-top: 8px;
 }
 
-.fl-context-anchor {
-  position: fixed;
-  width: 1px;
-  height: 1px;
-  z-index: 50;
-}
-.fl-context-anchor__trigger {
-  display: block;
-  width: 1px;
-  height: 1px;
-}
 .fl-menu-label {
   flex: 1 1 auto;
 }
@@ -1092,8 +1081,7 @@
   display: none;
 }
 
-/* Toggle buttons keep one kit variant (switching variants re-renders the
-   trigger and detaches its tooltip); the pressed state is drawn here. */
+/* A pressed toggle (minimap, snap): the kit's secondary variant, tinted with the accent. */
 .fl-toggle.uid-button.is-active {
   background: var(--fl-accent-subtle);
   color: var(--uid-accent-text, var(--fl-accent));

package/dist/vue.cjs

@@ -664,13 +664,14 @@ var FlowControls_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_dskripchenko_ui.UidButton), {
 						size: "sm",
-						variant: "ghost",
+						variant: __props.minimap ? "secondary" : "ghost",
 						icon: (0, vue.unref)(_dskripchenko_ui_icons.Map),
 						"aria-label": __props.labels.minimap,
 						"aria-pressed": __props.minimap,
 						class: (0, vue.normalizeClass)(["fl-controls__minimap fl-toggle", { "is-active": __props.minimap }]),
 						onClick: _cache[4] || (_cache[4] = ($event) => emit("update:minimap", !__props.minimap))
 					}, null, 8, [
+						"variant",
 						"icon",
 						"aria-label",
 						"aria-pressed",
@@ -2600,6 +2601,26 @@ var FlowDetails_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		};
 	}
 });
+// src/vue/localeScope.ts
+/**
+* Locale handling shared by FlowView and FlowEditor. The kit's locale comes
+* from the host (a parent UidLocaleProvider) and is never overridden unless
+* the component's own `locale` prop is set; the package's strings follow the
+* explicit prop, else the host's kit locale (ru-* → Russian, else English).
+*/
+/** Renders its slot as is: stands in for UidLocaleProvider when the host's locale should apply. */
+var LocalePassthrough = (0, vue.defineComponent)({
+	name: "FlowLocalePassthrough",
+	setup: (_, { slots }) => () => slots.default?.()
+});
+function useLocaleScope(explicit) {
+	const host = (0, _dskripchenko_ui.useLocale)();
+	return {
+		lang: (0, vue.computed)(() => explicit() ?? (host.value.code?.toLowerCase().startsWith("ru") ? "ru" : "en")),
+		wrapper: (0, vue.computed)(() => explicit() ? _dskripchenko_ui.UidLocaleProvider : LocalePassthrough),
+		wrapperProps: (0, vue.computed)(() => explicit() ? { locale: explicit() === "ru" ? _dskripchenko_ui.ru : _dskripchenko_ui.en } : {})
+	};
+}
 // src/vue/labels.ts
 var en = {
 	graph: "Process graph",
@@ -3056,7 +3077,7 @@ var FlowView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		nodeRenderers: { default: () => ({}) },
 		nodeIcons: { default: () => ({}) },
 		statusTones: { default: () => ({}) },
-		locale: { default: "en" },
+		locale: { default: void 0 },
 		labels: { default: void 0 },
 		wheel: { default: "zoom" },
 		minZoom: { default: .15 },
@@ -3086,8 +3107,8 @@ var FlowView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		*/
 		const props = __props;
 		const emit = __emit;
-		const L = (0, vue.computed)(() => resolveLabels(props.locale, props.labels));
-		const kitLocale = (0, vue.computed)(() => props.locale === "ru" ? _dskripchenko_ui.ru : _dskripchenko_ui.en);
+		const { lang, wrapper, wrapperProps } = useLocaleScope(() => props.locale);
+		const L = (0, vue.computed)(() => resolveLabels(lang.value, props.labels));
 		const toast = (0, _dskripchenko_ui.useToast)();
 		const stack = (0, vue.shallowRef)([]);
 		const loadingSub = (0, vue.ref)(false);
@@ -3189,7 +3210,7 @@ var FlowView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		const updatedExact = (0, vue.computed)(() => {
 			const t = monitor.state.value?.updatedAt ?? monitor.state.value?.receivedAt;
-			return t ? new Date(t).toLocaleString(props.locale) : "";
+			return t ? new Date(t).toLocaleString(lang.value) : "";
 		});
 		const canvas = (0, vue.ref)(null);
 		const selection = (0, vue.ref)([]);
@@ -3303,10 +3324,10 @@ var FlowView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			stack
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_dskripchenko_ui.UidLocaleProvider), { locale: kitLocale.value }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(wrapper)), (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(wrapperProps))), {
 				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)(_ctx.$attrs, {
 					class: ["fl-view", { "is-monitoring": monitoring.value }],
-					lang: __props.locale
+					lang: (0, vue.unref)(lang)
 				}), [
 					(0, vue.createVNode)(FlowCanvas_default, {
 						ref_key: "canvas",
@@ -3491,7 +3512,7 @@ var FlowView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							toggleable: __props.toggleable,
 							drillable: selectedRef.value.kind === "node" && canEnter(selectedElement.value),
 							"status-tones": __props.statusTones,
-							locale: __props.locale,
+							locale: (0, vue.unref)(lang),
 							onToggle: _cache[2] || (_cache[2] = (v) => toggle({
 								kind: selectedRef.value.kind,
 								id: selectedRef.value.id,
@@ -3530,7 +3551,7 @@ var FlowView_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					__props.toastProvider ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_dskripchenko_ui.UidToastProvider), { key: 1 })) : (0, vue.createCommentVNode)("", true)
 				], 16, _hoisted_1$6)]),
 				_: 3
-			}, 8, ["locale"]);
+			}, 16);
 		};
 	}
 });
@@ -3544,43 +3565,21 @@ var _hoisted_2$4 = {
 var FlowContextMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	__name: "FlowContextMenu",
 	setup(__props, { expose: __expose }) {
-		/**
-		* A context menu at a screen point, on the kit's UidMenu. The kit menu opens
-		* from a trigger, so the trigger here is an invisible 1×1 button placed at
-		* the point and clicked programmatically (see docs/internal/design.md: the
-		* kit could grow a controlled/context mode).
-		*/
+		/** A context menu at a screen point: the kit's UidMenu, opened with `openAt`. */
 		const items = (0, vue.ref)([]);
-		const pos = (0, vue.ref)({
-			x: 0,
-			y: 0
-		});
-		const visible = (0, vue.ref)(false);
-		const anchor = (0, vue.ref)(null);
+		const menu = (0, vue.ref)(null);
 		async function open(point, entries) {
 			items.value = entries;
-			pos.value = point;
-			visible.value = true;
 			await (0, vue.nextTick)();
-			setTimeout(() => anchor.value?.querySelector(".uid-menu-trigger")?.click(), 0);
+			menu.value?.openAt(point.x, point.y);
 		}
 		__expose({ open });
 		return (_ctx, _cache) => {
-			return visible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-				key: 0,
-				ref_key: "anchor",
-				ref: anchor,
-				class: "fl-context-anchor",
-				"data-fl-ui": "",
-				style: (0, vue.normalizeStyle)({
-					left: `${pos.value.x}px`,
-					top: `${pos.value.y}px`
-				})
-			}, [(0, vue.createVNode)((0, vue.unref)(_dskripchenko_ui.UidMenu), null, {
-				trigger: (0, vue.withCtx)(() => [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("span", {
-					class: "fl-context-anchor__trigger",
-					"aria-hidden": "true"
-				}, null, -1)])]),
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_dskripchenko_ui.UidMenu), {
+				ref_key: "menu",
+				ref: menu,
+				class: "fl-context-menu"
+			}, {
 				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(items.value, (item, i) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: i }, [item.separator ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_dskripchenko_ui.UidMenuSeparator), { key: 0 })) : item.children ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_dskripchenko_ui.UidSubMenu), {
 						key: 1,
@@ -3620,7 +3619,7 @@ var FlowContextMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					]))], 64);
 				}), 128))]),
 				_: 1
-			})], 4)) : (0, vue.createCommentVNode)("", true);
+			}, 512);
 		};
 	}
 });
@@ -4593,7 +4592,7 @@ var FlowEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		edgeStyle: { default: "orthogonal" },
 		nodeRenderers: { default: () => ({}) },
 		nodeIcons: { default: () => ({}) },
-		locale: { default: "en" },
+		locale: { default: void 0 },
 		labels: { default: void 0 },
 		minimap: {
 			type: Boolean,
@@ -4625,8 +4624,8 @@ var FlowEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		*/
 		const props = __props;
 		const emit = __emit;
-		const L = (0, vue.computed)(() => resolveLabels(props.locale, props.labels));
-		const kitLocale = (0, vue.computed)(() => props.locale === "ru" ? _dskripchenko_ui.ru : _dskripchenko_ui.en);
+		const { lang, wrapper, wrapperProps } = useLocaleScope(() => props.locale);
+		const L = (0, vue.computed)(() => resolveLabels(lang.value, props.labels));
 		const history = new require_core.History((0, vue.toRaw)(props.modelValue));
 		const root = (0, vue.shallowRef)((0, vue.toRaw)(props.modelValue));
 		const revision = (0, vue.ref)(0);
@@ -5290,7 +5289,7 @@ var FlowEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			issues
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_dskripchenko_ui.UidLocaleProvider), { locale: kitLocale.value }, {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(wrapper)), (0, vue.normalizeProps)((0, vue.guardReactiveProps)((0, vue.unref)(wrapperProps))), {
 				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
 					ref_key: "rootEl",
 					ref: rootEl
@@ -5299,7 +5298,7 @@ var FlowEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"is-narrow": narrow.value,
 						"is-readonly": __props.readonly
 					}],
-					lang: __props.locale,
+					lang: (0, vue.unref)(lang),
 					role: "application",
 					"aria-label": L.value.editor,
 					onKeydown: onKeyDown
@@ -5430,13 +5429,14 @@ var FlowEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						}, {
 							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_dskripchenko_ui.UidButton), {
 								size: "sm",
-								variant: "ghost",
+								variant: snapOn.value ? "secondary" : "ghost",
 								icon: (0, vue.unref)(_dskripchenko_ui_icons.Magnet),
 								"aria-label": L.value.snapToGrid,
 								"aria-pressed": snapOn.value,
 								class: (0, vue.normalizeClass)(["fl-toolbar__snap fl-toggle", { "is-active": snapOn.value }]),
 								onClick: _cache[1] || (_cache[1] = ($event) => snapOn.value = !snapOn.value)
 							}, null, 8, [
+								"variant",
 								"icon",
 								"aria-label",
 								"aria-pressed",
@@ -5763,7 +5763,7 @@ var FlowEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					__props.toastProvider ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_dskripchenko_ui.UidToastProvider), { key: 1 })) : (0, vue.createCommentVNode)("", true)
 				], 16, _hoisted_1)]),
 				_: 3
-			}, 8, ["locale"]);
+			}, 16);
 		};
 	}
 });

package/dist/vue.d.ts

@@ -228,6 +228,7 @@ declare type __VLS_Props = {
     nodeRenderers?: Record<string, Component>;
     nodeIcons?: Record<string, Component>;
     statusTones?: Record<string, string>;
+    /** Interface language; by default the host's kit locale (a parent UidLocaleProvider), else English. Setting it also sets the kit's locale inside. */
     locale?: 'en' | 'ru' | string;
     labels?: Partial<FlowLabels>;
     wheel?: 'zoom' | 'pan';
@@ -310,6 +311,7 @@ declare type __VLS_Props_4 = {
     edgeStyle?: 'orthogonal' | 'smooth';
     nodeRenderers?: Record<string, Component>;
     nodeIcons?: Record<string, Component>;
+    /** Interface language; by default the host's kit locale (a parent UidLocaleProvider), else English. Setting it also sets the kit's locale inside. */
     locale?: 'en' | 'ru' | string;
     labels?: Partial<FlowLabels>;
     minimap?: boolean;

package/dist/vue.mjs

@@ -1,6 +1,6 @@
 import { A as reduceMonitor, B as measureNode, D as isStale, E as emptyMonitorState, I as boundsOf, J as sidePoint, M as toEpoch, R as layoutGraph, S as snap, T as STATUS_TONES, V as routeEdges, Y as approximateMeasurer, _ as History, a as isVisible, at as isLocked, b as describeCommand, d as copyFragment, dt as stringifyGraph, f as distributeNodes, g as pasteFragment, h as layoutCommand, i as fitView, it as defaultRegistry, j as statusSummary, k as pathEdges, l as zoomAt, n as centreOn, o as nearestInDirection, ot as portsOf, p as findFreeSpot, pt as isEnabled, r as clampZoom, s as toGraph, st as typeOf, tt as validateGraph, u as alignNodes, ut as parseGraph, v as CommandError, w as createPoller, x as nextId, y as applyCommand } from "./core-DfJMfClV.js";
 import { Fragment, Teleport, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, render, renderList, renderSlot, resolveDynamicComponent, shallowReactive, shallowRef, toDisplayString, toRaw, unref, useId, watch, withCtx, withKeys, withModifiers } from "vue";
-import { UidAlert, UidBadge, UidBreadcrumb, UidBreadcrumbItem, UidButton, UidDescriptionItem, UidDescriptionList, UidDrawer, UidFormField, UidInput, UidLocaleProvider, UidMenu, UidMenuItem, UidMenuSeparator, UidModal, UidSelect, UidSpinner, UidSubMenu, UidSwitch, UidTab, UidTabPanel, UidTabs, UidTag, UidTextarea, UidToastProvider, UidTooltip, en as en$1, ru as ru$1, useToast } from "@dskripchenko/ui";
+import { UidAlert, UidBadge, UidBreadcrumb, UidBreadcrumbItem, UidButton, UidDescriptionItem, UidDescriptionList, UidDrawer, UidFormField, UidInput, UidLocaleProvider, UidMenu, UidMenuItem, UidMenuSeparator, UidModal, UidSelect, UidSpinner, UidSubMenu, UidSwitch, UidTab, UidTabPanel, UidTabs, UidTag, UidTextarea, UidToastProvider, UidTooltip, en as en$1, ru as ru$1, useLocale, useToast } from "@dskripchenko/ui";
 import { Activity, AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignHorizontalSpaceAround, AlignStartHorizontal, AlignStartVertical, AlignVerticalSpaceAround, ArrowRight, Check, ChevronLeft, CircleAlert, CircleCheck, ClipboardPaste, Clock, Cog, Copy, CopyPlus, Diamond, Download, Ellipsis, FileCode, Layers, LayoutGrid, Magnet, Map as Map$1, Maximize, MessageSquare, Minus, PanelRight, Play, Plus, Power, Redo2, RefreshCw, Scissors, Shapes, SkipForward, Square, SquareArrowOutUpRight, StickyNote, Trash2, TriangleAlert, Undo2, Upload, Workflow, X } from "@dskripchenko/ui/icons";
 // src/vue/icons.ts
 var NODE_ICONS = {
@@ -663,13 +663,14 @@ var FlowControls_default = /* @__PURE__ */ defineComponent({
 				}, {
 					default: withCtx(() => [createVNode(unref(UidButton), {
 						size: "sm",
-						variant: "ghost",
+						variant: __props.minimap ? "secondary" : "ghost",
 						icon: unref(Map$1),
 						"aria-label": __props.labels.minimap,
 						"aria-pressed": __props.minimap,
 						class: normalizeClass(["fl-controls__minimap fl-toggle", { "is-active": __props.minimap }]),
 						onClick: _cache[4] || (_cache[4] = ($event) => emit("update:minimap", !__props.minimap))
 					}, null, 8, [
+						"variant",
 						"icon",
 						"aria-label",
 						"aria-pressed",
@@ -2599,6 +2600,26 @@ var FlowDetails_default = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
+// src/vue/localeScope.ts
+/**
+* Locale handling shared by FlowView and FlowEditor. The kit's locale comes
+* from the host (a parent UidLocaleProvider) and is never overridden unless
+* the component's own `locale` prop is set; the package's strings follow the
+* explicit prop, else the host's kit locale (ru-* → Russian, else English).
+*/
+/** Renders its slot as is: stands in for UidLocaleProvider when the host's locale should apply. */
+var LocalePassthrough = defineComponent({
+	name: "FlowLocalePassthrough",
+	setup: (_, { slots }) => () => slots.default?.()
+});
+function useLocaleScope(explicit) {
+	const host = useLocale();
+	return {
+		lang: computed(() => explicit() ?? (host.value.code?.toLowerCase().startsWith("ru") ? "ru" : "en")),
+		wrapper: computed(() => explicit() ? UidLocaleProvider : LocalePassthrough),
+		wrapperProps: computed(() => explicit() ? { locale: explicit() === "ru" ? ru$1 : en$1 } : {})
+	};
+}
 // src/vue/labels.ts
 var en = {
 	graph: "Process graph",
@@ -3055,7 +3076,7 @@ var FlowView_default = /* @__PURE__ */ defineComponent({
 		nodeRenderers: { default: () => ({}) },
 		nodeIcons: { default: () => ({}) },
 		statusTones: { default: () => ({}) },
-		locale: { default: "en" },
+		locale: { default: void 0 },
 		labels: { default: void 0 },
 		wheel: { default: "zoom" },
 		minZoom: { default: .15 },
@@ -3085,8 +3106,8 @@ var FlowView_default = /* @__PURE__ */ defineComponent({
 		*/
 		const props = __props;
 		const emit = __emit;
-		const L = computed(() => resolveLabels(props.locale, props.labels));
-		const kitLocale = computed(() => props.locale === "ru" ? ru$1 : en$1);
+		const { lang, wrapper, wrapperProps } = useLocaleScope(() => props.locale);
+		const L = computed(() => resolveLabels(lang.value, props.labels));
 		const toast = useToast();
 		const stack = shallowRef([]);
 		const loadingSub = ref(false);
@@ -3188,7 +3209,7 @@ var FlowView_default = /* @__PURE__ */ defineComponent({
 		});
 		const updatedExact = computed(() => {
 			const t = monitor.state.value?.updatedAt ?? monitor.state.value?.receivedAt;
-			return t ? new Date(t).toLocaleString(props.locale) : "";
+			return t ? new Date(t).toLocaleString(lang.value) : "";
 		});
 		const canvas = ref(null);
 		const selection = ref([]);
@@ -3302,10 +3323,10 @@ var FlowView_default = /* @__PURE__ */ defineComponent({
 			stack
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(UidLocaleProvider), { locale: kitLocale.value }, {
+			return openBlock(), createBlock(resolveDynamicComponent(unref(wrapper)), normalizeProps(guardReactiveProps(unref(wrapperProps))), {
 				default: withCtx(() => [createElementVNode("div", mergeProps(_ctx.$attrs, {
 					class: ["fl-view", { "is-monitoring": monitoring.value }],
-					lang: __props.locale
+					lang: unref(lang)
 				}), [
 					createVNode(FlowCanvas_default, {
 						ref_key: "canvas",
@@ -3490,7 +3511,7 @@ var FlowView_default = /* @__PURE__ */ defineComponent({
 							toggleable: __props.toggleable,
 							drillable: selectedRef.value.kind === "node" && canEnter(selectedElement.value),
 							"status-tones": __props.statusTones,
-							locale: __props.locale,
+							locale: unref(lang),
 							onToggle: _cache[2] || (_cache[2] = (v) => toggle({
 								kind: selectedRef.value.kind,
 								id: selectedRef.value.id,
@@ -3529,7 +3550,7 @@ var FlowView_default = /* @__PURE__ */ defineComponent({
 					__props.toastProvider ? (openBlock(), createBlock(unref(UidToastProvider), { key: 1 })) : createCommentVNode("", true)
 				], 16, _hoisted_1$6)]),
 				_: 3
-			}, 8, ["locale"]);
+			}, 16);
 		};
 	}
 });
@@ -3543,43 +3564,21 @@ var _hoisted_2$4 = {
 var FlowContextMenu_default = /* @__PURE__ */ defineComponent({
 	__name: "FlowContextMenu",
 	setup(__props, { expose: __expose }) {
-		/**
-		* A context menu at a screen point, on the kit's UidMenu. The kit menu opens
-		* from a trigger, so the trigger here is an invisible 1×1 button placed at
-		* the point and clicked programmatically (see docs/internal/design.md: the
-		* kit could grow a controlled/context mode).
-		*/
+		/** A context menu at a screen point: the kit's UidMenu, opened with `openAt`. */
 		const items = ref([]);
-		const pos = ref({
-			x: 0,
-			y: 0
-		});
-		const visible = ref(false);
-		const anchor = ref(null);
+		const menu = ref(null);
 		async function open(point, entries) {
 			items.value = entries;
-			pos.value = point;
-			visible.value = true;
 			await nextTick();
-			setTimeout(() => anchor.value?.querySelector(".uid-menu-trigger")?.click(), 0);
+			menu.value?.openAt(point.x, point.y);
 		}
 		__expose({ open });
 		return (_ctx, _cache) => {
-			return visible.value ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				ref_key: "anchor",
-				ref: anchor,
-				class: "fl-context-anchor",
-				"data-fl-ui": "",
-				style: normalizeStyle({
-					left: `${pos.value.x}px`,
-					top: `${pos.value.y}px`
-				})
-			}, [createVNode(unref(UidMenu), null, {
-				trigger: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", {
-					class: "fl-context-anchor__trigger",
-					"aria-hidden": "true"
-				}, null, -1)])]),
+			return openBlock(), createBlock(unref(UidMenu), {
+				ref_key: "menu",
+				ref: menu,
+				class: "fl-context-menu"
+			}, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, i) => {
 					return openBlock(), createElementBlock(Fragment, { key: i }, [item.separator ? (openBlock(), createBlock(unref(UidMenuSeparator), { key: 0 })) : item.children ? (openBlock(), createBlock(unref(UidSubMenu), {
 						key: 1,
@@ -3619,7 +3618,7 @@ var FlowContextMenu_default = /* @__PURE__ */ defineComponent({
 					]))], 64);
 				}), 128))]),
 				_: 1
-			})], 4)) : createCommentVNode("", true);
+			}, 512);
 		};
 	}
 });
@@ -4592,7 +4591,7 @@ var FlowEditor_default = /* @__PURE__ */ defineComponent({
 		edgeStyle: { default: "orthogonal" },
 		nodeRenderers: { default: () => ({}) },
 		nodeIcons: { default: () => ({}) },
-		locale: { default: "en" },
+		locale: { default: void 0 },
 		labels: { default: void 0 },
 		minimap: {
 			type: Boolean,
@@ -4624,8 +4623,8 @@ var FlowEditor_default = /* @__PURE__ */ defineComponent({
 		*/
 		const props = __props;
 		const emit = __emit;
-		const L = computed(() => resolveLabels(props.locale, props.labels));
-		const kitLocale = computed(() => props.locale === "ru" ? ru$1 : en$1);
+		const { lang, wrapper, wrapperProps } = useLocaleScope(() => props.locale);
+		const L = computed(() => resolveLabels(lang.value, props.labels));
 		const history = new History(toRaw(props.modelValue));
 		const root = shallowRef(toRaw(props.modelValue));
 		const revision = ref(0);
@@ -5289,7 +5288,7 @@ var FlowEditor_default = /* @__PURE__ */ defineComponent({
 			issues
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(UidLocaleProvider), { locale: kitLocale.value }, {
+			return openBlock(), createBlock(resolveDynamicComponent(unref(wrapper)), normalizeProps(guardReactiveProps(unref(wrapperProps))), {
 				default: withCtx(() => [createElementVNode("div", mergeProps({
 					ref_key: "rootEl",
 					ref: rootEl
@@ -5298,7 +5297,7 @@ var FlowEditor_default = /* @__PURE__ */ defineComponent({
 						"is-narrow": narrow.value,
 						"is-readonly": __props.readonly
 					}],
-					lang: __props.locale,
+					lang: unref(lang),
 					role: "application",
 					"aria-label": L.value.editor,
 					onKeydown: onKeyDown
@@ -5429,13 +5428,14 @@ var FlowEditor_default = /* @__PURE__ */ defineComponent({
 						}, {
 							default: withCtx(() => [createVNode(unref(UidButton), {
 								size: "sm",
-								variant: "ghost",
+								variant: snapOn.value ? "secondary" : "ghost",
 								icon: unref(Magnet),
 								"aria-label": L.value.snapToGrid,
 								"aria-pressed": snapOn.value,
 								class: normalizeClass(["fl-toolbar__snap fl-toggle", { "is-active": snapOn.value }]),
 								onClick: _cache[1] || (_cache[1] = ($event) => snapOn.value = !snapOn.value)
 							}, null, 8, [
+								"variant",
 								"icon",
 								"aria-label",
 								"aria-pressed",
@@ -5762,7 +5762,7 @@ var FlowEditor_default = /* @__PURE__ */ defineComponent({
 					__props.toastProvider ? (openBlock(), createBlock(unref(UidToastProvider), { key: 1 })) : createCommentVNode("", true)
 				], 16, _hoisted_1)]),
 				_: 3
-			}, 8, ["locale"]);
+			}, 16);
 		};
 	}
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dskripchenko/flow",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Process and state-machine graphs: a zero-dependency TypeScript core (model, validation, layered layout, monitoring state, polling, undoable editing commands) and Vue components on @dskripchenko/ui — viewer, live monitoring overlay, drill-down and a visual editor",
   "keywords": [
     "flow",
@@ -85,7 +85,7 @@
   },
   "peerDependencies": {
     "@dskripchenko/diagrams": "^1.1.0",
-    "@dskripchenko/ui": "^1.14.0",
+    "@dskripchenko/ui": "^1.15.0",
     "vue": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -102,7 +102,7 @@
   "devDependencies": {
     "@changesets/cli": "^3.0.3",
     "@dskripchenko/diagrams": "^1.1.0",
-    "@dskripchenko/ui": "^1.14.0",
+    "@dskripchenko/ui": "^1.15.0",
     "@eslint/js": "^10.0.1",
     "@microsoft/api-extractor": "^7.59.4",
     "@types/node": "^22.20.5",