@w6w/ui 0.2.0 → 0.2.54

package/src/styles/_layout.scss

@@ -1,4 +1,14 @@
 /* Layout helpers */
+
+/* A vertical column whose direct children are cards/panels. ONE gap, from the
+   shared spacing scale — never a per-screen number and never a second gap: do
+   not add this class to a container whose parent already gaps its children. */
+.w6w-card-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-4);
+}
+
 .w6w-stack {
   display: flex;
   flex-direction: column;

package/src/styles/_markdown.scss

@@ -0,0 +1,20 @@
+/* Markdown: the leading YAML frontmatter, collapsed above the rendered body. The body itself
+   is unstyled here — the host styles it through the `className` it passes. */
+.w6w-md-frontmatter {
+  margin-bottom: var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2-5);
+  font-size: var(--w6w-fs-sm);
+}
+.w6w-md-frontmatter > summary {
+  cursor: pointer;
+  color: var(--w6w-muted);
+}
+.w6w-md-frontmatter > pre {
+  margin: var(--w6w-sp-2) 0 0;
+  overflow-x: auto;
+  font-family: var(--w6w-font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

package/src/styles/_modal.scss

@@ -123,3 +123,15 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   gap: var(--w6w-sp-1);
   flex-shrink: 0;
 }
+
+.w6w-json-customized {
+  align-self: center;
+  border: 1px solid var(--w6w-accent);
+  border-radius: var(--w6w-radius-sm, 3px);
+  padding: 3px 7px;
+  background: color-mix(in srgb, var(--w6w-accent) 8%, transparent);
+  color: var(--w6w-accent);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}

package/src/styles/_multiselect.scss

@@ -67,3 +67,38 @@
   background: var(--w6w-border);
   color: var(--w6w-text);
 }
+
+// An explicit schema hint exposes all choices as checkboxes without changing the value shape.
+.w6w-fx-wrap:has(> .w6w-multiselect-checks) { align-items: flex-start; }
+.w6w-multiselect-checks { padding: var(--w6w-sp-1) 0; }
+.w6w-multiselect-checks-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+  margin-bottom: var(--w6w-sp-2);
+}
+.w6w-multiselect-checks-options {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
+  gap: var(--w6w-sp-2) var(--w6w-sp-4);
+  max-height: 240px;
+  overflow-y: auto;
+}
+.w6w-field .w6w-multiselect-check {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  margin: 0;
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+.w6w-field .w6w-multiselect-check input[type="checkbox"] {
+  width: auto;
+  margin: 0;
+  flex-shrink: 0;
+  accent-color: var(--w6w-accent);
+}

package/src/styles/_sections.scss

@@ -33,4 +33,40 @@
   align-items: center;
   gap: var(--w6w-sp-2-5);
 }
+/* Webhook "Listen for test event": the waiting row, its pulse, and the folded manual payload. */
+.w6w-listen-waiting {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+  min-width: 0;
+  code {
+    word-break: break-all;
+  }
+}
+.w6w-listen-pulse {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--w6w-accent);
+  animation: w6w-listen-pulse 1.2s ease-in-out infinite;
+}
+@keyframes w6w-listen-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .w6w-listen-pulse {
+    animation: none;
+  }
+}
+.w6w-listen-manual > summary {
+  cursor: pointer;
+  margin-bottom: var(--w6w-sp-2);
+}
 /* A labeled test-run output block (Result vs Console). */

package/src/styles/_step-builder.scss

@@ -12,6 +12,33 @@
 }
 
 /* Step builder (sidebar + content) */
+.w6w-stepbuilder-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  height: min(70vh, 560px);
+  min-height: 0;
+  overflow: hidden;
+}
+.w6w-stepbuilder-picker > .w6w-stepbuilder-search {
+  flex-shrink: 0;
+}
+.w6w-stepbuilder-picker > .w6w-stepbuilder {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.w6w-stepbuilder-picker .w6w-stepbuilder-sidebar {
+  overflow-y: auto;
+}
+.w6w-stepbuilder-picker .w6w-stepbuilder-content {
+  height: auto;
+}
+.w6w-stepbuilder-picker .w6w-apppicker-host {
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+}
 .w6w-stepbuilder {
   display: flex;
   gap: var(--w6w-sp-4);
@@ -335,6 +362,28 @@
   color: var(--w6w-muted-text, var(--w6w-text));
 }
 
+/* Triggers tab: the "Search all apps" row under the two columns, outside the
+   grid so the columns keep the host's remaining height. */
+.w6w-readytouse-footer {
+  flex: 0 0 auto;
+  padding-top: var(--w6w-sp-3);
+}
+
+.w6w-readytouse-empty {
+  margin: 0;
+}
+
+/* A button that reads as an inline link — the empty state's "Search all apps". */
+.w6w-linkbtn {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: var(--w6w-accent);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 /* A Function/Workflow row, distinct from an app row at a glance: an app is
    somebody else's service, a Function/Workflow is something YOU built here.
    Applied by `CallableRow`, which both the home tab and the Workflows/
@@ -358,6 +407,12 @@
   /* Horizontal breathing room so header/footer align with the padded body. */
   padding-inline: var(--w6w-sp-1);
 }
+/* The add flow's title: the node kind's label, then its editable name. */
+.w6w-stepbuilder-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
 /* Inline step rename (pencil) shown next to the modal title. */
 .w6w-step-rename {
   display: inline-flex;
@@ -374,3 +429,93 @@
   font-size: 0.9em;
   font-family: inherit;
 }
+
+.w6w-router-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+.w6w-router-editor > p { margin: 0; }
+.w6w-router-routes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+}
+.w6w-router-route {
+  min-width: 0;
+}
+.w6w-router-route.is-dragging { opacity: 0.45; }
+.w6w-router-route.is-drop-target { box-shadow: 0 -2px var(--w6w-accent); }
+.w6w-router-route-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  margin-bottom: var(--w6w-sp-1);
+}
+.w6w-router-route-heading > :last-child { margin-left: auto; }
+.w6w-router-grip { cursor: grab; }
+.w6w-router-grip:active { cursor: grabbing; }
+.w6w-router-route-name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  border: 0;
+  background: transparent;
+  padding: var(--w6w-sp-1) 0;
+  font: inherit;
+  font-size: var(--w6w-fs-xs);
+  color: var(--w6w-muted);
+  cursor: pointer;
+}
+.w6w-router-route-name:hover { color: var(--w6w-text); }
+.w6w-router-route-name:disabled { cursor: default; }
+.w6w-router-add { align-self: flex-start; }
+.w6w-condition-editor {
+  position: relative;
+  padding-right: var(--w6w-sp-8);
+}
+.w6w-condition-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto) minmax(0, 1fr);
+  gap: var(--w6w-sp-2);
+  align-items: stretch;
+}
+.w6w-condition-row > * { min-width: 0; }
+.w6w-condition-row-removable {
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto) minmax(0, 1fr) auto;
+}
+.w6w-condition-row-boolean {
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto);
+}
+.w6w-condition-row-boolean.w6w-condition-row-removable {
+  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto) auto;
+}
+.w6w-condition-negate {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  font-size: var(--w6w-fs-xs);
+}
+.w6w-condition-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+}
+.w6w-condition-combinator,
+.w6w-condition-add { align-self: flex-start; }
+.w6w-condition-remove { align-self: center; }
+.w6w-condition-comparison {
+  min-height: var(--w6w-sp-10);
+  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  color: var(--w6w-text);
+  font: inherit;
+  font-size: var(--w6w-fs-xs);
+}
+.w6w-condition-mode {
+  position: absolute;
+  right: 0;
+  top: var(--w6w-sp-2);
+}

package/src/styles/_tester.scss

@@ -36,7 +36,7 @@
 
 /* Host-embedded ActionTestForm (studio's ConnectionTesterModal wraps it in its
    OWN full modal). The widget then fills that modal as a full-height flex column:
-   the params + saved-tests region scrolls, and the action bar is a bottom-pinned,
+   the params / result / saved-tests cards scroll, and the action bar is a bottom-pinned,
    non-scrolling footer. These classes are only applied in `embedded` mode, so the
    inline / own-pop-out layout is untouched. */
 .w6w-tester-embedded-root {
@@ -54,19 +54,6 @@
   min-height: 0;
   overflow: auto;
 }
-.w6w-tester-embedded-cols {
-  display: flex;
-  gap: var(--w6w-sp-4);
-  align-items: flex-start;
-}
-.w6w-tester-embedded-main {
-  flex: 1;
-  min-width: 0;
-}
-.w6w-tester-embedded-rail {
-  width: 260px;
-  flex-shrink: 0;
-}
 /* The action bar as a pinned footer: kept out of the scroll region and separated
    with a top border so Run / Save / Delete stay visible however long the params. */
 .w6w-tester-actions-footer {
@@ -109,3 +96,59 @@
    baseline bar, `degraded` taller, `down` the full cell, and `unknown` a hatched
    outline with no solid fill (nothing was measured: not a good day, not a bad
    one). Each cell also carries a `title` with its day and state. */
+
+/* ── ResultViewer (T0.1.1) — one result value, shown by format: a collapsible
+   JSON tree, xml/html/markdown source, or vendor html in a sandboxed iframe.
+   The viewer owns its OWN internal spacing only; the host pane spaces it. */
+.w6w-result-viewer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  min-width: 0;
+}
+/* The toolbar — Expand all / Collapse all for a tree, Rendered / Source for
+   html and markdown. End-aligned so it sits under the copy button's corner. */
+.w6w-result-viewer-bar {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--w6w-sp-1);
+}
+/* The viewport: the one element that scrolls, capped by the inline `maxHeight`.
+   Mono + 0.85em are `.w6w-result`'s type (above), because both present the same
+   thing to the reader. */
+.w6w-result-viewer-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: var(--w6w-font-mono);
+  /* lint-tokens-allow: mirrors `.w6w-result`'s result type size above; the value is pinned by T0.1.1 */
+  font-size: 0.85em;
+}
+/* A plain-text result wraps instead of scrolling sideways: prose has no
+   meaningful line structure to preserve (a code block does — it keeps `wrap`
+   off by default for that reason). */
+.w6w-result-viewer-text {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+/* One indent step per nesting level, and no list markers: the `<summary>`
+   triangle already says "this node opens". */
+.w6w-json-children {
+  padding-left: var(--w6w-sp-4);
+}
+/* Keys and counts recede; values stay the reading colour. */
+.w6w-json-key,
+.w6w-json-count {
+  color: var(--w6w-muted);
+}
+/* The sandboxed frame: fills the body's width and gives the preview a fixed
+   viewport (it cannot size itself to its own content from outside). `display:
+   block` is load-bearing — an inline iframe sits on a text baseline, so the
+   3 px descender made the 320 px body scroll 3 px and drew a stray scrollbar. */
+.w6w-html-preview {
+  display: block;
+  width: 100%;
+  height: 320px;
+  border: none;
+  background: var(--w6w-panel);
+}

package/src/styles/_tokens.scss

@@ -26,7 +26,9 @@
  * defined on :root so every `.w6w-*` component inherits them out of the box.
  */
 
-/* Light — the base defaults. */
+/* Light — the base defaults.
+   `--w6w-loop-N` is the For each palette (flow-loop-colors.ts, LOOP_TONES): no red,
+   black or green, so a loop never reads as an error port or a success edge. */
 :where(:root) {
   --w6w-bg: #f7f8fa;
   --w6w-panel: #ffffff;
@@ -42,6 +44,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #5f6875;
   --w6w-icon-swatch: #f0f2f6;
+  --w6w-loop-1: #2f6fdf;
+  --w6w-loop-2: #7c4ddb;
+  --w6w-loop-3: #b7791f;
+  --w6w-loop-4: #0e8fa8;
+  --w6w-loop-5: #b0399f;
+  --w6w-loop-6: #4f4fc7;
   --w6w-code-comment: #6b7280;
   --w6w-code-keyword: #8250df;
   --w6w-code-string: #0a7b34;
@@ -71,6 +79,12 @@
     --w6w-health-down: var(--w6w-danger);
     --w6w-health-unknown: #9aa3b2;
     --w6w-icon-swatch: #1f232c;
+    --w6w-loop-1: #5b9bff;
+    --w6w-loop-2: #a98bff;
+    --w6w-loop-3: #f0b13a;
+    --w6w-loop-4: #3cc6e0;
+    --w6w-loop-5: #e47ad6;
+    --w6w-loop-6: #8a8aff;
     --w6w-scheme: dark;
   --w6w-code-comment: #7d8797;
   --w6w-code-keyword: #d2a8ff;
@@ -100,6 +114,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #5f6875;
   --w6w-icon-swatch: #f0f2f6;
+  --w6w-loop-1: #2f6fdf;
+  --w6w-loop-2: #7c4ddb;
+  --w6w-loop-3: #b7791f;
+  --w6w-loop-4: #0e8fa8;
+  --w6w-loop-5: #b0399f;
+  --w6w-loop-6: #4f4fc7;
   --w6w-code-comment: #6b7280;
   --w6w-code-keyword: #8250df;
   --w6w-code-string: #0a7b34;
@@ -124,6 +144,12 @@
   --w6w-health-down: var(--w6w-danger);
   --w6w-health-unknown: #9aa3b2;
   --w6w-icon-swatch: #1f232c;
+  --w6w-loop-1: #5b9bff;
+  --w6w-loop-2: #a98bff;
+  --w6w-loop-3: #f0b13a;
+  --w6w-loop-4: #3cc6e0;
+  --w6w-loop-5: #e47ad6;
+  --w6w-loop-6: #8a8aff;
   --w6w-code-comment: #7d8797;
   --w6w-code-keyword: #d2a8ff;
   --w6w-code-string: #7ee787;