@w6w/ui 0.2.0 → 0.2.11

package/src/styles.css

@@ -914,6 +914,15 @@ svg.react-flow__connectionline {
  * uncoordinated ones exist across the four repos today).
  */
 /* 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;
@@ -1804,6 +1813,32 @@ select optgroup {
   color: var(--w6w-accent);
 }
 
+/* The json param's ƒx rides INSIDE the editor box, top-right, as the editor's
+   `overlay` (same mechanism as the `copyable` button in `_step-config.scss`).
+   Opaque backdrop because it sits on line 1; the text keeps right padding so
+   it is never covered; with `copyable` on it steps left of the copy button. */
+.w6w-json-editor > .w6w-expr-fx {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  z-index: 1;
+  border: none;
+  background: var(--w6w-panel);
+  border-radius: 6px;
+}
+
+.w6w-json-editor:has(> .w6w-expr-fx) .cm-content {
+  padding-right: var(--w6w-sp-10);
+}
+
+.w6w-json-editor:has(> .w6w-copyable-btn) > .w6w-expr-fx {
+  right: calc(var(--w6w-sp-1) * 2 + var(--w6w-sp-8));
+}
+
+.w6w-json-editor:has(> .w6w-copyable-btn):has(> .w6w-expr-fx) .cm-content {
+  padding-right: var(--w6w-sp-20);
+}
+
 /* Copyable — an in-box copy affordance decorating a value-displaying control
    (an <input>, a <textarea>, or CodeBlock's <pre>). Mirrors `.w6w-fx-wrap`
    (`_fx.scss:1-88`): the WRAPPER owns the box chrome and every child it holds
@@ -3444,6 +3479,17 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   white-space: nowrap;
 }
 
+/* A trigger node's card (ControlNodeCard, `isTrigger`) — a half-pill: fully
+   rounded entry (left) edge, the ordinary 4px corner on the exit (right) edge,
+   so a run's start reads apart from the steps it feeds. No radius token
+   exists beyond --w6w-radius (10px), hence the literals. Wider left inset
+   clears the curve. */
+.w6w-flow .w6w-node-trigger {
+  border-radius: 999px 4px 4px 999px;
+  /* lint-tokens-allow: 14px right inset matches the non-trigger card's inline padding */
+  padding: var(--w6w-sp-1-5) 14px var(--w6w-sp-1-5) var(--w6w-sp-4);
+}
+
 /* The ordinary (success) ports — bumped from the library's own 6px default
    (2026-08-30: "ports must have consistent size") to match the error port
    below exactly. `:not(.w6w-handle-multi)`: the multi-input handle is its
@@ -3648,7 +3694,7 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
 
 /* 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 {
@@ -3669,22 +3715,6 @@ dialog.w6w-modal.w6w-modal-fullscreen .w6w-modal-header {
   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 {
@@ -5341,16 +5371,23 @@ button.w6w-rel-open:focus-visible strong {
 .w6w-callable-list-body {
   border: 1px solid var(--w6w-border);
   border-radius: 8px;
-  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  overflow: hidden;
 }
 
-.w6w-callable-list-rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.w6w-callable-list-main {
   display: flex;
   flex-direction: column;
-  gap: var(--w6w-sp-1);
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+  text-align: left;
+}
+
+.w6w-callable-list-open {
+  all: unset;
+  cursor: pointer;
+  display: block;
+  width: 100%;
 }
 
 .w6w-callable-list-trail {
@@ -5367,6 +5404,75 @@ button.w6w-rel-open:focus-visible strong {
   font-size: var(--w6w-fs-xs);
 }
 
+.w6w-callable-list-row-desc {
+  display: block;
+}
+
+/* The frame is the ONLY element of a DataTable that draws an outer border and a
+   radius (T-3). `overflow: hidden` clips the cells at the rounded corners, so
+   the table below never needs an outer edge of its own. */
+.w6w-data-table-frame {
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+  overflow: hidden;
+}
+
+/* No outer border here (T-3): the frame above already draws it. */
+.w6w-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--w6w-text);
+}
+
+/* Inner separators only (T-3): a right border on every cell but the last column
+   and a bottom border on every row but the last. First column, first row, last
+   column and last row therefore paint nothing on the outside — one border per
+   outer edge, from the frame. */
+.w6w-data-table th,
+.w6w-data-table td {
+  border-right: 1px solid var(--w6w-border);
+  border-bottom: 1px solid var(--w6w-border);
+  padding: var(--w6w-sp-2) var(--w6w-sp-3);
+  text-align: left;
+  vertical-align: middle;
+}
+
+.w6w-data-table th:last-child,
+.w6w-data-table td:last-child {
+  border-right: 0;
+}
+
+.w6w-data-table tbody tr:last-child > td {
+  border-bottom: 0;
+}
+
+/* Header-only table (rows=[] + loading, e.g. a list still fetching): there is no
+   `tbody tr:last-child` to strip, so the header's bottom border would sit right
+   on top of the frame's own bottom edge and paint it twice. With no body row the
+   header is the last row, so it paints no bottom border — the frame supplies it. */
+.w6w-data-table:not(:has(tbody tr)) th {
+  border-bottom: 0;
+}
+
+.w6w-data-table th {
+  color: var(--w6w-muted);
+}
+
+.w6w-data-table-row-clickable {
+  cursor: pointer;
+}
+
+.w6w-data-table-row-clickable:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-data-table-link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
 /* Connections (D-12u): ConnectionList, ConnectionHeader and the state tags they share. */
 .w6w-connection-list {
   display: flex;
@@ -5391,26 +5497,12 @@ button.w6w-rel-open:focus-visible strong {
   flex-shrink: 0;
 }
 
-.w6w-connection-rows {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--w6w-sp-1);
-}
-
-.w6w-connection-row {
-  display: flex;
+.w6w-connection-cell-name {
+  display: inline-flex;
   align-items: center;
   gap: var(--w6w-sp-2);
 }
 
-.w6w-connection-row-main {
-  flex: 1;
-  min-width: 0;
-}
-
 .w6w-connection-row-actions {
   display: flex;
   gap: var(--w6w-sp-1-5);
@@ -5484,3 +5576,444 @@ button.w6w-rel-open:focus-visible strong {
 .w6w-connection-id-copy:focus-within .w6w-copyable-btn {
   opacity: 1;
 }
+
+.w6w-empty-state {
+  position: relative;
+  min-height: 10rem;
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+}
+
+.w6w-empty-state-inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  text-align: center;
+}
+
+.w6w-empty-state-body {
+  color: var(--w6w-muted);
+}
+
+.w6w-canvas-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.w6w-canvas-section,
+.w6w-canvas-note {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px solid var(--w6w-canvas-color, var(--w6w-border));
+  border-radius: var(--w6w-radius, 6px);
+  background: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-panel)) 14%, transparent);
+  pointer-events: none;
+}
+
+.w6w-canvas-note {
+  border-color: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-border)) 55%, var(--w6w-panel));
+  background: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-panel)) 32%, var(--w6w-panel));
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.w6w-canvas-note.selected,
+.w6w-canvas-section.selected {
+  outline: 2px solid var(--w6w-accent);
+  outline-offset: 2px;
+}
+
+.w6w-canvas-note-body {
+  pointer-events: auto;
+  color: var(--w6w-text);
+}
+
+.w6w-canvas-section-title {
+  position: absolute;
+  max-width: 320px;
+  overflow: hidden;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-1-5);
+  border-radius: 6px;
+  color: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-text)) 55%, var(--w6w-text));
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w6w-canvas-section-title.editable {
+  pointer-events: auto;
+  cursor: grab;
+  touch-action: none;
+}
+
+.w6w-canvas-section-title.editable:hover {
+  background: color-mix(in srgb, var(--w6w-canvas-color, var(--w6w-panel)) 18%, transparent);
+}
+
+.w6w-canvas-note-body {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+  padding: var(--w6w-sp-3) var(--w6w-sp-3);
+  font-size: var(--w6w-fs-sm);
+  line-height: var(--w6w-lh-normal);
+  overflow-wrap: anywhere;
+}
+.w6w-canvas-note-body h1,
+.w6w-canvas-note-body h2,
+.w6w-canvas-note-body h3,
+.w6w-canvas-note-body h4,
+.w6w-canvas-note-body h5,
+.w6w-canvas-note-body h6,
+.w6w-canvas-note-body p,
+.w6w-canvas-note-body ul,
+.w6w-canvas-note-body ol {
+  margin: 0 0 var(--w6w-sp-1);
+}
+.w6w-canvas-note-body h1 {
+  font-size: var(--w6w-fs-2xl);
+  line-height: var(--w6w-lh-tight);
+}
+.w6w-canvas-note-body h2 {
+  font-size: var(--w6w-fs-xl);
+  line-height: var(--w6w-lh-tight);
+}
+.w6w-canvas-note-body h3 {
+  font-size: var(--w6w-fs-lg);
+  line-height: var(--w6w-lh-tight);
+}
+.w6w-canvas-note-body h4,
+.w6w-canvas-note-body h5,
+.w6w-canvas-note-body h6 {
+  font-size: var(--w6w-fs-base);
+}
+
+.w6w-canvas-note-editor {
+  outline: none;
+  cursor: text;
+}
+.w6w-canvas-note-editor > div,
+.w6w-canvas-note-editor > h1,
+.w6w-canvas-note-editor > h2,
+.w6w-canvas-note-editor > h3,
+.w6w-canvas-note-editor > h4,
+.w6w-canvas-note-editor > h5,
+.w6w-canvas-note-editor > h6 {
+  margin: 0;
+}
+
+.w6w-note-resize {
+  position: absolute;
+  right: var(--w6w-sp-0-5);
+  bottom: var(--w6w-sp-0-5);
+  width: 14px;
+  height: 14px;
+  cursor: nwse-resize;
+  pointer-events: auto;
+  touch-action: none;
+  opacity: 0;
+  background: linear-gradient(135deg, transparent 45%, var(--w6w-muted) 45% 52%, transparent 52% 70%, var(--w6w-muted) 70% 77%, transparent 77%);
+}
+
+.w6w-canvas-note:hover .w6w-note-resize,
+.w6w-canvas-note.selected .w6w-note-resize,
+.w6w-canvas-section.selected .w6w-note-resize {
+  opacity: 1;
+}
+
+.w6w-canvas-note-empty {
+  color: var(--w6w-muted);
+  font-style: italic;
+}
+
+.w6w-note-toolbar {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-0-5);
+  padding: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+  border-radius: 10px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  font-size: var(--w6w-fs-sm);
+  white-space: nowrap;
+  pointer-events: auto;
+}
+.w6w-note-toolbar .w6w-icon-btn {
+  gap: var(--w6w-sp-1);
+  padding: var(--w6w-sp-1-5);
+  color: var(--w6w-text);
+}
+
+.w6w-note-toolbar-group {
+  position: relative;
+  display: inline-flex;
+}
+
+.w6w-note-toolbar-sep {
+  align-self: stretch;
+  width: 1px;
+  margin: var(--w6w-sp-0-5) var(--w6w-sp-0-5);
+  background: var(--w6w-border);
+}
+
+.w6w-note-grip {
+  cursor: grab;
+  touch-action: none;
+}
+
+.w6w-note-grip:active {
+  cursor: grabbing;
+}
+
+.w6w-note-toolbar .w6w-section-title-input {
+  flex: none;
+  width: auto;
+  margin: 0;
+  padding: var(--w6w-sp-1) var(--w6w-sp-1-5);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: var(--w6w-fw-semibold);
+}
+
+.w6w-note-toolbar .w6w-section-title-input:hover {
+  border-color: var(--w6w-border);
+}
+
+.w6w-note-toolbar .w6w-section-title-input:focus {
+  border-color: var(--w6w-accent);
+  outline: none;
+}
+
+.w6w-note-size-btn {
+  font-weight: var(--w6w-fw-semibold);
+}
+
+.w6w-note-delete:hover {
+  color: var(--w6w-danger);
+}
+
+.w6w-note-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--w6w-canvas-color);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.w6w-note-menu {
+  position: absolute;
+  top: calc(100% + var(--w6w-sp-2));
+  left: 0;
+  z-index: 1;
+  display: flex;
+  padding: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 10px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+}
+
+.w6w-note-menu-colors {
+  display: grid;
+  grid-template-columns: repeat(5, 24px);
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-2);
+}
+
+.w6w-note-swatch-btn {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  background: var(--w6w-canvas-color);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+
+.w6w-note-swatch-btn.active {
+  border-color: var(--w6w-panel);
+  box-shadow: 0 0 0 2px var(--w6w-accent);
+}
+
+.w6w-note-swatch-custom {
+  overflow: hidden;
+  background: conic-gradient(#f87171, #facc15, #4ade80, #60a5fa, #a78bfa, #f87171);
+}
+.w6w-note-swatch-custom input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.w6w-note-menu-sizes {
+  flex-direction: column;
+  min-width: 150px;
+}
+
+.w6w-note-menu-item {
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  font-weight: var(--w6w-fw-semibold);
+  cursor: pointer;
+}
+
+.w6w-note-menu-item:hover {
+  background: var(--w6w-panel-2);
+}
+
+.w6w-note-size-1 {
+  font-size: var(--w6w-fs-xl);
+}
+
+.w6w-note-size-2 {
+  font-size: var(--w6w-fs-lg);
+}
+
+.w6w-note-size-3 {
+  font-size: var(--w6w-fs-base);
+}
+
+.w6w-note-size-0 {
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-regular);
+}
+
+.w6w-flow-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-flow-tool {
+  padding: var(--w6w-sp-2);
+  background: var(--w6w-panel);
+  color: var(--w6w-text);
+  border: 1px solid var(--w6w-border);
+}
+
+.w6w-flow-tool.active {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+  background: color-mix(in srgb, var(--w6w-accent) 12%, var(--w6w-panel));
+}
+
+.w6w-section-draw {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.w6w-section-draw-rect {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px dashed var(--w6w-accent);
+  border-radius: var(--w6w-radius, 6px);
+  background: color-mix(in srgb, var(--w6w-accent) 10%, transparent);
+  pointer-events: none;
+}
+
+/* BudgetMeter — usage-vs-limit bar with a reserved segment.
+ *
+ * Token-only: every colour is a --w6w-* custom property, so a host restyles
+ * the meter (including the over-limit state) by overriding tokens, never by
+ * targeting a hex value here. */
+.w6w-budget-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-budget-meter-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+  color: var(--w6w-muted);
+}
+
+.w6w-budget-meter-label {
+  color: var(--w6w-text);
+}
+
+.w6w-budget-meter-value {
+  font-variant-numeric: tabular-nums;
+}
+
+.w6w-budget-meter-track {
+  display: flex;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+}
+
+.w6w-budget-meter-used {
+  height: 100%;
+  background: var(--w6w-accent);
+}
+
+.w6w-budget-meter-reserved {
+  height: 100%;
+  background: var(--w6w-health-degraded);
+}
+
+.w6w-budget-meter-over .w6w-budget-meter-used {
+  background: var(--w6w-danger);
+}
+
+.w6w-budget-meter-over .w6w-budget-meter-value {
+  color: var(--w6w-danger);
+}
+
+/* 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.scss

@@ -61,4 +61,9 @@
 @use "styles/server-resources";
 @use "styles/reliability";
 @use "styles/callable-list";
+@use "styles/data-table";
 @use "styles/connections";
+@use "styles/empty-state";
+@use "styles/canvas";
+@use "styles/budget-meter";
+@use "styles/markdown";