@flowdular/sdk 0.1.0

package/modules/workflows/src/client/workflows.css

@@ -0,0 +1,899 @@
+/* Workflow canvas is the one module-specific visual composite. Shared controls,
+   forms, cards, tables, tags and dialogs still come from @flowdular/sdk/ui. */
+
+.workflow-editor-view {
+	max-width: none;
+	--workflow-space: calc(var(--control-h) / 3);
+	display: flex;
+	flex-direction: column;
+	gap: var(--workflow-space);
+	height: calc(100dvh - var(--topbar-h) - var(--content-pad) * 2);
+	min-height: calc(var(--control-h) * 15);
+}
+
+.workflow-definition-bar,
+.workflow-panel-head--row,
+.workflow-connection-summary,
+.workflow-mapping-row,
+.workflow-run-actions,
+.workflow-history-more {
+	display: flex;
+	align-items: center;
+}
+
+.workflow-definition-bar {
+	gap: 12px;
+	padding: 12px 16px;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: var(--shadow-sm);
+}
+
+.workflow-definition-bar label {
+	display: grid;
+	flex: 0 1 calc(var(--control-h) * 8);
+	gap: 4px;
+	min-width: 0;
+}
+
+.workflow-definition-bar__description {
+	flex-grow: 1 !important;
+}
+
+.workflow-definition-bar > small {
+	margin-left: auto;
+	color: var(--ink-3);
+	white-space: nowrap;
+}
+
+.workflow-revision-review {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 14px;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: var(--shadow-sm);
+}
+
+.workflow-revision-review__changes {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.workflow-builder {
+	position: relative;
+	flex: 1;
+	min-height: 0;
+	min-width: 0;
+}
+
+.workflow-palette,
+.workflow-inspector,
+.workflow-canvas-card,
+.workflow-panel,
+.workflow-outline,
+.workflow-run-inspector {
+	min-width: 0;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: var(--shadow-sm);
+}
+
+.workflow-panel-head {
+	display: grid;
+	gap: 2px;
+	padding: 12px 14px;
+	border-bottom: 1px solid var(--line-2);
+}
+
+.workflow-panel-head--row {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.workflow-panel-head small {
+	color: var(--ink-3);
+}
+
+.workflow-palette__items {
+	display: grid;
+	gap: 4px;
+	padding: 8px;
+}
+
+.workflow-palette__item,
+.workflow-outline__item {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: 8px;
+	padding: 9px 10px;
+	text-align: left;
+	color: var(--ink-2);
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: var(--r);
+	transition:
+		background var(--t-fast) var(--ease),
+		border-color var(--t-fast) var(--ease),
+		color var(--t-fast) var(--ease);
+}
+
+.workflow-palette__item span {
+	flex: 1;
+}
+.workflow-menu-heading {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: calc(var(--control-h) / 6) calc(var(--control-h) / 3);
+	color: var(--ink-3);
+	font-size: var(--text-sm);
+}
+.workflow-palette-inline .workflow-palette__items {
+	grid-template-columns: minmax(0, 1fr);
+}
+.workflow-palette__item {
+	font: inherit;
+	cursor: pointer;
+}
+
+.workflow-palette__item:hover:not(:disabled),
+.workflow-outline__item:hover,
+.workflow-outline__item.is-selected {
+	color: var(--primary);
+	background: var(--primary-tint);
+	border-color: var(--primary-soft);
+}
+
+.workflow-palette__item:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.workflow-canvas {
+	position: relative;
+	height: 100%;
+	overflow: hidden;
+	touch-action: none;
+	cursor: grab;
+	background-color: var(--surface-2);
+	background-image:
+		linear-gradient(var(--line-2) 1px, transparent 1px),
+		linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
+	background-size: var(--control-h) var(--control-h);
+	border-radius: var(--r-lg);
+	contain: layout paint;
+}
+
+.workflow-canvas__edges {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+	pointer-events: none;
+}
+
+.workflow-edge {
+	stroke: var(--primary);
+	fill: none;
+	stroke-width: 2;
+	vector-effect: non-scaling-stroke;
+	pointer-events: stroke;
+	cursor: pointer;
+	transition:
+		stroke var(--t-base) var(--ease),
+		opacity var(--t-base) var(--ease);
+}
+
+.workflow-edge.is-selected,
+.workflow-edge.is-emitted {
+	stroke: var(--primary);
+	stroke-width: 3;
+}
+
+.workflow-edge.is-emitted {
+	stroke-dasharray: 8 6;
+	animation: workflow-edge-flow 1s linear infinite;
+}
+
+.workflow-edge.is-closed,
+.workflow-edge.is-skipped {
+	opacity: 0.28;
+}
+
+@keyframes workflow-edge-flow {
+	to {
+		stroke-dashoffset: -14;
+	}
+}
+
+.workflow-node {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: calc(var(--control-h) * 6);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-md);
+	box-shadow: var(--shadow-sm);
+	pointer-events: auto;
+	cursor: default;
+	transition:
+		border-color var(--t-fast) var(--ease),
+		box-shadow var(--t-fast) var(--ease);
+}
+
+.workflow-node.is-selected,
+.workflow-node.is-running,
+.workflow-node.is-waiting-child {
+	border-color: var(--primary);
+	box-shadow: 0 0 0 2px var(--primary-soft);
+}
+
+.workflow-node.is-succeeded {
+	border-color: var(--success-line);
+}
+
+.workflow-node.is-failed,
+.workflow-node.is-refused {
+	border-color: var(--danger-line);
+}
+
+.workflow-node__head {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	min-width: 0;
+	padding: 8px;
+	border-bottom: 1px solid var(--line-2);
+	touch-action: none;
+	cursor: grab;
+}
+
+.workflow-node__select {
+	flex: 1;
+	min-width: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--ink);
+	font: inherit;
+	text-align: left;
+	cursor: inherit;
+}
+
+.workflow-node__drag {
+	display: grid;
+	width: var(--button-h);
+	height: var(--button-h);
+	flex: 0 0 auto;
+	place-items: center;
+	color: var(--ink-3);
+	background: transparent;
+	border: 0;
+	border-radius: var(--r);
+	cursor: grab;
+}
+
+.workflow-node__drag:active {
+	cursor: grabbing;
+}
+
+.workflow-node__ports {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+	gap: 8px;
+	padding: 8px;
+}
+
+.workflow-node__port-list {
+	display: grid;
+	align-content: start;
+	gap: 4px;
+}
+
+.workflow-node__port-list--output {
+	justify-items: end;
+}
+
+.workflow-port {
+	display: flex;
+	align-items: center;
+	gap: calc(var(--control-h) / 6);
+	max-width: 100%;
+	padding: 3px 6px;
+	overflow: hidden;
+	font-family: var(--font-mono);
+	font-size: var(--text-sm);
+	color: var(--ink-3);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	background: var(--surface-2);
+	border: 1px solid var(--line-2);
+	border-radius: var(--r-sm);
+}
+
+.workflow-port--input {
+	justify-self: start;
+}
+
+.workflow-port--output {
+	justify-self: end;
+}
+
+.workflow-port:hover:not(:disabled),
+.workflow-port.is-connecting {
+	color: var(--primary);
+	background: var(--primary-tint);
+	border-color: var(--primary);
+}
+
+.workflow-inspector__body,
+.workflow-panel__body {
+	display: grid;
+	gap: 12px;
+	padding: 14px;
+}
+
+.workflow-connection-summary {
+	gap: 8px;
+	overflow-wrap: anywhere;
+}
+
+.workflow-mapping-list,
+.workflow-mapping-form {
+	display: grid;
+	gap: 6px;
+}
+
+.workflow-policy-grid {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 8px;
+}
+
+.workflow-mapping-row {
+	justify-content: space-between;
+	gap: 8px;
+	padding: 6px 8px;
+	background: var(--surface-2);
+	border-radius: var(--r);
+}
+
+.workflow-outline {
+	display: block;
+}
+
+.workflow-outline ol,
+.workflow-events ol,
+.workflow-issue-list {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+.workflow-outline ol {
+	display: grid;
+	gap: 4px;
+	padding: 8px;
+}
+
+.workflow-outline__item > .num {
+	display: grid;
+	width: var(--button-h);
+	height: var(--button-h);
+	place-items: center;
+	background: var(--surface-2);
+	border-radius: var(--r);
+}
+
+.workflow-outline__item .ui-cell {
+	flex: 1;
+}
+
+.workflow-lower-grid,
+.workflow-evidence-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12px;
+	align-items: start;
+}
+
+.workflow-validation-summary,
+.workflow-evidence-grid > div {
+	display: grid;
+	gap: 6px;
+}
+
+.workflow-validation-list {
+	display: grid;
+	gap: 6px;
+}
+
+.workflow-validation-list > span {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.workflow-issue-list {
+	display: grid;
+	gap: 6px;
+}
+
+.workflow-issue-list li {
+	display: flex;
+	align-items: start;
+	gap: 8px;
+	padding: 8px;
+	background: var(--surface-2);
+	border-radius: var(--r);
+}
+
+.workflow-test-actions {
+	flex-wrap: wrap;
+}
+
+.workflow-fixture-summary {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 10px 12px;
+	background: var(--surface-2);
+	border: 1px solid var(--line-2);
+	border-radius: var(--r);
+}
+
+.workflow-fixture-list {
+	display: grid;
+	gap: 12px;
+}
+
+.workflow-fixture-card {
+	display: grid;
+	gap: 12px;
+	padding: 12px;
+	border: 1px solid var(--line-2);
+	border-radius: var(--r);
+}
+
+.workflow-fixture-card__grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 10px;
+}
+
+.workflow-run-metrics {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	border-bottom: 1px solid var(--line-2);
+}
+
+.workflow-run-metrics > span {
+	display: grid;
+	gap: 2px;
+	padding: 10px 14px;
+	border-right: 1px solid var(--line-2);
+}
+
+.workflow-run-metrics > span:last-child {
+	border-right: 0;
+}
+
+.workflow-run-metrics small,
+.workflow-events small {
+	color: var(--ink-3);
+}
+
+.workflow-evidence-grid {
+	padding: 14px;
+	border-bottom: 1px solid var(--line-2);
+}
+
+.workflow-node-evidence {
+	border-bottom: 1px solid var(--line-2);
+}
+
+.workflow-node-evidence .workflow-evidence-grid {
+	border-bottom: 0;
+}
+
+.workflow-node-evidence__empty {
+	padding: 12px 14px;
+	margin: 0;
+	color: var(--ink-3);
+}
+
+.workflow-live-summary {
+	display: grid;
+	gap: 10px;
+	margin-top: 10px;
+}
+
+.workflow-live-summary__section {
+	display: grid;
+	gap: 4px;
+}
+
+.workflow-live-summary__section > small {
+	color: var(--ink-3);
+}
+
+.workflow-evidence-grid .ui-code {
+	max-height: calc(var(--control-h) * 6);
+	overflow: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.workflow-events {
+	padding: 12px 14px;
+	border-bottom: 1px solid var(--line-2);
+}
+
+.workflow-events summary {
+	cursor: pointer;
+	font-weight: 600;
+}
+
+.workflow-events ol {
+	display: grid;
+	gap: 6px;
+	margin-top: 10px;
+}
+
+.workflow-events li {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	gap: 8px;
+	align-items: center;
+}
+
+.workflow-run-actions,
+.workflow-history-more {
+	justify-content: flex-end;
+	padding: 12px 14px;
+}
+
+.workflow-run-head-actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+@media (max-width: 1000px) {
+	.workflow-builder {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.workflow-palette__items {
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(calc(var(--control-h) * 4), 1fr)
+		);
+	}
+
+	.workflow-outline {
+		display: block;
+	}
+
+	.workflow-lower-grid,
+	.workflow-evidence-grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.workflow-definition-bar {
+		align-items: stretch;
+		flex-direction: column;
+	}
+
+	.workflow-definition-bar label {
+		flex-basis: auto;
+	}
+
+	.workflow-definition-bar > small {
+		margin-left: 0;
+	}
+}
+
+@media (max-width: 640px) {
+	.workflow-revision-review {
+		align-items: start;
+		flex-direction: column;
+	}
+
+	.workflow-fixture-card__grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.workflow-policy-grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.workflow-run-metrics {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.workflow-run-metrics > span:nth-child(2) {
+		border-right: 0;
+	}
+}
+.workflow-tool-grants {
+	display: grid;
+	gap: 8px;
+}
+
+.workflow-tool-grant {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+/* Promotion candidates: graph viewport controls and collapsible work panels. */
+.workflow-canvas__stage {
+	position: absolute;
+	inset: 0;
+	transform-origin: 0 0;
+	pointer-events: none;
+}
+
+.workflow-canvas-controls,
+.workflow-connection-hint {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: calc(var(--control-h) / 6);
+}
+
+.workflow-canvas-card {
+	position: absolute;
+	inset: 0;
+}
+.workflow-canvas-controls {
+	position: absolute;
+	bottom: var(--workflow-space);
+	left: var(--workflow-space);
+	z-index: 2;
+	padding: calc(var(--workflow-space) / 2);
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: var(--shadow-sm);
+}
+.workflow-add-control {
+	position: absolute;
+	top: var(--workflow-space);
+	left: var(--workflow-space);
+	z-index: 3;
+	display: grid;
+	gap: var(--workflow-space);
+	max-height: calc(100% - var(--workflow-space) * 2);
+	max-width: calc(100% - var(--workflow-space) * 2);
+}
+.workflow-add-control .workflow-palette {
+	overflow: auto;
+	width: calc(var(--control-h) * 8);
+	max-width: 100%;
+}
+.workflow-floating-inspector,
+.workflow-context-palette {
+	position: absolute;
+	z-index: 4;
+	top: var(--workflow-space);
+	right: var(--workflow-space);
+	width: min(
+		calc(var(--control-h) * 12),
+		calc(100% - var(--workflow-space) * 2)
+	);
+	max-height: calc(100% - var(--workflow-space) * 2);
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	box-shadow: var(--shadow-md);
+	animation: workflow-panel-enter var(--t-base) var(--ease);
+}
+.workflow-context-palette {
+	z-index: 5;
+	right: auto;
+	width: min(
+		calc(var(--control-h) * 8),
+		calc(100% - var(--workflow-space) * 2)
+	);
+}
+.workflow-floating-inspector > .workflow-panel-head {
+	position: sticky;
+	top: 0;
+	z-index: 1;
+	background: var(--surface);
+}
+.workflow-drawer-stack {
+	display: grid;
+	align-content: start;
+	gap: var(--workflow-space, calc(var(--control-h) / 3));
+}
+.workflow-drawer-stack .workflow-definition-bar {
+	flex-direction: column;
+	align-items: stretch;
+}
+.workflow-drawer-stack .workflow-definition-bar label {
+	flex-basis: auto;
+}
+.workflow-floating-inspector .workflow-policy-grid {
+	grid-template-columns: minmax(0, 1fr);
+}
+@keyframes workflow-panel-enter {
+	from {
+		opacity: 0;
+		transform: translateY(calc(var(--control-h) / -4));
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.workflow-connection-hint {
+	position: absolute;
+	bottom: calc(var(--control-h) * 2);
+	left: var(--workflow-space);
+	z-index: 2;
+	max-width: calc(100% - var(--workflow-space) * 2);
+	border-radius: var(--r);
+	justify-content: space-between;
+	padding: var(--workflow-space);
+	background: var(--primary-tint);
+	color: var(--ink-2);
+}
+
+/* Module-local pointer picker. Uses shared tokens without overriding UI classes. */
+.workflow-pointer {
+	display: grid;
+	gap: calc(var(--control-h) / 6);
+	min-width: 0;
+}
+.workflow-pointer__control {
+	display: flex;
+	gap: calc(var(--control-h) / 6);
+	min-width: 0;
+}
+.workflow-pointer__control > input {
+	min-width: 0;
+	flex: 1;
+}
+.workflow-pointer__picker {
+	border: 1px solid var(--line);
+	border-radius: var(--r);
+	background: var(--surface);
+	padding: calc(var(--control-h) / 6);
+}
+.workflow-pointer__list {
+	max-height: calc(var(--control-h) * 7);
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+.workflow-pointer__option {
+	display: grid;
+	gap: calc(var(--control-h) / 10);
+	width: 100%;
+	text-align: left;
+	border: 0;
+	border-radius: var(--r);
+	padding: calc(var(--control-h) / 4);
+	color: var(--ink);
+	background: transparent;
+	font: inherit;
+	cursor: pointer;
+	overflow-wrap: anywhere;
+}
+.workflow-pointer__option[aria-selected='true'] {
+	background: var(--primary-tint);
+}
+.workflow-pointer__option small {
+	color: var(--ink-3);
+}
+.workflow-pointer__title {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: calc(var(--control-h) / 4);
+}
+.workflow-pointer__title > small {
+	flex-shrink: 0;
+}
+
+.workflow-port__dot {
+	width: calc(var(--control-h) / 4);
+	height: calc(var(--control-h) / 4);
+	flex: 0 0 auto;
+	border: 1px solid var(--primary);
+	border-radius: 50%;
+}
+
+.workflow-port--output .workflow-port__dot {
+	background: var(--primary);
+}
+
+.workflow-port--success .workflow-port__dot {
+	background: var(--success);
+	border-color: var(--success);
+}
+
+.workflow-port--failure .workflow-port__dot {
+	background: var(--danger);
+	border-color: var(--danger);
+}
+
+.workflow-edge--success {
+	stroke: var(--success);
+}
+.workflow-edge--failure {
+	stroke: var(--danger);
+}
+.workflow-edge--preview {
+	stroke-dasharray: 6 4;
+	pointer-events: none;
+}
+.workflow-port.is-target {
+	border-color: var(--primary);
+	box-shadow: 0 0 0 2px var(--primary-soft);
+}
+.workflow-port.is-invalid {
+	border-color: var(--danger);
+	background: var(--danger-bg);
+}
+
+.workflow-disclosure {
+	min-width: 0;
+	border: 1px solid var(--line);
+	border-radius: var(--r-lg);
+	background: var(--surface);
+}
+.workflow-disclosure > summary {
+	padding: calc(var(--control-h) / 2);
+	font-weight: 600;
+	cursor: pointer;
+	color: var(--ink-2);
+}
+.workflow-disclosure__body {
+	padding: 0 calc(var(--control-h) / 2) calc(var(--control-h) / 2);
+	min-width: 0;
+}
+.workflow-inspector {
+	border: 0;
+	box-shadow: none;
+}
+.workflow-panel__body {
+	align-content: start;
+}
+.workflow-revision-review__changes,
+.workflow-fixture-summary {
+	flex-wrap: wrap;
+}
+.workflow-panel-head small,
+.workflow-definition-bar small {
+	overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.workflow-edge.is-emitted {
+		animation: none;
+	}
+	.workflow-floating-inspector,
+	.workflow-context-palette {
+		animation: none;
+	}
+}