@conduction/nextcloud-vue 2.119.0 → 2.121.0

package/dist/esm/components/CnStateMachineEditor/CnStateMachineNode.vue2.js

@@ -0,0 +1,180 @@
+import { NcActions, NcActionButton } from '@nextcloud/vue';
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue';
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue';
+import LinkOff from 'vue-material-design-icons/LinkOff.vue';
+import Pencil from 'vue-material-design-icons/Pencil.vue';
+import Plus from 'vue-material-design-icons/Plus.vue';
+import { asList } from '../../utils/stateMachineValidation.js';
+
+/**
+ * The body of one state on the CnStateMachineEditor canvas: its name, its
+ * steps, and a menu that offers every canvas gesture from the keyboard.
+ *
+ * Rendered inside CnGraphCanvas's focusable node wrapper, which owns moving
+ * (arrow keys), connecting (`c`) and removing (Delete) the state.
+ */
+var script = {
+	name: 'CnStateMachineNode',
+
+	components: { NcActions, NcActionButton, ArrowRight, DeleteOutline, LinkOff, Pencil, Plus },
+
+	props: {
+		/** The state's name. */
+		label: {
+			type: String,
+			required: true,
+		},
+
+		/** Whether the state is final. */
+		final: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The state's steps, in order. */
+		steps: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** Whether steps are part of this machine. */
+		showSteps: {
+			type: Boolean,
+			default: true,
+		},
+
+		/** Record keys of a step: `{ title, required, badge }`. */
+		stepKeys: {
+			type: Object,
+			default: () => ({ title: 'title', required: 'required', badge: '' }),
+		},
+
+		/** The step whose panel is open. */
+		selectedStepId: {
+			type: String,
+			default: null,
+		},
+
+		/** States this one has no transition to yet: `{ id, label }`. */
+		connectTargets: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** Transitions leaving this state: `{ id, targetLabel }`. */
+		outgoing: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** Whether the actions menu is open. */
+		menuOpen: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Hide every editing control. */
+		readOnly: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Resolves an editor text by name: `(name, vars) => string`. */
+		say: {
+			type: Function,
+			required: true,
+		},
+	},
+
+	emits: [
+		'add-step',
+		'connect',
+		'delete-state',
+		'disconnect',
+		'edit-transition',
+		'step-click',
+		'step-move',
+		'update:menuOpen',
+	],
+
+	data() {
+		return {
+			dragIndex: null,
+		}
+	},
+
+	methods: {
+		/**
+		 * @param {object} step A step.
+		 * @return {string} Its title.
+		 */
+		stepTitle(step) {
+			return step[this.stepKeys.title] || ''
+		},
+
+		/**
+		 * @param {object} step A step.
+		 * @return {boolean} Whether it is required.
+		 */
+		isRequired(step) {
+			return this.stepKeys.required ? step[this.stepKeys.required] === true : false
+		},
+
+		/**
+		 * @param {object} step A step.
+		 * @return {number} The length of the list its badge counts, 0 for none.
+		 */
+		badgeOf(step) {
+			return this.stepKeys.badge ? asList(step[this.stepKeys.badge]).length : 0
+		},
+
+		/**
+		 * Keys on a step stay on the step: Alt with an arrow moves it within the
+		 * state, everything else is the button's own.
+		 *
+		 * @param {number} index The step's position.
+		 * @param {KeyboardEvent} event The key event.
+		 * @return {void}
+		 */
+		onStepKeydown(index, event) {
+			event.stopPropagation();
+			if (this.readOnly || event.altKey !== true) {
+				return
+			}
+			if (event.key === 'ArrowUp' && index > 0) {
+				event.preventDefault();
+				this.$emit('step-move', { from: index, to: index - 1 });
+			} else if (event.key === 'ArrowDown' && index < this.steps.length - 1) {
+				event.preventDefault();
+				this.$emit('step-move', { from: index, to: index + 1 });
+			}
+		},
+
+		/**
+		 * @param {number} index The dragged step.
+		 * @param {DragEvent} event The drag event.
+		 * @return {void}
+		 */
+		onStepDragStart(index, event) {
+			this.dragIndex = index;
+			if (event.dataTransfer) {
+				event.dataTransfer.effectAllowed = 'move';
+				event.dataTransfer.setData('text/plain', String(index));
+			}
+		},
+
+		/**
+		 * @param {number} index The step dropped on.
+		 * @return {void}
+		 */
+		onStepDrop(index) {
+			if (this.dragIndex !== null && this.dragIndex !== index) {
+				this.$emit('step-move', { from: this.dragIndex, to: index });
+			}
+			this.dragIndex = null;
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnStateMachineNode.vue2.js.map

package/dist/esm/components/CnStateMachineEditor/CnStateMachineNode.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnStateMachineNode.vue2.js","sources":["../../../../src/components/CnStateMachineEditor/CnStateMachineNode.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>\n  - SPDX-License-Identifier: EUPL-1.2\n  -->\n<template>\n\t<div class=\"cn-sm-node\" :class=\"{ 'cn-sm-node--final': final }\">\n\t\t<div class=\"cn-sm-node__header\">\n\t\t\t<span class=\"cn-sm-node__name\">{{ label }}</span>\n\t\t\t<span\n\t\t\t\tv-if=\"showSteps && steps.length > 0\"\n\t\t\t\tclass=\"cn-sm-node__count\"\n\t\t\t\t:title=\"say('stepCount', { count: steps.length })\">\n\t\t\t\t<span aria-hidden=\"true\">{{ steps.length }}</span>\n\t\t\t\t<span class=\"cn-sm-node__sr\">{{ say('stepCount', { count: steps.length }) }}</span>\n\t\t\t</span>\n\n\t\t\t<!-- Every pointer gesture on the canvas has a menu entry here, so a\n\t\t\t     keyboard reaches all of them. Keys and pointer events stop at\n\t\t\t     this wrapper: the node's own handler would otherwise move or\n\t\t\t     remove the state on an arrow or Delete meant for the menu. -->\n\t\t\t<div\n\t\t\t\tv-if=\"!readOnly\"\n\t\t\t\tclass=\"cn-sm-node__menu nodrag nopan\"\n\t\t\t\t@keydown.stop\n\t\t\t\t@click.stop\n\t\t\t\t@mousedown.stop\n\t\t\t\t@pointerdown.stop>\n\t\t\t\t<NcActions\n\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t:inline=\"0\"\n\t\t\t\t\t:aria-label=\"say('stateActions', { name: label })\"\n\t\t\t\t\t@update:open=\"$emit('update:menuOpen', $event)\">\n\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\tv-for=\"target in connectTargets\"\n\t\t\t\t\t\t:key=\"`connect-${target.id}`\"\n\t\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t\t@click=\"$emit('connect', target.id)\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('connectTo', { name: target.label }) }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\tv-for=\"transition in outgoing\"\n\t\t\t\t\t\t:key=\"`edit-${transition.id}`\"\n\t\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t\t@click=\"$emit('edit-transition', transition.id)\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('editTransitionTo', { name: transition.targetLabel }) }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\tv-for=\"transition in outgoing\"\n\t\t\t\t\t\t:key=\"`disconnect-${transition.id}`\"\n\t\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t\t@click=\"$emit('disconnect', transition.id)\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<LinkOff :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('disconnectFrom', { name: transition.targetLabel }) }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton v-if=\"showSteps\" closeAfterClick @click=\"$emit('add-step')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('addStep') }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton closeAfterClick @click=\"$emit('delete-state')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<DeleteOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('deleteState') }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<span v-if=\"final\" class=\"cn-sm-node__chip\">{{ say('final') }}</span>\n\n\t\t<ul v-if=\"showSteps && steps.length > 0\" class=\"cn-sm-node__steps\">\n\t\t\t<li v-for=\"(step, index) in steps\" :key=\"step.id\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cn-sm-node__step nodrag nopan\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-sm-node__step--required': isRequired(step),\n\t\t\t\t\t\t'cn-sm-node__step--selected': step.id === selectedStepId,\n\t\t\t\t\t}\"\n\t\t\t\t\t:aria-pressed=\"step.id === selectedStepId ? 'true' : 'false'\"\n\t\t\t\t\t:draggable=\"readOnly ? 'false' : 'true'\"\n\t\t\t\t\t@click.stop=\"$emit('step-click', step.id)\"\n\t\t\t\t\t@keydown=\"onStepKeydown(index, $event)\"\n\t\t\t\t\t@mousedown.stop\n\t\t\t\t\t@pointerdown.stop\n\t\t\t\t\t@dragstart.stop=\"onStepDragStart(index, $event)\"\n\t\t\t\t\t@dragover.prevent\n\t\t\t\t\t@drop.stop.prevent=\"onStepDrop(index)\">\n\t\t\t\t\t<span v-if=\"isRequired(step)\" class=\"cn-sm-node__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t<span class=\"cn-sm-node__step-name\">{{ stepTitle(step) }}</span>\n\t\t\t\t\t<span v-if=\"isRequired(step)\" class=\"cn-sm-node__sr\">{{ say('required') }}</span>\n\t\t\t\t\t<span v-if=\"badgeOf(step) > 0\" class=\"cn-sm-node__checks\">{{ badgeOf(step) }}</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\n\t\t<button\n\t\t\tv-if=\"showSteps && !readOnly\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cn-sm-node__add nodrag nopan\"\n\t\t\t@click.stop=\"$emit('add-step')\"\n\t\t\t@keydown.stop\n\t\t\t@mousedown.stop\n\t\t\t@pointerdown.stop>\n\t\t\t<Plus :size=\"16\" />\n\t\t\t<span>{{ say('addStep') }}</span>\n\t\t</button>\n\t</div>\n</template>\n\n<script>\nimport { NcActionButton, NcActions } from '@nextcloud/vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'\nimport LinkOff from 'vue-material-design-icons/LinkOff.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport { asList } from '../../utils/stateMachineValidation.js'\n\n/**\n * The body of one state on the CnStateMachineEditor canvas: its name, its\n * steps, and a menu that offers every canvas gesture from the keyboard.\n *\n * Rendered inside CnGraphCanvas's focusable node wrapper, which owns moving\n * (arrow keys), connecting (`c`) and removing (Delete) the state.\n */\nexport default {\n\tname: 'CnStateMachineNode',\n\n\tcomponents: { NcActions, NcActionButton, ArrowRight, DeleteOutline, LinkOff, Pencil, Plus },\n\n\tprops: {\n\t\t/** The state's name. */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Whether the state is final. */\n\t\tfinal: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** The state's steps, in order. */\n\t\tsteps: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Whether steps are part of this machine. */\n\t\tshowSteps: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Record keys of a step: `{ title, required, badge }`. */\n\t\tstepKeys: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ title: 'title', required: 'required', badge: '' }),\n\t\t},\n\n\t\t/** The step whose panel is open. */\n\t\tselectedStepId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** States this one has no transition to yet: `{ id, label }`. */\n\t\tconnectTargets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Transitions leaving this state: `{ id, targetLabel }`. */\n\t\toutgoing: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Whether the actions menu is open. */\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Hide every editing control. */\n\t\treadOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Resolves an editor text by name: `(name, vars) => string`. */\n\t\tsay: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'add-step',\n\t\t'connect',\n\t\t'delete-state',\n\t\t'disconnect',\n\t\t'edit-transition',\n\t\t'step-click',\n\t\t'step-move',\n\t\t'update:menuOpen',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdragIndex: null,\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * @param {object} step A step.\n\t\t * @return {string} Its title.\n\t\t */\n\t\tstepTitle(step) {\n\t\t\treturn step[this.stepKeys.title] || ''\n\t\t},\n\n\t\t/**\n\t\t * @param {object} step A step.\n\t\t * @return {boolean} Whether it is required.\n\t\t */\n\t\tisRequired(step) {\n\t\t\treturn this.stepKeys.required ? step[this.stepKeys.required] === true : false\n\t\t},\n\n\t\t/**\n\t\t * @param {object} step A step.\n\t\t * @return {number} The length of the list its badge counts, 0 for none.\n\t\t */\n\t\tbadgeOf(step) {\n\t\t\treturn this.stepKeys.badge ? asList(step[this.stepKeys.badge]).length : 0\n\t\t},\n\n\t\t/**\n\t\t * Keys on a step stay on the step: Alt with an arrow moves it within the\n\t\t * state, everything else is the button's own.\n\t\t *\n\t\t * @param {number} index The step's position.\n\t\t * @param {KeyboardEvent} event The key event.\n\t\t * @return {void}\n\t\t */\n\t\tonStepKeydown(index, event) {\n\t\t\tevent.stopPropagation()\n\t\t\tif (this.readOnly || event.altKey !== true) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.key === 'ArrowUp' && index > 0) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tthis.$emit('step-move', { from: index, to: index - 1 })\n\t\t\t} else if (event.key === 'ArrowDown' && index < this.steps.length - 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tthis.$emit('step-move', { from: index, to: index + 1 })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {number} index The dragged step.\n\t\t * @param {DragEvent} event The drag event.\n\t\t * @return {void}\n\t\t */\n\t\tonStepDragStart(index, event) {\n\t\t\tthis.dragIndex = index\n\t\t\tif (event.dataTransfer) {\n\t\t\t\tevent.dataTransfer.effectAllowed = 'move'\n\t\t\t\tevent.dataTransfer.setData('text/plain', String(index))\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {number} index The step dropped on.\n\t\t * @return {void}\n\t\t */\n\t\tonStepDrop(index) {\n\t\t\tif (this.dragIndex !== null && this.dragIndex !== index) {\n\t\t\t\tthis.$emit('step-move', { from: this.dragIndex, to: index })\n\t\t\t}\n\t\t\tthis.dragIndex = null\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sm-node {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n\ttext-align: start;\n}\n\n.cn-sm-node__header {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n}\n\n.cn-sm-node__name {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\toverflow: hidden;\n\tfont-size: 14px;\n\tfont-weight: 600;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-sm-node__count {\n\tflex: none;\n\tmin-width: 20px;\n\tpadding: 0 6px;\n\tborder-radius: 10px;\n\tbackground: var(--color-primary-element, #0082c9);\n\tcolor: var(--color-primary-element-text, #fff);\n\tfont-size: 12px;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.cn-sm-node__menu {\n\tflex: none;\n\tmargin: -6px -8px -6px 0;\n}\n\n.cn-sm-node__chip {\n\talign-self: flex-start;\n\tpadding: 2px 8px;\n\tborder-radius: 10px;\n\tbackground: var(--color-success, #2d7b41);\n\tcolor: var(--color-success-text, #fff);\n\tfont-size: 12px;\n\tfont-weight: 600;\n}\n\n.cn-sm-node__steps {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0 -12px;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-sm-node__step {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\twidth: 100%;\n\tmin-height: 28px;\n\tpadding: 2px 12px;\n\tborder: 0;\n\tbackground: none;\n\tcolor: var(--color-main-text, #222);\n\tfont: inherit;\n\tfont-size: 13px;\n\ttext-align: start;\n\tcursor: pointer;\n}\n\n.cn-sm-node__step:hover,\n.cn-sm-node__step--selected {\n\tbackground: var(--color-background-hover, #f5f5f5);\n}\n\n.cn-sm-node__step:focus-visible,\n.cn-sm-node__add:focus-visible {\n\toutline: 2px solid var(--color-primary-element, #0082c9);\n\toutline-offset: -2px;\n}\n\n.cn-sm-node__step--required {\n\tfont-weight: 600;\n}\n\n.cn-sm-node__required {\n\tcolor: var(--color-error-text, #c9302c);\n}\n\n.cn-sm-node__step-name {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-sm-node__checks {\n\tflex: none;\n\tpadding: 0 4px;\n\tborder-radius: 4px;\n\tbackground: var(--color-background-dark, #ededed);\n\tcolor: var(--color-text-maxcontrast, #6b6b6b);\n\tfont-size: 11px;\n}\n\n.cn-sm-node__add {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tmargin: 0 -12px -8px;\n\tmin-height: 32px;\n\tpadding: 4px 12px;\n\tborder: 0;\n\tborder-top: 1px solid var(--color-border, #d0d0d0);\n\tbackground: none;\n\tcolor: var(--color-text-maxcontrast, #6b6b6b);\n\tfont: inherit;\n\tfont-size: 13px;\n\tcursor: pointer;\n}\n\n.cn-sm-node__add:hover {\n\tbackground: var(--color-background-hover, #f5f5f5);\n\tcolor: var(--color-main-text, #222);\n}\n\n.cn-sm-node__sr {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n\tclip-path: inset(50%);\n\twhite-space: nowrap;\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/esm/components/CnStateMachineEditor/CnStateMachineNode.vue3.js

@@ -0,0 +1,208 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, withModifiers, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode } from 'vue';
+
+const _hoisted_1 = { class: "cn-sm-node__header" };
+const _hoisted_2 = { class: "cn-sm-node__name" };
+const _hoisted_3 = ["title"];
+const _hoisted_4 = { "aria-hidden": "true" };
+const _hoisted_5 = { class: "cn-sm-node__sr" };
+const _hoisted_6 = {
+  key: 0,
+  class: "cn-sm-node__chip"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "cn-sm-node__steps"
+};
+const _hoisted_8 = ["aria-pressed", "draggable", "onClick", "onKeydown", "onDragstart", "onDrop"];
+const _hoisted_9 = {
+  key: 0,
+  class: "cn-sm-node__required",
+  "aria-hidden": "true"
+};
+const _hoisted_10 = { class: "cn-sm-node__step-name" };
+const _hoisted_11 = {
+  key: 1,
+  class: "cn-sm-node__sr"
+};
+const _hoisted_12 = {
+  key: 2,
+  class: "cn-sm-node__checks"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowRight = resolveComponent("ArrowRight");
+  const _component_NcActionButton = resolveComponent("NcActionButton");
+  const _component_Pencil = resolveComponent("Pencil");
+  const _component_LinkOff = resolveComponent("LinkOff");
+  const _component_Plus = resolveComponent("Plus");
+  const _component_DeleteOutline = resolveComponent("DeleteOutline");
+  const _component_NcActions = resolveComponent("NcActions");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(["cn-sm-node", { 'cn-sm-node--final': $props.final }])
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("span", _hoisted_2, toDisplayString($props.label), 1 /* TEXT */),
+      ($props.showSteps && $props.steps.length > 0)
+        ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "cn-sm-node__count",
+            title: $props.say('stepCount', { count: $props.steps.length })
+          }, [
+            createElementVNode("span", _hoisted_4, toDisplayString($props.steps.length), 1 /* TEXT */),
+            createElementVNode("span", _hoisted_5, toDisplayString($props.say('stepCount', { count: $props.steps.length })), 1 /* TEXT */)
+          ], 8 /* PROPS */, _hoisted_3))
+        : createCommentVNode("v-if", true),
+      (!$props.readOnly)
+        ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "cn-sm-node__menu nodrag nopan",
+            onKeydown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["stop"])),
+            onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"])),
+            onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["stop"])),
+            onPointerdown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["stop"]))
+          }, [
+            createVNode(_component_NcActions, {
+              open: $props.menuOpen,
+              inline: 0,
+              "aria-label": $props.say('stateActions', { name: $props.label }),
+              "onUpdate:open": _cache[2] || (_cache[2] = $event => (_ctx.$emit('update:menuOpen', $event)))
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($props.connectTargets, (target) => {
+                  return (openBlock(), createBlock(_component_NcActionButton, {
+                    key: `connect-${target.id}`,
+                    closeAfterClick: "",
+                    onClick: $event => (_ctx.$emit('connect', target.id))
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(_component_ArrowRight, { size: 20 })
+                    ]),
+                    default: withCtx(() => [
+                      createTextVNode(" " + toDisplayString($props.say('connectTo', { name: target.label })), 1 /* TEXT */)
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
+                }), 128 /* KEYED_FRAGMENT */)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList($props.outgoing, (transition) => {
+                  return (openBlock(), createBlock(_component_NcActionButton, {
+                    key: `edit-${transition.id}`,
+                    closeAfterClick: "",
+                    onClick: $event => (_ctx.$emit('edit-transition', transition.id))
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(_component_Pencil, { size: 20 })
+                    ]),
+                    default: withCtx(() => [
+                      createTextVNode(" " + toDisplayString($props.say('editTransitionTo', { name: transition.targetLabel })), 1 /* TEXT */)
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
+                }), 128 /* KEYED_FRAGMENT */)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList($props.outgoing, (transition) => {
+                  return (openBlock(), createBlock(_component_NcActionButton, {
+                    key: `disconnect-${transition.id}`,
+                    closeAfterClick: "",
+                    onClick: $event => (_ctx.$emit('disconnect', transition.id))
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(_component_LinkOff, { size: 20 })
+                    ]),
+                    default: withCtx(() => [
+                      createTextVNode(" " + toDisplayString($props.say('disconnectFrom', { name: transition.targetLabel })), 1 /* TEXT */)
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
+                }), 128 /* KEYED_FRAGMENT */)),
+                ($props.showSteps)
+                  ? (openBlock(), createBlock(_component_NcActionButton, {
+                      key: 0,
+                      closeAfterClick: "",
+                      onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('add-step')))
+                    }, {
+                      icon: withCtx(() => [
+                        createVNode(_component_Plus, { size: 20 })
+                      ]),
+                      default: withCtx(() => [
+                        createTextVNode(" " + toDisplayString($props.say('addStep')), 1 /* TEXT */)
+                      ]),
+                      _: 1 /* STABLE */
+                    }))
+                  : createCommentVNode("v-if", true),
+                createVNode(_component_NcActionButton, {
+                  closeAfterClick: "",
+                  onClick: _cache[1] || (_cache[1] = $event => (_ctx.$emit('delete-state')))
+                }, {
+                  icon: withCtx(() => [
+                    createVNode(_component_DeleteOutline, { size: 20 })
+                  ]),
+                  default: withCtx(() => [
+                    createTextVNode(" " + toDisplayString($props.say('deleteState')), 1 /* TEXT */)
+                  ]),
+                  _: 1 /* STABLE */
+                })
+              ]),
+              _: 1 /* STABLE */
+            }, 8 /* PROPS */, ["open", "aria-label"])
+          ], 32 /* NEED_HYDRATION */))
+        : createCommentVNode("v-if", true)
+    ]),
+    ($props.final)
+      ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString($props.say('final')), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
+    ($props.showSteps && $props.steps.length > 0)
+      ? (openBlock(), createElementBlock("ul", _hoisted_7, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($props.steps, (step, index) => {
+            return (openBlock(), createElementBlock("li", {
+              key: step.id
+            }, [
+              createElementVNode("button", {
+                type: "button",
+                class: normalizeClass(["cn-sm-node__step nodrag nopan", {
+						'cn-sm-node__step--required': $options.isRequired(step),
+						'cn-sm-node__step--selected': step.id === $props.selectedStepId,
+					}]),
+                "aria-pressed": step.id === $props.selectedStepId ? 'true' : 'false',
+                draggable: $props.readOnly ? 'false' : 'true',
+                onClick: withModifiers($event => (_ctx.$emit('step-click', step.id)), ["stop"]),
+                onKeydown: $event => ($options.onStepKeydown(index, $event)),
+                onMousedown: _cache[7] || (_cache[7] = withModifiers(() => {}, ["stop"])),
+                onPointerdown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["stop"])),
+                onDragstart: withModifiers($event => ($options.onStepDragStart(index, $event)), ["stop"]),
+                onDragover: _cache[9] || (_cache[9] = withModifiers(() => {}, ["prevent"])),
+                onDrop: withModifiers($event => ($options.onStepDrop(index)), ["stop","prevent"])
+              }, [
+                ($options.isRequired(step))
+                  ? (openBlock(), createElementBlock("span", _hoisted_9, "*"))
+                  : createCommentVNode("v-if", true),
+                createElementVNode("span", _hoisted_10, toDisplayString($options.stepTitle(step)), 1 /* TEXT */),
+                ($options.isRequired(step))
+                  ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString($props.say('required')), 1 /* TEXT */))
+                  : createCommentVNode("v-if", true),
+                ($options.badgeOf(step) > 0)
+                  ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString($options.badgeOf(step)), 1 /* TEXT */))
+                  : createCommentVNode("v-if", true)
+              ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_8)
+            ]))
+          }), 128 /* KEYED_FRAGMENT */))
+        ]))
+      : createCommentVNode("v-if", true),
+    ($props.showSteps && !$props.readOnly)
+      ? (openBlock(), createElementBlock("button", {
+          key: 2,
+          type: "button",
+          class: "cn-sm-node__add nodrag nopan",
+          onClick: _cache[10] || (_cache[10] = withModifiers($event => (_ctx.$emit('add-step')), ["stop"])),
+          onKeydown: _cache[11] || (_cache[11] = withModifiers(() => {}, ["stop"])),
+          onMousedown: _cache[12] || (_cache[12] = withModifiers(() => {}, ["stop"])),
+          onPointerdown: _cache[13] || (_cache[13] = withModifiers(() => {}, ["stop"]))
+        }, [
+          createVNode(_component_Plus, { size: 16 }),
+          createElementVNode("span", null, toDisplayString($props.say('addStep')), 1 /* TEXT */)
+        ], 32 /* NEED_HYDRATION */))
+      : createCommentVNode("v-if", true)
+  ], 2 /* CLASS */))
+}
+
+export { render };
+//# sourceMappingURL=CnStateMachineNode.vue3.js.map

package/dist/esm/components/CnStateMachineEditor/CnStateMachineNode.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnStateMachineNode.vue3.js","sources":["../../../../src/components/CnStateMachineEditor/CnStateMachineNode.vue?vue&type=template&id=5d910d3c&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>\n  - SPDX-License-Identifier: EUPL-1.2\n  -->\n<template>\n\t<div class=\"cn-sm-node\" :class=\"{ 'cn-sm-node--final': final }\">\n\t\t<div class=\"cn-sm-node__header\">\n\t\t\t<span class=\"cn-sm-node__name\">{{ label }}</span>\n\t\t\t<span\n\t\t\t\tv-if=\"showSteps && steps.length > 0\"\n\t\t\t\tclass=\"cn-sm-node__count\"\n\t\t\t\t:title=\"say('stepCount', { count: steps.length })\">\n\t\t\t\t<span aria-hidden=\"true\">{{ steps.length }}</span>\n\t\t\t\t<span class=\"cn-sm-node__sr\">{{ say('stepCount', { count: steps.length }) }}</span>\n\t\t\t</span>\n\n\t\t\t<!-- Every pointer gesture on the canvas has a menu entry here, so a\n\t\t\t     keyboard reaches all of them. Keys and pointer events stop at\n\t\t\t     this wrapper: the node's own handler would otherwise move or\n\t\t\t     remove the state on an arrow or Delete meant for the menu. -->\n\t\t\t<div\n\t\t\t\tv-if=\"!readOnly\"\n\t\t\t\tclass=\"cn-sm-node__menu nodrag nopan\"\n\t\t\t\t@keydown.stop\n\t\t\t\t@click.stop\n\t\t\t\t@mousedown.stop\n\t\t\t\t@pointerdown.stop>\n\t\t\t\t<NcActions\n\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t:inline=\"0\"\n\t\t\t\t\t:aria-label=\"say('stateActions', { name: label })\"\n\t\t\t\t\t@update:open=\"$emit('update:menuOpen', $event)\">\n\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\tv-for=\"target in connectTargets\"\n\t\t\t\t\t\t:key=\"`connect-${target.id}`\"\n\t\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t\t@click=\"$emit('connect', target.id)\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('connectTo', { name: target.label }) }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\tv-for=\"transition in outgoing\"\n\t\t\t\t\t\t:key=\"`edit-${transition.id}`\"\n\t\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t\t@click=\"$emit('edit-transition', transition.id)\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('editTransitionTo', { name: transition.targetLabel }) }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\tv-for=\"transition in outgoing\"\n\t\t\t\t\t\t:key=\"`disconnect-${transition.id}`\"\n\t\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t\t@click=\"$emit('disconnect', transition.id)\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<LinkOff :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('disconnectFrom', { name: transition.targetLabel }) }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton v-if=\"showSteps\" closeAfterClick @click=\"$emit('add-step')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('addStep') }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton closeAfterClick @click=\"$emit('delete-state')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<DeleteOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ say('deleteState') }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<span v-if=\"final\" class=\"cn-sm-node__chip\">{{ say('final') }}</span>\n\n\t\t<ul v-if=\"showSteps && steps.length > 0\" class=\"cn-sm-node__steps\">\n\t\t\t<li v-for=\"(step, index) in steps\" :key=\"step.id\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"cn-sm-node__step nodrag nopan\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'cn-sm-node__step--required': isRequired(step),\n\t\t\t\t\t\t'cn-sm-node__step--selected': step.id === selectedStepId,\n\t\t\t\t\t}\"\n\t\t\t\t\t:aria-pressed=\"step.id === selectedStepId ? 'true' : 'false'\"\n\t\t\t\t\t:draggable=\"readOnly ? 'false' : 'true'\"\n\t\t\t\t\t@click.stop=\"$emit('step-click', step.id)\"\n\t\t\t\t\t@keydown=\"onStepKeydown(index, $event)\"\n\t\t\t\t\t@mousedown.stop\n\t\t\t\t\t@pointerdown.stop\n\t\t\t\t\t@dragstart.stop=\"onStepDragStart(index, $event)\"\n\t\t\t\t\t@dragover.prevent\n\t\t\t\t\t@drop.stop.prevent=\"onStepDrop(index)\">\n\t\t\t\t\t<span v-if=\"isRequired(step)\" class=\"cn-sm-node__required\" aria-hidden=\"true\">*</span>\n\t\t\t\t\t<span class=\"cn-sm-node__step-name\">{{ stepTitle(step) }}</span>\n\t\t\t\t\t<span v-if=\"isRequired(step)\" class=\"cn-sm-node__sr\">{{ say('required') }}</span>\n\t\t\t\t\t<span v-if=\"badgeOf(step) > 0\" class=\"cn-sm-node__checks\">{{ badgeOf(step) }}</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</ul>\n\n\t\t<button\n\t\t\tv-if=\"showSteps && !readOnly\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cn-sm-node__add nodrag nopan\"\n\t\t\t@click.stop=\"$emit('add-step')\"\n\t\t\t@keydown.stop\n\t\t\t@mousedown.stop\n\t\t\t@pointerdown.stop>\n\t\t\t<Plus :size=\"16\" />\n\t\t\t<span>{{ say('addStep') }}</span>\n\t\t</button>\n\t</div>\n</template>\n\n<script>\nimport { NcActionButton, NcActions } from '@nextcloud/vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'\nimport LinkOff from 'vue-material-design-icons/LinkOff.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport { asList } from '../../utils/stateMachineValidation.js'\n\n/**\n * The body of one state on the CnStateMachineEditor canvas: its name, its\n * steps, and a menu that offers every canvas gesture from the keyboard.\n *\n * Rendered inside CnGraphCanvas's focusable node wrapper, which owns moving\n * (arrow keys), connecting (`c`) and removing (Delete) the state.\n */\nexport default {\n\tname: 'CnStateMachineNode',\n\n\tcomponents: { NcActions, NcActionButton, ArrowRight, DeleteOutline, LinkOff, Pencil, Plus },\n\n\tprops: {\n\t\t/** The state's name. */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/** Whether the state is final. */\n\t\tfinal: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** The state's steps, in order. */\n\t\tsteps: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Whether steps are part of this machine. */\n\t\tshowSteps: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/** Record keys of a step: `{ title, required, badge }`. */\n\t\tstepKeys: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ title: 'title', required: 'required', badge: '' }),\n\t\t},\n\n\t\t/** The step whose panel is open. */\n\t\tselectedStepId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** States this one has no transition to yet: `{ id, label }`. */\n\t\tconnectTargets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Transitions leaving this state: `{ id, targetLabel }`. */\n\t\toutgoing: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** Whether the actions menu is open. */\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Hide every editing control. */\n\t\treadOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Resolves an editor text by name: `(name, vars) => string`. */\n\t\tsay: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'add-step',\n\t\t'connect',\n\t\t'delete-state',\n\t\t'disconnect',\n\t\t'edit-transition',\n\t\t'step-click',\n\t\t'step-move',\n\t\t'update:menuOpen',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tdragIndex: null,\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * @param {object} step A step.\n\t\t * @return {string} Its title.\n\t\t */\n\t\tstepTitle(step) {\n\t\t\treturn step[this.stepKeys.title] || ''\n\t\t},\n\n\t\t/**\n\t\t * @param {object} step A step.\n\t\t * @return {boolean} Whether it is required.\n\t\t */\n\t\tisRequired(step) {\n\t\t\treturn this.stepKeys.required ? step[this.stepKeys.required] === true : false\n\t\t},\n\n\t\t/**\n\t\t * @param {object} step A step.\n\t\t * @return {number} The length of the list its badge counts, 0 for none.\n\t\t */\n\t\tbadgeOf(step) {\n\t\t\treturn this.stepKeys.badge ? asList(step[this.stepKeys.badge]).length : 0\n\t\t},\n\n\t\t/**\n\t\t * Keys on a step stay on the step: Alt with an arrow moves it within the\n\t\t * state, everything else is the button's own.\n\t\t *\n\t\t * @param {number} index The step's position.\n\t\t * @param {KeyboardEvent} event The key event.\n\t\t * @return {void}\n\t\t */\n\t\tonStepKeydown(index, event) {\n\t\t\tevent.stopPropagation()\n\t\t\tif (this.readOnly || event.altKey !== true) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.key === 'ArrowUp' && index > 0) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tthis.$emit('step-move', { from: index, to: index - 1 })\n\t\t\t} else if (event.key === 'ArrowDown' && index < this.steps.length - 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tthis.$emit('step-move', { from: index, to: index + 1 })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {number} index The dragged step.\n\t\t * @param {DragEvent} event The drag event.\n\t\t * @return {void}\n\t\t */\n\t\tonStepDragStart(index, event) {\n\t\t\tthis.dragIndex = index\n\t\t\tif (event.dataTransfer) {\n\t\t\t\tevent.dataTransfer.effectAllowed = 'move'\n\t\t\t\tevent.dataTransfer.setData('text/plain', String(index))\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {number} index The step dropped on.\n\t\t * @return {void}\n\t\t */\n\t\tonStepDrop(index) {\n\t\t\tif (this.dragIndex !== null && this.dragIndex !== index) {\n\t\t\t\tthis.$emit('step-move', { from: this.dragIndex, to: index })\n\t\t\t}\n\t\t\tthis.dragIndex = null\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sm-node {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n\ttext-align: start;\n}\n\n.cn-sm-node__header {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmin-width: 0;\n}\n\n.cn-sm-node__name {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\toverflow: hidden;\n\tfont-size: 14px;\n\tfont-weight: 600;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-sm-node__count {\n\tflex: none;\n\tmin-width: 20px;\n\tpadding: 0 6px;\n\tborder-radius: 10px;\n\tbackground: var(--color-primary-element, #0082c9);\n\tcolor: var(--color-primary-element-text, #fff);\n\tfont-size: 12px;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.cn-sm-node__menu {\n\tflex: none;\n\tmargin: -6px -8px -6px 0;\n}\n\n.cn-sm-node__chip {\n\talign-self: flex-start;\n\tpadding: 2px 8px;\n\tborder-radius: 10px;\n\tbackground: var(--color-success, #2d7b41);\n\tcolor: var(--color-success-text, #fff);\n\tfont-size: 12px;\n\tfont-weight: 600;\n}\n\n.cn-sm-node__steps {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0 -12px;\n\tpadding: 0;\n\tlist-style: none;\n}\n\n.cn-sm-node__step {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\twidth: 100%;\n\tmin-height: 28px;\n\tpadding: 2px 12px;\n\tborder: 0;\n\tbackground: none;\n\tcolor: var(--color-main-text, #222);\n\tfont: inherit;\n\tfont-size: 13px;\n\ttext-align: start;\n\tcursor: pointer;\n}\n\n.cn-sm-node__step:hover,\n.cn-sm-node__step--selected {\n\tbackground: var(--color-background-hover, #f5f5f5);\n}\n\n.cn-sm-node__step:focus-visible,\n.cn-sm-node__add:focus-visible {\n\toutline: 2px solid var(--color-primary-element, #0082c9);\n\toutline-offset: -2px;\n}\n\n.cn-sm-node__step--required {\n\tfont-weight: 600;\n}\n\n.cn-sm-node__required {\n\tcolor: var(--color-error-text, #c9302c);\n}\n\n.cn-sm-node__step-name {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.cn-sm-node__checks {\n\tflex: none;\n\tpadding: 0 4px;\n\tborder-radius: 4px;\n\tbackground: var(--color-background-dark, #ededed);\n\tcolor: var(--color-text-maxcontrast, #6b6b6b);\n\tfont-size: 11px;\n}\n\n.cn-sm-node__add {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tmargin: 0 -12px -8px;\n\tmin-height: 32px;\n\tpadding: 4px 12px;\n\tborder: 0;\n\tborder-top: 1px solid var(--color-border, #d0d0d0);\n\tbackground: none;\n\tcolor: var(--color-text-maxcontrast, #6b6b6b);\n\tfont: inherit;\n\tfont-size: 13px;\n\tcursor: pointer;\n}\n\n.cn-sm-node__add:hover {\n\tbackground: var(--color-background-hover, #f5f5f5);\n\tcolor: var(--color-main-text, #222);\n}\n\n.cn-sm-node__sr {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n\tclip-path: inset(50%);\n\twhite-space: nowrap;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createElementVNode","_Fragment","_renderList","_createBlock","_createVNode","_createTextVNode","_openBlock","_withModifiers"],"mappings":"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"}

package/dist/esm/components/CnStateMachineEditor/CnStateMachinePanel.vue.js

@@ -0,0 +1,9 @@
+import script from './CnStateMachinePanel.vue2.js';
+import { render } from './CnStateMachinePanel.vue3.js';
+
+script.render = render;
+script.__scopeId = "data-v-dd581f76";
+const __sfc_main = script;
+
+export { __sfc_main as default };
+//# sourceMappingURL=CnStateMachinePanel.vue.js.map

package/dist/esm/components/CnStateMachineEditor/CnStateMachinePanel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnStateMachinePanel.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}