@inf-monkeys-tech/monkeys-design 0.4.34 → 0.4.36

package/dist/styles/workflow-nodes.css

@@ -1,340 +1,340 @@
-/* Workflow 节点系统样式 - 来自 workflow-examples */
-
-.tl-container {
-	--node-shadows: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-	--node-shadow-border:
-		0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-	--node-shadow-highlight:
-		0 0 0 calc(1.2px / var(--tl-zoom)) var(--tl-color-selected), 0 2px 6px rgba(0, 0, 0, 0.08),
-		0 1px 2px rgba(0, 0, 0, 0.04);
-	/* FIX: Override tldraw's default pointer-events: none to allow Portal popovers to receive events */
-	pointer-events: auto !important;
-}
-
-.NodeShape {
-	border-radius: var(--tl-radius-3);
-	background: var(--tl-color-panel);
-	box-shadow: var(--node-shadow-border);
-	width: 100%;
-	height: fit-content;
-	display: flex;
-	flex-direction: column;
-	padding-bottom: var(--tl-space-3);
-}
-
-.NodeShape .NodeShape-heading {
-	padding: 0 var(--tl-space-4);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--tl-space-4);
-	height: 40px;
-	margin-bottom: var(--tl-space-2);
-}
-
-.NodeShape .NodeShape-label {
-	flex: 1 1 auto;
-	font-weight: 500;
-}
-
-.NodeShape .NodeShape-output {
-	font-variant-numeric: tabular-nums;
-}
-
-.NodeShape.NodeShape_executing {
-	box-shadow:
-		0 0 0 calc(2px / var(--tl-zoom)) var(--tl-color-selected),
-		0 2px 6px rgba(0, 0, 0, 0.08),
-		0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-.NodeRow {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-start;
-	height: 44px;
-	gap: var(--tl-space-4);
-	padding: var(--tl-space-2) var(--tl-space-4);
-}
-
-.NodeRow input,
-.NodeRow select {
-	align-self: stretch;
-	flex: 1 1 auto;
-	border: 1px solid var(--tl-color-hint);
-	padding: 0 var(--tl-space-4);
-	border-radius: var(--tl-radius-3);
-	background: none;
-	font: inherit;
-	outline: none;
-}
-
-.NodeRow input:focus,
-.NodeRow select:focus {
-	border-color: var(--tl-color-selected);
-}
-
-[data-state='select.idle'] .NodeRow input,
-[data-state='select.idle'] .NodeRow select {
-	pointer-events: all;
-}
-
-.NodeRow select {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	background-image: url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M6.27047 12.3161C6.6482 11.9131 7.28103 11.8927 7.68394 12.2705L15 19.1293L22.3161 12.2705C22.719 11.8927 23.3518 11.9131 23.7295 12.3161C24.1073 12.719 24.0869 13.3518 23.6839 13.7295L15.6839 21.2295C15.2993 21.5902 14.7007 21.5902 14.3161 21.2295L6.31606 13.7295C5.91315 13.3518 5.89274 12.719 6.27047 12.3161Z' fill='black'/></svg>");
-	background-repeat: no-repeat;
-	background-position: right var(--tl-space-4) center;
-	background-size: 16px;
-}
-
-.NodeInputRow .NodeInputRow-buttons {
-	display: none;
-	position: absolute;
-	right: 19px;
-}
-
-.NodeInputRow .NodeInputRow-buttons button {
-	margin-right: -8px;
-	min-width: 38px;
-	height: 38px;
-}
-
-.NodeInputRow:has(input:not(:disabled)):hover .NodeInputRow-buttons,
-.NodeInputRow:has(input:not(:disabled)):has(input:focus) .NodeInputRow-buttons {
-	display: flex;
-}
-
-.Port {
-	position: absolute;
-	width: 12px;
-	height: 12px;
-	border-radius: 50%;
-	background: var(--tl-color-panel);
-	box-sizing: border-box;
-	z-index: 2;
-	box-shadow:
-		0 0 0 1px rgba(0, 0, 0, 0.04),
-		0 1px 3px rgba(0, 0, 0, 0.12);
-	flex: 0 0 auto;
-	transition: transform 0.05s ease-in-out;
-}
-
-[data-state='select.idle'] .Port {
-	pointer-events: all;
-}
-
-.Port.Port_hinting {
-	background: var(--tl-color-selected);
-}
-
-.Port.Port_end {
-	left: -6px;
-}
-
-.Port.Port_start {
-	right: -6px;
-}
-
-.Port.Port_eligible {
-	box-shadow:
-		0 0 0 calc(1px / var(--tl-zoom)) var(--tl-color-selected),
-		0 0 0 1px rgba(0, 0, 0, 0.04),
-		0 1px 3px rgba(0, 0, 0, 0.12);
-}
-
-.ConnectionShape {
-	stroke-width: 2px;
-	stroke: var(--tl-color-text-3);
-	fill: none;
-}
-
-.ConnectionShape.ConnectionShape_realtime {
-	stroke-dasharray: 4 4;
-}
-
-.ConnectionShape.ConnectionShape_inactive {
-	stroke: var(--tl-color-hint);
-	opacity: 0.5;
-}
-
-.ConnectionShapeIndicator {
-	stroke-width: 2.1px;
-	stroke-linecap: round;
-}
-
-.ConnectionCenterHandle .ConnectionCenterHandle-hover {
-	cursor: pointer;
-	stroke: none;
-	fill: none;
-}
-
-[data-state='select.idle'] .ConnectionCenterHandle .ConnectionCenterHandle-hover {
-	pointer-events: all;
-}
-
-.ConnectionCenterHandle .ConnectionCenterHandle-hover:hover {
-	fill: var(--tl-color-selection-fill);
-}
-
-.ConnectionCenterHandle .ConnectionCenterHandle-ring {
-	stroke: none;
-	fill: var(--tl-color-selected);
-}
-
-.ConnectionCenterHandle .ConnectionCenterHandle-icon {
-	stroke-width: 2px;
-	stroke: var(--tl-color-selected-contrast);
-}
-
-.OnCanvasComponentPicker {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: var(--tl-layer-overlays);
-	--top: 66px;
-	transform-origin: 0 0;
-}
-
-.OnCanvasComponentPicker .OnCanvasComponentPicker-content {
-	position: absolute;
-	margin-top: calc(-1 * var(--top));
-	width: 150px;
-	border-radius: var(--tl-radius-3);
-	background: var(--tl-color-panel);
-	box-shadow: var(--node-shadow-highlight);
-}
-
-.OnCanvasComponentPicker .OnCanvasComponentPicker-icon {
-	font-size: 36px;
-}
-
-.OnCanvasComponentPicker.OnCanvasComponentPicker_middle .OnCanvasComponentPicker-content {
-	margin-left: -75px;
-}
-
-.ConditionalNode-output {
-	justify-content: flex-end;
-}
-
-.ConditionalNode-output-false {
-	background: var(--tl-color-muted-0);
-	border-top: 1px solid var(--tl-color-divider);
-	margin-bottom: calc(-1 * var(--tl-space-3));
-	border-bottom-left-radius: var(--tl-radius-3);
-	border-bottom-right-radius: var(--tl-radius-3);
-}
-
-.NodeValue_placeholder {
-	display: inline-block;
-	width: 18px;
-	height: 10px;
-	border-radius: 10px;
-	background: hsl(0, 0%, 0%, 10%);
-}
-
-.SliderNode .tlui-slider__container {
-	padding: 0;
-}
-
-.SliderNode .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
-	outline: none;
-}
-
-[data-state='select.idle'] .SliderNode .tlui-slider__container {
-	pointer-events: all;
-}
-
-.WorkflowRegion {
-	position: absolute;
-	color: hsl(0, 0%, 70%);
-	border: 1px dashed currentColor;
-	border-radius: var(--tl-radius-3);
-	pointer-events: none;
-}
-
-.WorkflowRegion .WorkflowRegion-button {
-	position: absolute;
-	top: 0;
-	left: -60px;
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	color: inherit;
-	background: var(--tl-color-panel);
-	border: 1px solid currentColor;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-}
-
-.tl-container[data-state='select.idle'] .WorkflowRegion .WorkflowRegion-button {
-	pointer-events: all;
-}
-
-.WorkflowRegion .WorkflowRegion-button svg {
-	color: hsl(0, 0%, 60%);
-}
-
-.WorkflowRegion::after {
-	content: '';
-	display: block;
-	width: 20px;
-	height: 0px;
-	border-bottom: 1px dashed currentColor;
-	position: absolute;
-	top: 20px;
-	left: -20px;
-}
-
-.WorkflowRegion:has(.WorkflowRegion-button:hover) {
-	color: var(--tl-color-selected);
-}
-
-.WorkflowRegion.WorkflowRegion_executing {
-	color: var(--tl-color-selected);
-	border-style: solid;
-}
-
-.WorkflowRegion.WorkflowRegion_executing::after {
-	border-bottom-style: solid;
-}
-
-.WorkflowRegion.WorkflowRegion_executing .WorkflowRegion-button {
-	border-width: 2px;
-}
-
-.WorkflowRegion.WorkflowRegion_executing .WorkflowRegion-button::after {
-	content: '';
-	width: 8px;
-	height: 4px;
-	border-radius: 100%;
-	border: 2px solid var(--tl-color-selected);
-	background: var(--tl-color-panel);
-	position: absolute;
-	animation: WorkflowRegion-button-spin 1s linear infinite;
-}
-
-@keyframes WorkflowRegion-button-spin {
-	0% {
-		transform: rotate(0deg) translateY(-19px);
-	}
-	100% {
-		transform: rotate(360deg) translateY(-19px);
-	}
-}
-
-.EarthquakeNode-message {
-	text-align: center;
-	padding: 24px 12px;
-	font-size: 12px;
-	color: #666;
-	height: 132px; /* 3 * NODE_ROW_HEIGHT_PX (3 * 44) */
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
+/* Workflow 节点系统样式 - 来自 workflow-examples */
+
+.tl-container {
+	--node-shadows: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+	--node-shadow-border:
+		0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+	--node-shadow-highlight:
+		0 0 0 calc(1.2px / var(--tl-zoom)) var(--tl-color-selected), 0 2px 6px rgba(0, 0, 0, 0.08),
+		0 1px 2px rgba(0, 0, 0, 0.04);
+	/* FIX: Override tldraw's default pointer-events: none to allow Portal popovers to receive events */
+	pointer-events: auto !important;
+}
+
+.NodeShape {
+	border-radius: var(--tl-radius-3);
+	background: var(--tl-color-panel);
+	box-shadow: var(--node-shadow-border);
+	width: 100%;
+	height: fit-content;
+	display: flex;
+	flex-direction: column;
+	padding-bottom: var(--tl-space-3);
+}
+
+.NodeShape .NodeShape-heading {
+	padding: 0 var(--tl-space-4);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--tl-space-4);
+	height: 40px;
+	margin-bottom: var(--tl-space-2);
+}
+
+.NodeShape .NodeShape-label {
+	flex: 1 1 auto;
+	font-weight: 500;
+}
+
+.NodeShape .NodeShape-output {
+	font-variant-numeric: tabular-nums;
+}
+
+.NodeShape.NodeShape_executing {
+	box-shadow:
+		0 0 0 calc(2px / var(--tl-zoom)) var(--tl-color-selected),
+		0 2px 6px rgba(0, 0, 0, 0.08),
+		0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.NodeRow {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	height: 44px;
+	gap: var(--tl-space-4);
+	padding: var(--tl-space-2) var(--tl-space-4);
+}
+
+.NodeRow input,
+.NodeRow select {
+	align-self: stretch;
+	flex: 1 1 auto;
+	border: 1px solid var(--tl-color-hint);
+	padding: 0 var(--tl-space-4);
+	border-radius: var(--tl-radius-3);
+	background: none;
+	font: inherit;
+	outline: none;
+}
+
+.NodeRow input:focus,
+.NodeRow select:focus {
+	border-color: var(--tl-color-selected);
+}
+
+[data-state='select.idle'] .NodeRow input,
+[data-state='select.idle'] .NodeRow select {
+	pointer-events: all;
+}
+
+.NodeRow select {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-image: url("data:image/svg+xml;utf8,<svg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M6.27047 12.3161C6.6482 11.9131 7.28103 11.8927 7.68394 12.2705L15 19.1293L22.3161 12.2705C22.719 11.8927 23.3518 11.9131 23.7295 12.3161C24.1073 12.719 24.0869 13.3518 23.6839 13.7295L15.6839 21.2295C15.2993 21.5902 14.7007 21.5902 14.3161 21.2295L6.31606 13.7295C5.91315 13.3518 5.89274 12.719 6.27047 12.3161Z' fill='black'/></svg>");
+	background-repeat: no-repeat;
+	background-position: right var(--tl-space-4) center;
+	background-size: 16px;
+}
+
+.NodeInputRow .NodeInputRow-buttons {
+	display: none;
+	position: absolute;
+	right: 19px;
+}
+
+.NodeInputRow .NodeInputRow-buttons button {
+	margin-right: -8px;
+	min-width: 38px;
+	height: 38px;
+}
+
+.NodeInputRow:has(input:not(:disabled)):hover .NodeInputRow-buttons,
+.NodeInputRow:has(input:not(:disabled)):has(input:focus) .NodeInputRow-buttons {
+	display: flex;
+}
+
+.Port {
+	position: absolute;
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	background: var(--tl-color-panel);
+	box-sizing: border-box;
+	z-index: 2;
+	box-shadow:
+		0 0 0 1px rgba(0, 0, 0, 0.04),
+		0 1px 3px rgba(0, 0, 0, 0.12);
+	flex: 0 0 auto;
+	transition: transform 0.05s ease-in-out;
+}
+
+[data-state='select.idle'] .Port {
+	pointer-events: all;
+}
+
+.Port.Port_hinting {
+	background: var(--tl-color-selected);
+}
+
+.Port.Port_end {
+	left: -6px;
+}
+
+.Port.Port_start {
+	right: -6px;
+}
+
+.Port.Port_eligible {
+	box-shadow:
+		0 0 0 calc(1px / var(--tl-zoom)) var(--tl-color-selected),
+		0 0 0 1px rgba(0, 0, 0, 0.04),
+		0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.ConnectionShape {
+	stroke-width: 2px;
+	stroke: var(--tl-color-text-3);
+	fill: none;
+}
+
+.ConnectionShape.ConnectionShape_realtime {
+	stroke-dasharray: 4 4;
+}
+
+.ConnectionShape.ConnectionShape_inactive {
+	stroke: var(--tl-color-hint);
+	opacity: 0.5;
+}
+
+.ConnectionShapeIndicator {
+	stroke-width: 2.1px;
+	stroke-linecap: round;
+}
+
+.ConnectionCenterHandle .ConnectionCenterHandle-hover {
+	cursor: pointer;
+	stroke: none;
+	fill: none;
+}
+
+[data-state='select.idle'] .ConnectionCenterHandle .ConnectionCenterHandle-hover {
+	pointer-events: all;
+}
+
+.ConnectionCenterHandle .ConnectionCenterHandle-hover:hover {
+	fill: var(--tl-color-selection-fill);
+}
+
+.ConnectionCenterHandle .ConnectionCenterHandle-ring {
+	stroke: none;
+	fill: var(--tl-color-selected);
+}
+
+.ConnectionCenterHandle .ConnectionCenterHandle-icon {
+	stroke-width: 2px;
+	stroke: var(--tl-color-selected-contrast);
+}
+
+.OnCanvasComponentPicker {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: var(--tl-layer-overlays);
+	--top: 66px;
+	transform-origin: 0 0;
+}
+
+.OnCanvasComponentPicker .OnCanvasComponentPicker-content {
+	position: absolute;
+	margin-top: calc(-1 * var(--top));
+	width: 150px;
+	border-radius: var(--tl-radius-3);
+	background: var(--tl-color-panel);
+	box-shadow: var(--node-shadow-highlight);
+}
+
+.OnCanvasComponentPicker .OnCanvasComponentPicker-icon {
+	font-size: 36px;
+}
+
+.OnCanvasComponentPicker.OnCanvasComponentPicker_middle .OnCanvasComponentPicker-content {
+	margin-left: -75px;
+}
+
+.ConditionalNode-output {
+	justify-content: flex-end;
+}
+
+.ConditionalNode-output-false {
+	background: var(--tl-color-muted-0);
+	border-top: 1px solid var(--tl-color-divider);
+	margin-bottom: calc(-1 * var(--tl-space-3));
+	border-bottom-left-radius: var(--tl-radius-3);
+	border-bottom-right-radius: var(--tl-radius-3);
+}
+
+.NodeValue_placeholder {
+	display: inline-block;
+	width: 18px;
+	height: 10px;
+	border-radius: 10px;
+	background: hsl(0, 0%, 0%, 10%);
+}
+
+.SliderNode .tlui-slider__container {
+	padding: 0;
+}
+
+.SliderNode .tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {
+	outline: none;
+}
+
+[data-state='select.idle'] .SliderNode .tlui-slider__container {
+	pointer-events: all;
+}
+
+.WorkflowRegion {
+	position: absolute;
+	color: hsl(0, 0%, 70%);
+	border: 1px dashed currentColor;
+	border-radius: var(--tl-radius-3);
+	pointer-events: none;
+}
+
+.WorkflowRegion .WorkflowRegion-button {
+	position: absolute;
+	top: 0;
+	left: -60px;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	color: inherit;
+	background: var(--tl-color-panel);
+	border: 1px solid currentColor;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.tl-container[data-state='select.idle'] .WorkflowRegion .WorkflowRegion-button {
+	pointer-events: all;
+}
+
+.WorkflowRegion .WorkflowRegion-button svg {
+	color: hsl(0, 0%, 60%);
+}
+
+.WorkflowRegion::after {
+	content: '';
+	display: block;
+	width: 20px;
+	height: 0px;
+	border-bottom: 1px dashed currentColor;
+	position: absolute;
+	top: 20px;
+	left: -20px;
+}
+
+.WorkflowRegion:has(.WorkflowRegion-button:hover) {
+	color: var(--tl-color-selected);
+}
+
+.WorkflowRegion.WorkflowRegion_executing {
+	color: var(--tl-color-selected);
+	border-style: solid;
+}
+
+.WorkflowRegion.WorkflowRegion_executing::after {
+	border-bottom-style: solid;
+}
+
+.WorkflowRegion.WorkflowRegion_executing .WorkflowRegion-button {
+	border-width: 2px;
+}
+
+.WorkflowRegion.WorkflowRegion_executing .WorkflowRegion-button::after {
+	content: '';
+	width: 8px;
+	height: 4px;
+	border-radius: 100%;
+	border: 2px solid var(--tl-color-selected);
+	background: var(--tl-color-panel);
+	position: absolute;
+	animation: WorkflowRegion-button-spin 1s linear infinite;
+}
+
+@keyframes WorkflowRegion-button-spin {
+	0% {
+		transform: rotate(0deg) translateY(-19px);
+	}
+	100% {
+		transform: rotate(360deg) translateY(-19px);
+	}
+}
+
+.EarthquakeNode-message {
+	text-align: center;
+	padding: 24px 12px;
+	font-size: 12px;
+	color: #666;
+	height: 132px; /* 3 * NODE_ROW_HEIGHT_PX (3 * 44) */
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+