@w6w/ui 0.2.0 → 0.2.54

package/src/styles/_canvas.scss

@@ -0,0 +1,353 @@
+.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;
+}
+// A note reads as a sticky: an opaque tint of its colour over the panel, so it stays legible in
+// both themes and over a section or the grid.
+.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 rgb(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);
+}
+// A section's label sits above its frame's top-left corner, never inside the frame.
+.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;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol {
+    margin: 0 0 var(--w6w-sp-1);
+  }
+  h1 {
+    font-size: var(--w6w-fs-2xl);
+    line-height: var(--w6w-lh-tight);
+  }
+  h2 {
+    font-size: var(--w6w-fs-xl);
+    line-height: var(--w6w-lh-tight);
+  }
+  h3 {
+    font-size: var(--w6w-fs-lg);
+    line-height: var(--w6w-lh-tight);
+  }
+  h4,
+  h5,
+  h6 {
+    font-size: var(--w6w-fs-base);
+  }
+}
+// The in-place editor shares the view's box and type, so editing does not shift the text.
+.w6w-canvas-note-editor {
+  outline: none;
+  cursor: text;
+  > div,
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6 {
+    margin: 0;
+  }
+}
+// The note's corner resize grip: two diagonal strokes, shown on hover or when selected.
+.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;
+}
+
+// The selected note's floating toolbar.
+.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 rgb(0 0 0 / 18%);
+  font-size: var(--w6w-fs-sm);
+  white-space: nowrap;
+  pointer-events: auto;
+  .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;
+}
+// The section toolbar's label field reads as the label until focused. Sized by its `size`
+// attribute, so a host's global `input { width: 100% }` must not collapse it inside the flex row.
+.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 rgb(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 rgb(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 rgb(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);
+  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);
+}
+// The canvas right-click menu (CanvasContextMenu): the note menu's panel and items,
+// placed at the pointer instead of under a toolbar button.
+.w6w-canvas-menu {
+  top: auto;
+  z-index: 10;
+  flex-direction: column;
+  min-width: 170px;
+  .w6w-note-menu-item {
+    font-weight: var(--w6w-fw-medium);
+  }
+  .w6w-note-menu-item:focus-visible {
+    outline: none;
+    background: var(--w6w-panel-2);
+  }
+  .w6w-note-menu-item.danger {
+    color: var(--w6w-danger);
+  }
+  .w6w-note-menu-item.separated {
+    position: relative;
+    margin-top: var(--w6w-sp-2);
+  }
+  .w6w-note-menu-item.separated::before {
+    content: "";
+    position: absolute;
+    top: calc(-1 * var(--w6w-sp-1) - 0.5px);
+    right: 0;
+    left: 0;
+    border-top: 1px solid var(--w6w-border);
+  }
+  .w6w-note-menu-item[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: default;
+    background: transparent;
+  }
+}
+.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);
+}
+
+// The editor's top-left tool strip: "+ Node", then the canvas tools as icon buttons.
+.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));
+}
+
+// The draw-section surface and the frame being dragged on it.
+.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;
+}

package/src/styles/_code-editor.scss

@@ -0,0 +1,35 @@
+/* Every CodeMirror code view (`JsonEditor`, `CodeEditor`, `YamlEditor`) FILLS
+   its bordered box. The border is on `.cm-editor`, which react-codemirror
+   sizes with the `height` / `minHeight` / `maxHeight` props and whose
+   `.cm-scroller` it gives `height: 100%`. With only a min/max height (the Data
+   page's Document modal) that percentage has nothing definite to resolve
+   against, so the scroller — and the gutter column inside it — stopped at the
+   last content line, the horizontal scrollbar sat right under it, and the rest
+   of the box was empty.
+
+   The react-codemirror root (the wrapper's first child) is a one-cell grid.
+   A grid area is definite once its track is sized, so `.cm-editor`, stretched
+   into it, has a definite height whether that came from `height`, from
+   `minHeight` or from the content (capped by `maxHeight`), and the scroller and
+   the gutters fill it. `minmax(0, 1fr)` keeps a long line from widening the
+   editor: the scroller scrolls it instead. The wrapper is a flex column so a
+   wrapper given a definite height (a flex item with `min-height: 0`, as in
+   `_step-config.scss`) hands that height down to the editor.
+
+   Everything sits under `:where()` (specificity 0 for the wrapper part), so a
+   call site's own layout for the same elements — `_expression-modal.scss`'s
+   JSON pane, a host's dialog — still wins. */
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) {
+  display: flex;
+  flex-direction: column;
+}
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) > :first-child {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) .cm-scroller,
+:where(.w6w-json-editor, .w6w-code-editor, .w6w-yaml-editor) .cm-gutters {
+  min-height: 100%;
+}

package/src/styles/_code.scss

@@ -108,15 +108,16 @@
 /* The expanded form of a clipped value (`resolved-clip.ts`). A block with its
    own scroll, so "Show all" can never restore the unbounded inline paste that
    buried the other params and the run's result. */
+.w6w-resolved-copy {
+  margin: var(--w6w-sp-1) 0;
+}
 .w6w-resolved-text-full {
   display: block;
-  margin: var(--w6w-sp-1) 0;
+  margin: 0;
   max-height: 14em;
   overflow: auto;
-  padding: var(--w6w-sp-2);
-  background: var(--w6w-panel-2);
-  border: 1px solid var(--w6w-border);
-  border-radius: var(--w6w-radius);
+  padding: 0;
+  padding-right: var(--w6w-sp-10);
   font-family: var(--w6w-font-mono);
   font-size: 0.85em; /* lint-tokens-allow: matches the sibling code-typography rules above in this same file */
   line-height: var(--w6w-lh-normal);

package/src/styles/_connections.scss

@@ -18,23 +18,11 @@
   gap: var(--w6w-sp-2);
   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);

package/src/styles/_copyable.scss

@@ -145,3 +145,27 @@
   flex: 1 1 auto;
   min-width: 0;
 }
+
+/* ── Hover modifier: ResultViewer — the button overlays the top-right corner of
+   ANY child and is revealed on hover/focus; always shown where there is no hover. */
+.w6w-copyable--hover {
+  position: relative;
+  align-items: flex-start;
+}
+.w6w-copyable--hover > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+  opacity: 0;
+}
+.w6w-copyable--hover:hover > .w6w-copyable-btn,
+.w6w-copyable--hover:focus-within > .w6w-copyable-btn {
+  opacity: 1;
+}
+@media (hover: none) {
+  .w6w-copyable--hover > .w6w-copyable-btn {
+    opacity: 1;
+  }
+}

package/src/styles/_data-stores.scss

@@ -0,0 +1,138 @@
+/* Data stores (F-2): DataStoreList, ColumnsEditor, CsvPanel and the data-grid/entry rules ported from Studio's Data store detail page. */
+.w6w-data-store-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+.w6w-data-store-list-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--w6w-sp-4);
+}
+.w6w-data-store-list-heading {
+  min-width: 0;
+}
+.w6w-data-store-list-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+.w6w-data-columns-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.w6w-data-columns-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+}
+.w6w-data-columns-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-data-columns-required {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+}
+.w6w-data-columns-error {
+  flex-basis: 100%;
+}
+.w6w-data-entries-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  margin: var(--w6w-sp-3) 0;
+}
+.w6w-data-entries-toolbar input[type="search"] {
+  flex: 1;
+  max-width: 20rem;
+  /* Same box as `.w6w-field` inputs — no host page styles a bare search input. */
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+}
+.w6w-data-entries-toolbar input[type="search"]:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+/* Entries open a viewer. Keep the list quiet and bounded, even for long keys or JSON. */
+.w6w-data-entry-list {
+  table-layout: fixed;
+}
+.w6w-data-entry-key,
+.w6w-data-entry-preview {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.w6w-data-entry-key {
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.w6w-data-entry-key:focus-visible {
+  outline: 2px solid var(--w6w-accent);
+  outline-offset: 2px;
+}
+.w6w-data-entry-delete {
+  margin-inline-end: auto;
+}
+/* The wide-table pane: the sheet scrolls INSIDE this box, so a 24-column
+   table never widens its container and the page itself never overflows. */
+.w6w-data-grid-scroll {
+  overflow-x: auto;
+  max-width: 100%;
+}
+.w6w-data-grid-scroll input {
+  min-width: var(--w6w-sp-16);
+}
+.w6w-data-cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+.w6w-data-cell-error {
+  color: var(--w6w-danger);
+  font-size: var(--w6w-fs-xs);
+}
+.w6w-data-row-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-data-entry-editor {
+  margin-top: var(--w6w-sp-4);
+}
+.w6w-data-entry-editor-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  margin-top: var(--w6w-sp-3);
+}
+.w6w-data-csv-panel {
+  margin-bottom: var(--w6w-sp-4);
+}
+.w6w-data-csv-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+}

package/src/styles/_data-table.scss

@@ -0,0 +1,55 @@
+/* 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;
+}

package/src/styles/_data-vars.scss

@@ -1,12 +1,12 @@
 .w6w-datavar-row {
   display: grid;
-  grid-template-columns: 1fr 110px 1fr auto;
+  // A long expression must not widen its track and shift the other columns in that row.
+  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) auto;
   gap: var(--w6w-sp-1-5);
-  /* Align to the end so that on an `expression` row — where the value cell is a
-     taller ExpressionInput (toolbar above its editor) — the key/type/remove
-     cells line up with the editor at the bottom, not the toolbar. Single-line
-     rows are unaffected (every cell is the same height). */
-  align-items: end;
+  align-items: stretch;
+}
+.w6w-datavar-row > * {
+  min-width: 0;
 }
 .w6w-datavar-row input,
 .w6w-datavar-row select {
@@ -36,3 +36,14 @@
 .w6w-datavar-row .w6w-btn {
   padding: var(--w6w-sp-1-5) var(--w6w-sp-2-5);
 }
+.w6w-datavar-modes {
+  margin-left: auto;
+}
+.w6w-datavar-modes .active {
+  background: var(--w6w-panel-2);
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+}
+.w6w-datavar-error {
+  color: var(--w6w-danger);
+}

package/src/styles/_empty-state.scss

@@ -0,0 +1,21 @@
+.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);
+}