@pipelex/mthds-ui 0.31.0 → 0.33.0

package/dist/standalone/graph-viewer.css

@@ -730,6 +730,19 @@ svg.react-flow__connectionline {
   inset: 0;
   background: var(--color-bg);
 }
+/* The still presentation (`GraphViewer`'s `interactive={false}`): the drawing
+   is laid in the page like a picture. The container flows in its parent at the
+   height `StillFit` sets inline rather than filling a sized parent, shows the
+   host's surface through it, and takes no pointer event, so a click or the
+   wheel reaches the page beneath. `GraphViewer` also makes it `inert`, which no
+   descendant's own `pointer-events: auto` (a fold button's) can override. */
+.react-flow-container--still {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  background: transparent;
+  pointer-events: none;
+}
 .react-flow__node {
   font-family: var(--font-sans);
   cursor: pointer;
@@ -962,6 +975,22 @@ svg.react-flow__connectionline {
   background: var(--pipe-card-accent);
   color: var(--text-on-accent);
 }
+/* A document step's format, beside its badge: outlined in the badge's accent so
+   it reads as a qualifier of the type, and the badge's height so the header's
+   height does not change, since the layout sizes the card without it. */
+.pipe-card-format {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border: 1px solid var(--pipe-card-accent);
+  border-radius: 4px;
+  white-space: nowrap;
+  line-height: 1.4;
+  color: var(--pipe-card-accent);
+  flex-shrink: 0;
+}
 .pipe-card-code {
   font-family: var(--font-mono);
   font-size: 13px;
@@ -2383,6 +2412,15 @@ button.node-validation-badge {
 .react-flow__node-simpleFrame {
   cursor: default !important;
 }
+
+/* An edge label's backing (`simpleStyle.ts`), dropped in the still
+   presentation so the host's surface shows through: the layout reserves each
+   label's box beside its arrow, so no line runs under the text. The detailed
+   style keeps its backing, which is what hides a dashed batch edge behind its
+   label. */
+.react-flow-container--still {
+  --simple-edge-label-bg: transparent;
+}
 .simple-handle.react-flow__handle {
   opacity: 0;
   border: none;