@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/termination-statement/termination-statement-card.css

@@ -0,0 +1,17 @@
+/* Colors */
+.dropdown-menu-card .dropdown-menu-card-option.canvas-dropdown-menu-card-option__new-thrown-error {
+  color: var(--color-main-error); /* var(--color-icon--return-statement); */
+}
+
+.dropdown-menu-card .dropdown-menu-card-option.canvas-dropdown-menu-card-option__new-thrown-error:hover,
+.dropdown-menu-card .dropdown-menu-card-option__selected.canvas-dropdown-menu-card-option__new-thrown-error {
+  color: #fff;
+}
+
+/* Disabled */
+.dropdown-menu-card .dropdown-menu-card-option.dropdown-menu-card-option__disabled,
+.dropdown-menu-card .dropdown-menu-card-option.canvas-dropdown-menu-card-option__new-thrown-error.dropdown-menu-card-option__disabled {
+  color: var(--color-light-grey);
+  cursor: not-allowed;
+  background-color: unset;
+}

package/src/components/draggable-entity-card/test-entity-button.css

@@ -0,0 +1,55 @@
+.test-entity-button {
+  border: none;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 10px;
+  cursor: pointer;
+}
+
+.test-entity-button.large {
+  height: 40px;
+  width: 40px;
+  font-size: 18px;
+  left: -45px;
+}
+
+.test-entity-button.small {
+	width: 21px;
+	height: 21px;
+  font-size: 12px;
+	left: -24px;
+}
+
+.test-entity-button.test-entity-button--internal-call.large {
+  top: 3px;
+}
+
+/* Scale size on hover except disabled, executing */
+.test-entity-button:hover:not(.disabled):not(.executing):not(.termination-statement-test-button),
+.canvas-draggable-card:not(.disabled) .test-entity-button:hover:not(:disabled):not(.termination-statement-test-button) {
+  transform: scale(1.05);
+}
+
+.termination-statement-test-button {
+  /*
+    It was meant to show that you can't execute this entity.
+    However you can click it to drag-out a new connection from it.
+    So we want the 'pointer' cursor for now.
+  */
+  /* cursor: auto; */
+}
+
+.test-entity-button.disabled:not(.executing) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.test-entity-button.executing,
+.test-entity-button.executing:hover,
+.test-entity-button.executing:disabled {
+  /* Loading mouse cursor */
+  cursor: wait;
+}

package/src/components/draggable-entity-card/test-menu.css

@@ -0,0 +1,181 @@
+.test-menu.fixed-bottom-container {
+	display: flex;
+	gap: 10px;
+	position: fixed;
+	bottom: -1000px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 1;
+}
+
+.test-menu .actions-container {
+	display: flex;
+	gap: 10px;
+}
+
+.test-menu .test-menu-button {
+	padding: 0 14px;
+	border-radius: 8px;
+	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.06);
+	border: none;
+	cursor: pointer;
+	/* max-width: 46px; */
+	height: 38px;
+}
+
+.test-menu .test-menu-button p {
+	margin: 0;
+}
+
+.test-menu .left-test-button {
+	border-radius: 8px 0 0 8px;
+}
+
+.test-menu .right-test-button {
+	border-radius: 0 8px 8px 0;
+}
+
+/* 2 pixel separator vertical bar */
+.test-menu .test-menu-button-group-separator {
+	width: 2px;
+	height: 99%;
+}
+
+.test-menu .test-menu-button-group {
+	display: flex;
+	border-radius: 8px;
+	background-color: var(--color-light-grey);
+}
+
+.test-menu .close-button {
+	background-color: var(--color-main-error);
+	color: var(--color-contrast-error);
+}
+
+.test-menu .save-button {
+	background-color: var(--color-main-primary);
+	color: var(--color-contrast-primary);
+}
+
+.test-menu .play-button {
+	position: relative;
+	background-color: var(--color-main-success);
+	width: 42px;
+}
+
+.test-menu .pause-button {
+	background-color: #F1C40F;
+	color: #000000;
+	width: 42px;
+	border-radius: 8px;
+}
+
+.test-menu .pause-button:disabled {
+	background-color: var(--color-lighter-grey);
+	color: var(--color-light-grey);
+	cursor: not-allowed;
+}
+
+.test-menu .loading-button {
+	background-color: var(--color-main-success);
+	cursor: not-allowed;
+}
+
+.test-menu .play-button:disabled {
+	background-color: var(--color-lighter-grey);
+	cursor: not-allowed;
+}
+
+.test-menu .loading-button:disabled {
+	background-color: var(--color-lighter-grey);
+}
+
+.test-menu .warning-icon {
+	position: absolute;
+	left: -6px;
+	top: -6px;
+	width: 18px;
+	height: 18px;
+}
+
+.test-menu .loading-icon-container {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	position: relative;
+	/* left: -4px; */
+	top: 1px;
+}
+
+.test-menu .resume-icon-container {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	position: relative;
+	top: 1px;
+}
+
+.test-menu .animated-checkmark {
+	width: 50px;
+	/* This styling is to center the oversized image in the button */
+	position: relative;
+	transform: translateX(-19px);
+}
+
+.test-menu .test-menu-button-label-group {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: center;
+}
+
+.test-menu .save-values-button {
+	background-color: #BC7585;
+}
+
+.test-menu .execution-delay-button {
+	background-color: #79BE73;
+}
+
+.test-menu .test-menu-button-top-label {
+	font-size: 8px;
+	text-transform: uppercase;
+	font-weight: 300;
+}
+
+.test-menu .light-secondary-label {
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.test-menu .light-main-label {
+	color: rgba(255, 255, 255);
+}
+
+.test-menu .dark-secondary-label {
+	color: rgba(0, 0, 0, 0.7);
+}
+
+.test-menu .dark-main-label {
+	color: rgba(0, 0, 0);
+}
+
+.test-menu .test-menu-button-main-label-group {
+	display: flex;
+	gap: 4px;
+	align-items: flex-end;
+}
+
+.test-menu .test-menu-button-main-label {
+	font-size: 14px;
+	font-weight: 600;
+
+}
+
+.test-menu .test-menu-button-sub-label {
+	font-size: 8px;
+	font-weight: 300;
+}

package/src/components/draggable-entity-card/unreachable-marker.css

@@ -0,0 +1,43 @@
+.unreachable-marker {
+	border: none;
+	border-radius: 20px;
+	display: flex;
+	justify-content: center;
+	position: absolute;
+	top: -26px;
+	right: 12px;
+	height: 52px;
+	padding: 8px 12px;
+	font-size: 13px;
+	font-weight: bold;
+	color: var(--color-contrast-error) !important;
+	z-index: 1;
+	background: linear-gradient(
+		to bottom,
+		var(--color-main-error) 0%,
+		var(--color-main-error) 50%,
+		transparent 50%,
+		transparent 100%
+	);
+	/* color: var(--color-main-dark-error); */
+	/* Same top-solid → bottom-transparent gradient pattern as
+	   VariableScopeMarker (which gets its color via inline style from the
+	   entity's palette). Here we hard-code the error palette because the
+	   marker's meaning is fixed — always "error / unreachable" — so the
+	   color doesn't need to vary per entity type. `--color-main-error`
+	   is the softer pink, which keeps the darker `--color-main-error` text
+	   on top legible. The bottom stop is `transparent` so the badge fades
+	   into the card header below; we'd use a `${color}00` alpha-hex like
+	   the scope marker does, but CSS vars don't concatenate that way, and
+	   `transparent` is visually indistinguishable over this short height. */
+	/* background: linear-gradient(
+		to bottom,
+		var(--color-main-error) 0%,
+		var(--color-main-error) 50%,
+		transparent 100%
+	); */
+}
+
+.unreachable-marker.disabled:not(.executing) {
+	opacity: 0.5;
+}

package/src/components/draggable-entity-card/variable-scope-marker.css

@@ -0,0 +1,22 @@
+.variable-scope-marker {
+	border: none;
+	border-radius: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	/* To place it on the top left, vertically overlapped with the entity's header */
+	top: -19px;
+	left: 12px;
+
+  height: 40px;
+	padding: 0 12px;
+	font-size: 13px;
+	font-weight: bold;
+	color: var(--color-main-primary);
+	z-index: 1;
+}
+
+.variable-scope-marker.disabled:not(.executing) {
+	opacity: 0.5;
+}