@pipelex/mthds-ui 0.29.1 → 0.30.1

package/dist/standalone/graph-viewer.css

@@ -2245,6 +2245,555 @@ button.node-validation-badge {
   font-weight: 600;
 }
 
+/* ─── Style menu ────────────────────────────────────────────────────────── */
+/* A list of the registered styles, opened from the toolbar. Placement      */
+/* follows the toolbar's anchor with the validation dropdown's vocabulary. */
+
+.graph-toolbar-style {
+  position: relative;
+  display: inline-flex;
+}
+
+.graph-toolbar-btn--open {
+  background: var(--surface-overlay-hover);
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+}
+
+.graph-style-menu {
+  position: absolute;
+  z-index: 12;
+  width: max-content;
+  min-width: min(240px, calc(100vw - 24px));
+  max-width: min(320px, calc(100vw - 24px));
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 8px;
+  background: var(--surface-overlay);
+  border: 1px solid var(--border-default);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(6px);
+  pointer-events: auto;
+  font-family: var(--font-sans);
+  cursor: default;
+}
+.graph-style-menu--down-start {
+  top: calc(100% + 6px);
+  left: 0;
+}
+.graph-style-menu--down-end {
+  top: calc(100% + 6px);
+  right: 0;
+}
+.graph-style-menu--up-start {
+  bottom: calc(100% + 6px);
+  left: 0;
+}
+.graph-style-menu--up-end {
+  bottom: calc(100% + 6px);
+  right: 0;
+}
+.graph-style-menu--side-end {
+  left: calc(100% + 6px);
+  top: 0;
+}
+.graph-style-menu--side-start {
+  right: calc(100% + 6px);
+  top: 0;
+}
+
+.graph-style-menu-item {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 7px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary);
+}
+.graph-style-menu-item:hover,
+.graph-style-menu-item:focus-visible {
+  background: var(--surface-elevated-hover);
+  color: var(--text-primary);
+}
+.graph-style-menu-item:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+.graph-style-menu-item--checked {
+  color: var(--text-primary);
+}
+.graph-style-menu-icon {
+  display: inline-flex;
+  padding-top: 1px;
+  color: var(--text-muted);
+}
+.graph-style-menu-item--checked .graph-style-menu-icon {
+  color: var(--color-accent);
+}
+.graph-style-menu-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex: 1;
+  min-width: 0;
+}
+.graph-style-menu-name {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 16px;
+}
+.graph-style-menu-description {
+  font-size: 11.5px;
+  line-height: 15px;
+  color: var(--text-muted);
+}
+.graph-style-menu-check {
+  display: inline-flex;
+  width: 14px;
+  padding-top: 1px;
+  color: var(--color-accent);
+}
+
+/* ─── Simple style — a flowchart of the method's steps in plain words ───── */
+/* Token-only, like every component sheet here: the palette tokens on         */
+/* `.react-flow-container` theme it. The box metrics mirror the constants in  */
+/* `src/graph/styles/simpleStyle.ts`, which size the nodes for the layout     */
+/* before the DOM exists: change them together.                               */
+
+/* ReactFlow wrappers: the shapes draw themselves, selection included. */
+.react-flow__node-simpleStep,
+.react-flow__node-simpleTerminal,
+.react-flow__node-simpleDecision,
+.react-flow__node-simpleFrame {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+.react-flow__node-simpleStep.selected,
+.react-flow__node-simpleTerminal.selected,
+.react-flow__node-simpleDecision.selected,
+.react-flow__node-simpleFrame.selected {
+  box-shadow: none !important;
+}
+.react-flow__node-simpleFrame {
+  cursor: default !important;
+}
+.simple-handle.react-flow__handle {
+  opacity: 0;
+  border: none;
+  width: 1px;
+  height: 1px;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ─── Step ──────────────────────────────────────────────────────────────── */
+
+.simple-step {
+  --simple-step-accent: var(--text-muted);
+  --simple-step-border: var(--border-strong);
+  --simple-step-bg: var(--surface-panel);
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-radius: 10px;
+  border: 1.5px solid var(--simple-step-border);
+  background: var(--simple-step-bg);
+  box-shadow: var(--shadow-sm);
+  font-family: var(--font-sans);
+  overflow: hidden;
+  transition: box-shadow 0.15s;
+}
+.simple-step:hover {
+  box-shadow: var(--shadow-md);
+}
+.react-flow__node-simpleStep.selected .simple-step {
+  border-color: var(--color-accent);
+  box-shadow:
+    0 0 0 2px var(--color-accent),
+    var(--shadow-md);
+}
+
+/* The steps that carry the method's judgement stand out; plumbing recedes. */
+.simple-step--ai,
+.simple-step--judge {
+  --simple-step-accent: var(--color-accent);
+  --simple-step-border: color-mix(in srgb, var(--color-accent) 55%, transparent);
+  --simple-step-bg: color-mix(in srgb, var(--color-accent) 7%, var(--surface-panel));
+}
+.simple-step--template,
+.simple-step--code {
+  --simple-step-bg: var(--surface-sunken);
+  --simple-step-border: var(--border-default);
+}
+.simple-step--planned {
+  border-style: dashed;
+  opacity: 0.85;
+}
+/* A folded sub-method: a step that holds others, drawn as a small stack. */
+.simple-step--steps,
+.simple-step--parallel,
+.simple-step--decision,
+.simple-step--repeat {
+  --simple-step-border: var(--border-strong);
+  box-shadow:
+    3px 3px 0 -1px var(--simple-step-bg),
+    3px 3px 0 0 var(--border-default),
+    var(--shadow-sm);
+}
+.simple-step--failed {
+  --simple-step-border: var(--color-error);
+}
+
+.simple-step-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.simple-step-category {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  color: var(--simple-step-accent);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.simple-step-category svg {
+  flex-shrink: 0;
+}
+.simple-step-header .simple-status {
+  margin-left: auto;
+}
+.simple-step-header .node-validation-badge {
+  margin-left: auto;
+}
+.simple-step-header .simple-status + .node-validation-badge {
+  margin-left: 0;
+}
+
+.simple-step-title {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--text-primary);
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.simple-step--template .simple-step-title,
+.simple-step--code .simple-step-title {
+  color: var(--text-secondary);
+}
+
+.simple-step-foreach {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 18px;
+  padding: 0 7px;
+  box-sizing: border-box;
+  border-radius: 9px;
+  border: 1px solid var(--ctrl-batch-border);
+  background: var(--ctrl-batch-bg);
+  color: var(--ctrl-batch-text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.simple-step-open {
+  all: unset;
+  box-sizing: border-box;
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-default);
+  background: var(--surface-elevated);
+  color: var(--text-secondary);
+  font-family: var(--font-sans);
+  font-size: 11.5px;
+  font-weight: 500;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.simple-step-open:hover:not(:disabled) {
+  color: var(--text-primary);
+  border-color: var(--border-strong);
+  background: var(--surface-elevated-hover);
+}
+.simple-step-open:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+.simple-step-open:disabled {
+  cursor: default;
+}
+
+/* ─── Run status mark ───────────────────────────────────────────────────── */
+
+.simple-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  color: var(--text-dim);
+  border: 1.5px solid currentColor;
+  box-sizing: border-box;
+}
+.simple-status--succeeded {
+  color: var(--color-success);
+  background: var(--color-success-bg);
+}
+.simple-status--failed {
+  color: var(--color-error);
+  background: var(--color-error-bg);
+}
+.simple-status--running {
+  color: var(--color-accent);
+  border-color: transparent;
+}
+.simple-status--running svg {
+  animation: simple-status-spin 1s linear infinite;
+}
+@keyframes simple-status-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ─── Input and output ──────────────────────────────────────────────────── */
+
+.simple-terminal {
+  --simple-terminal-stroke: var(--color-stuff-border);
+  --simple-terminal-fill: var(--surface-panel);
+  --simple-terminal-tint: var(--color-stuff-bg);
+
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  font-family: var(--font-sans);
+}
+.simple-terminal--output {
+  --simple-terminal-stroke: var(--color-success);
+  --simple-terminal-tint: var(--color-success-bg);
+}
+.simple-terminal-shape {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.simple-terminal-shape path {
+  fill: var(--simple-terminal-fill);
+  stroke: var(--simple-terminal-stroke);
+  stroke-width: 1.5px;
+}
+/* The tint goes over the opaque fill so stacked pages hide what is behind them. */
+.simple-terminal > .simple-terminal-shape:not([class*="--back"]) path {
+  fill: color-mix(in srgb, var(--simple-terminal-stroke) 9%, var(--simple-terminal-fill));
+}
+.simple-terminal--output > .simple-terminal-shape:not([class*="--back"]) path {
+  stroke-width: 2px;
+}
+/* A list: the same page twice more, offset behind. */
+.simple-terminal-shape--back1 {
+  transform: translate(4px, -4px);
+}
+.simple-terminal-shape--back2 {
+  transform: translate(8px, -8px);
+}
+.react-flow__node-simpleTerminal.selected .simple-terminal-shape path {
+  stroke: var(--color-accent);
+  stroke-width: 2.5px;
+}
+.simple-terminal-text {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 10px 12px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+  text-align: center;
+}
+.simple-terminal-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 17px;
+  color: var(--text-primary);
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.simple-terminal-subtitle {
+  font-size: 11.5px;
+  line-height: 17px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Decision ──────────────────────────────────────────────────────────── */
+
+.simple-decision {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+}
+.simple-decision-shape {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.simple-decision-shape path {
+  fill: color-mix(in srgb, var(--ctrl-condition-text) 10%, var(--surface-panel));
+  stroke: var(--ctrl-condition-text);
+  stroke-width: 1.5px;
+}
+.simple-decision--failed .simple-decision-shape path {
+  stroke: var(--color-error);
+}
+.react-flow__node-simpleDecision.selected .simple-decision-shape path {
+  stroke: var(--color-accent);
+  stroke-width: 2.5px;
+}
+.simple-decision-text {
+  position: relative;
+  width: 56%;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  color: var(--text-primary);
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.simple-decision-marks {
+  position: absolute;
+  top: 6px;
+  right: 18%;
+  display: flex;
+  gap: 4px;
+}
+
+/* ─── "For each" frame ──────────────────────────────────────────────────── */
+
+.simple-frame {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 14px;
+  border: 1.5px solid var(--ctrl-batch-border);
+  background: var(--ctrl-batch-bg);
+  font-family: var(--font-sans);
+}
+/* The stacked-card edge: the same frame, offset behind — "again, for each". */
+.simple-frame::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translate(6px, 6px);
+  border-radius: 14px;
+  border: 1.5px solid var(--ctrl-batch-border);
+  opacity: 0.55;
+  z-index: -1;
+  pointer-events: none;
+}
+.react-flow__node-simpleFrame.selected .simple-frame {
+  border-color: var(--color-accent);
+}
+.simple-frame-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px;
+  pointer-events: none;
+}
+.simple-frame-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ctrl-batch-text);
+  white-space: nowrap;
+}
+.simple-frame-header .simple-status,
+.simple-frame-header .node-validation-badge {
+  pointer-events: auto;
+}
+.simple-frame-fold {
+  all: unset;
+  margin-left: auto;
+  display: inline-flex;
+  padding: 3px 6px;
+  border-radius: 6px;
+  color: var(--ctrl-batch-text);
+  cursor: pointer;
+  pointer-events: auto;
+}
+.simple-frame-fold:hover {
+  color: var(--text-primary);
+  background: var(--surface-elevated);
+}
+.simple-frame-fold:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
 /* ─── Standalone GraphViewer chrome (toolbar, theme, layout) ─────────── */
 
 * {