@w6w/ui 0.0.0-stage → 0.1.0

package/src/styles/_execution-history.scss

@@ -0,0 +1,282 @@
+/* --- ExecutionList ------------------------------------------------------- */
+/* Rows of past executions: a click-to-select list plus a prev/next pager.
+   Closer in shape to `.w6w-execution-log` (`_execution-log.scss`) than to
+   `.w6w-history-*`: that family lays out a time-proportional strip against a
+   shared axis, while this is a plain in-order list of one row per run. The row
+   itself is `ListItem` (`.w6w-list-item`, `_lists.scss`) — reused whole, box,
+   hover, focus ring, `active` highlight and all — so this partial only owns
+   the LIST around the rows: the `ul` reset and the pager strip.
+
+   Spacing/type come from the scale tokens only (the `lint:tokens` ratchet has
+   no baseline entry for this file, so anything literal here would be a new
+   violation); colour stays on `_execution-log.scss`'s pill and the shared
+   `.w6w-btn` classes. */
+
+.w6w-execution-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  width: 100%;
+  min-width: 0;
+}
+
+/* A `<ul>`, reset to a bare vertical stack — the marker/indent are the only
+   things `_layout.scss`'s `.w6w-stack` doesn't already strip, and rows are
+   `<li>` so the list is announced as a list, not a run of cards. */
+.w6w-execution-list-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.w6w-execution-list-rows > li {
+  min-width: 0;
+}
+
+/* Both non-list branches (the loading and the empty `<p>`) hang straight off
+   the root, so one direct-child rule covers them and neither needs a class the
+   pinned markup doesn't have. Same dashed box `.w6w-execution-log-empty`
+   uses — one treatment for "nothing here yet" across the run-log family. */
+.w6w-execution-list > p {
+  width: 100%;
+  margin: 0;
+  padding: var(--w6w-sp-4);
+  border: 1px dashed var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  text-align: center;
+}
+
+.w6w-execution-list-pager {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--w6w-sp-2);
+}
+
+/* --- ExecutionFilters --------------------------------------------------- */
+/* One dense row of heterogeneous controls. The control chrome cannot come from
+   `_fields.scss`: those rules are anchored on `.w6w-field` (a labelled,
+   stacked field with a visible `<span>`), and these controls are labelled
+   accessibly (`aria-label`) instead — a visible label per control would triple
+   the bar's height. Tokens only, for the same reason as the rules above. */
+
+/* The row is width-driven: a wrapped line is formed from each control's
+   *hypothetical* size, so six controls plus their gaps sit on one line for as
+   long as they fit, and the row breaks by itself once they don't. That is the
+   behaviour this bar needs — it renders full width in the studio History page
+   and ~500px wide inside the detail modal — so the break follows THIS box
+   rather than the viewport, and nothing here may key off a media query. */
+.w6w-execution-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+  min-width: 0;
+}
+
+/* These are bare form elements, so a host's own global `input`/`select` chrome
+   lands on them too — and in the studio it is decisive: `studio/src/styles.css`
+   gives `input[type="search"]`/`input[type="date"]` a `width: 100%` and a
+   `margin-top`. A `width: 100%` on a flex item whose `flex-basis` is `auto` IS
+   that item's basis, so each date picker asked for the whole bar and the row
+   broke into one control per line, while the margin lifted the two inputs off
+   the selects' line. Both are pinned back here; at (0,2,1) this selector beats
+   a host's bare `input[type=…]` (0,1,1) and `input` (0,0,1) rules without
+   needing `!important`, and a host that leaves the controls alone is unaffected
+   because `width: auto`/`margin: 0` are what these controls want anyway. */
+.w6w-execution-filters input[type="search"],
+.w6w-execution-filters input[type="date"],
+.w6w-execution-filters select {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  margin: 0;
+  width: auto;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+}
+
+.w6w-execution-filters input[type="search"]:focus-visible,
+.w6w-execution-filters input[type="date"]:focus-visible,
+.w6w-execution-filters select:focus-visible {
+  outline: 2px solid var(--w6w-accent);
+  outline-offset: 1px;
+}
+
+/* The dropdowns and the two date pickers show one short, fixed label, so they
+   keep their intrinsic width and neither grow nor shrink: the row's spare width
+   is the search box's alone. */
+.w6w-execution-filters select,
+.w6w-execution-filters input[type="date"] {
+  flex: 0 0 auto;
+}
+
+/* The search box is the only control that flexes — it takes the spare width and
+   gives it back down to a 160px floor, and that floor is what sets the row's
+   breakpoint: 160px of search + the five intrinsic controls + five 8px gaps
+   ≈ 757px, so the bar is one row from the 760px the layout promises, and wraps
+   below it. */
+.w6w-execution-filters-search {
+  flex: 1 1 160px;
+  min-width: 160px;
+}
+
+/* Clear is a fixed-size control and stays at the end of the row. */
+.w6w-execution-filters-clear {
+  flex: 0 0 auto;
+}
+
+/* --- ExecutionStats ----------------------------------------------------- */
+/* The `DashboardPage.tsx` `StatCard` shape (big value, muted label) promoted
+   out of the page and onto tokens — that page had the value's type ramp and
+   weight inline, which is exactly what a shared component must not leave to
+   its host. */
+
+.w6w-execution-stats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+  min-width: 0;
+}
+
+.w6w-execution-stats-label {
+  margin: 0;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+}
+
+.w6w-execution-stats-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-execution-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  flex: 1 1 140px;
+  min-width: 0;
+  padding: var(--w6w-sp-3);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel-2);
+}
+
+.w6w-execution-stat-value {
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-3xl);
+  font-weight: var(--w6w-fw-semibold);
+  line-height: var(--w6w-lh-tight);
+}
+
+.w6w-execution-stat-label {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+}
+
+/* --- ExecutionDetail ---------------------------------------------------- */
+
+.w6w-execution-detail {
+  width: 100%;
+  min-width: 0;
+}
+
+/* Title block left, controls right; the actions keep their width, the name
+   wraps or ellipses into whatever is left. */
+.w6w-execution-detail-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-execution-detail-title {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+
+.w6w-execution-detail-name {
+  margin: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-lg);
+  font-weight: var(--w6w-fw-semibold);
+  overflow-wrap: anywhere;
+}
+
+.w6w-execution-detail-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-execution-detail-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+
+.w6w-execution-detail-id-line {
+  margin: 0;
+}
+
+.w6w-execution-detail-id {
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-sm);
+  color: var(--w6w-muted);
+  overflow-wrap: anywhere;
+}
+
+/* A `<dl>` whose pairs are `<div>`s, so the three facts row up side by side
+   instead of stacking as three label/value paragraphs. */
+.w6w-execution-detail-timing {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-5);
+  margin: 0;
+}
+
+.w6w-execution-detail-timing-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+
+.w6w-execution-detail-timing-item dt {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+
+.w6w-execution-detail-timing-item dd {
+  margin: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+}
+
+/* The view-level failure notice: the same danger token `.w6w-btn-danger` and
+   the health pills use, tinted rather than filled so it reads as a notice and
+   not as a button. */
+.w6w-execution-detail-error-message {
+  margin: 0;
+  padding: var(--w6w-sp-2) var(--w6w-sp-3);
+  border: 1px solid var(--w6w-danger);
+  border-radius: var(--w6w-radius);
+  background: color-mix(in srgb, var(--w6w-danger) 10%, transparent);
+  color: var(--w6w-danger);
+  font-size: var(--w6w-fs-sm);
+}

package/src/styles/_execution-log.scss

@@ -0,0 +1,178 @@
+/* --- StepStatusPill ---------------------------------------------------- */
+/* Mirrors `.w6w-health-pill` shape for shape (see `_health.scss`), with its
+   own five-state colour set behind `--w6w-step-color` — never a new global
+   `--w6w-*` token, only the base palette (`--w6w-muted`/`--w6w-accent`/
+   `--w6w-success`/`--w6w-danger`) this file is scoped to. */
+.w6w-step-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2) var(--w6w-sp-0-5) var(--w6w-sp-1-5);
+  border: 1px solid color-mix(in srgb, var(--w6w-step-color) 40%, var(--w6w-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--w6w-step-color) 12%, transparent);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-xs);
+  line-height: var(--w6w-lh-normal);
+  white-space: nowrap;
+  --w6w-step-color: var(--w6w-muted);
+}
+.w6w-step-pill-pending {
+  --w6w-step-color: var(--w6w-muted);
+}
+.w6w-step-pill-running {
+  --w6w-step-color: var(--w6w-accent);
+}
+.w6w-step-pill-succeeded {
+  --w6w-step-color: var(--w6w-success);
+}
+.w6w-step-pill-failed {
+  --w6w-step-color: var(--w6w-danger);
+}
+/* Same base colour as `pending` — a dashed border, not a second colour, is
+   what keeps this distinct: colour alone is never the only signal, and this
+   pill already carries a different text label too. */
+.w6w-step-pill-skipped {
+  --w6w-step-color: var(--w6w-muted);
+  border-style: dashed;
+}
+/* The two RUN states (`ExecutionStatus`), both deliberately in the same muted
+   family as `pending`/`skipped` above: neither is a verdict on the work —
+   `queued` hasn't started and `canceled` stopped before reaching one — so
+   neither earns `--w6w-success`/`--w6w-danger`/`--w6w-accent`, and this file
+   keeps its stated scope (the base palette only, never a new global token).
+   `canceled` takes `skipped`'s dashed border for the same reason that one
+   does; the two never co-occur in one list (one is a step state, the other a
+   run state), and the label carries the meaning regardless. */
+.w6w-step-pill-queued {
+  --w6w-step-color: var(--w6w-muted);
+}
+.w6w-step-pill-canceled {
+  --w6w-step-color: var(--w6w-muted);
+  border-style: dashed;
+}
+.w6w-step-pill-dot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--w6w-step-color);
+}
+.w6w-step-pill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- ExecutionLogPanel --------------------------------------------------- */
+/* A vertical ordered list, not `_history-timeline.scss`'s idiom: that
+   partial lays out a fixed WINDOW of time-proportional lanes (`left`/`width`
+   percentages against a shared axis) for a health-history strip, which has
+   no notion of "one row per step" or of steps that haven't happened yet.
+   This panel is a plain in-order list of a priori unbounded rows, closer in
+   shape to `.w6w-resolved-table`'s row list — reused here as `.w6w-stack`
+   (`_layout.scss`) for the two-block (input/output) stack inside a row,
+   rather than inventing a second vertical-list treatment.
+
+   Each row's own box (border/background/border-radius/padding) comes from
+   `.w6w-section` (`_sections.scss`), reused rather than duplicated here —
+   `ApiCallsPanel.tsx`'s collapsed-by-default `<details>` idiom, applied to
+   this panel's rows (REVIEW.md R-1). This file only adds the row-specific
+   layout `.w6w-section` doesn't know about: the flex line for the summary's
+   pill/label/timing. */
+
+/* The optional header row (T1.1.1 A4) — rendered only when the host supplies
+   `onDismiss`, and in BOTH branches below, since the empty state is exactly
+   where a dismiss control is needed most. Right-aligned, mirroring where
+   studio's own `.notice-close` dismiss sits on a panel header; that class is
+   studio-scoped CSS and does not exist in this package, so only the placement
+   transfers, not the rule. */
+.w6w-execution-log-head {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  width: 100%;
+  margin-bottom: var(--w6w-sp-2);
+}
+
+.w6w-execution-log {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+/* `width: 100%` plus padding and a border overflows the parent under the
+   default content-box sizing; this package has no global box-sizing reset, so
+   it opts in per element (as `_chips.scss` and `_step-config.scss` do). */
+.w6w-execution-log-empty {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--w6w-sp-4);
+  border: 1px dashed var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  text-align: center;
+}
+
+.w6w-execution-log-row {
+  min-width: 0;
+}
+
+.w6w-execution-log-row-header {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  flex-wrap: wrap;
+}
+
+.w6w-execution-log-row-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-weight: var(--w6w-fw-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Shrinkable, so a narrow row (the 360px docked panel) wraps the
+   "<ts> → <ts> (elapsed)" text inside the row's box. With `flex-shrink: 0` it
+   kept its max-content width, wrapped onto its own flex line, and ran past the
+   row's border. */
+.w6w-execution-log-timing {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+
+.w6w-execution-log-json {
+  min-width: 0;
+}
+
+/* Error blocks (step `error`, run `runError`/`stepErrors`). The box itself is
+   `.w6w-result.w6w-error` (`_tester.scss`) — TriggerFillForm's StepError
+   visual, reused, not restyled here; these rules only place it. */
+.w6w-execution-log-errors {
+  width: 100%;
+  margin-bottom: var(--w6w-sp-2);
+}
+
+/* A step's error sits after its `.w6w-section` box, inside the same `<li>` —
+   closer to its own row than the list's row gap, so it reads as that row's. */
+.w6w-execution-log-row > .w6w-error {
+  margin-top: var(--w6w-sp-1-5);
+}
+
+/* TriggerFillForm's inline `opacity: 0.75; marginBottom: 4` code line, as tokens. */
+.w6w-execution-log-error-code {
+  opacity: 0.75;
+  margin-bottom: var(--w6w-sp-1);
+}
+
+.w6w-execution-log-error-label {
+  display: block;
+  margin-bottom: var(--w6w-sp-1);
+}

package/src/styles/_expression-field.scss

@@ -0,0 +1,65 @@
+/* Expression input: a field whose contents are inline SEGMENTS — plain text
+   plus var/secret/expr chips, edited in place (contentEditable, like a Notion /
+   Zapier block field). A small toolbar carries the Insert menu + the {{ }} (fx)
+   mode toggle. Theme-aware via the shared tokens. */
+.w6w-expr {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+}
+/* Inline expression field: ONE input-like box holding the editable surface plus
+   a ƒx button that reads as a trailing decoration INSIDE it — the same idiom as
+   `.w6w-multiselect` above and `.w6w-expr-sealed` below. The box lives here so
+   the standalone uses still render as a field (the `secret` param path and the
+   public ExpressionInput export). When this rides inside a `.w6w-fx-wrap`, that
+   wrapper is the box and this is flattened — see `.w6w-fx-wrap` below. */
+.w6w-expr-field {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  min-height: 38px;
+}
+.w6w-expr-field:focus-within {
+  border-color: var(--w6w-accent);
+}
+.w6w-expr-field .w6w-expr-editor {
+  flex: 1;
+  min-width: 0;
+}
+/* The ƒx rides inside the box, so it draws no chrome of its own — only its
+   colour states remain. */
+.w6w-expr-field .w6w-expr-edit {
+  border: none;
+  background: transparent;
+}
+.w6w-expr-edit {
+  flex-shrink: 0;
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+  font-size: 13px;
+  line-height: 1;
+  padding: var(--w6w-sp-1) var(--w6w-sp-1-5);
+  cursor: pointer;
+}
+.w6w-expr-edit:hover {
+  color: var(--w6w-accent);
+}
+/* Sealed at-rest secret (masked chip + Replace). */
+.w6w-expr-sealed {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: 5px var(--w6w-sp-2);
+  min-height: 38px;
+}
+.w6w-expr-sealed.is-readonly {
+  opacity: 0.7;
+}
+/* Expression editor modal: left data sources | right (editor over preview). */

package/src/styles/_expression-inline.scss

@@ -0,0 +1,63 @@
+/* The raw {{ }} input stands alone, so it keeps an input box of its own. */
+.w6w-expr-raw {
+  width: 100%;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  min-height: 38px;
+  color: var(--w6w-text);
+  font-family: var(--w6w-font-mono);
+  font-size: 13px;
+  line-height: var(--w6w-lh-relaxed);
+}
+.w6w-expr-raw:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+/* The inline editor surface (one continuous field) sits INSIDE
+   `.w6w-expr-field`'s box, so it draws no chrome — the border, the background
+   and the focus ring all belong to that box. */
+.w6w-expr-editor {
+  width: 100%;
+  padding: var(--w6w-sp-0-5) 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+  line-height: var(--w6w-lh-relaxed);
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.w6w-expr-editor.is-readonly,
+.w6w-expr-input.is-readonly {
+  opacity: 0.7;
+}
+/* Placeholder for the empty contentEditable field. */
+.w6w-expr-editor.is-empty::before {
+  content: attr(data-placeholder);
+  color: var(--w6w-muted);
+  pointer-events: none;
+}
+/* Masked (secret) fields: mask typed TEXT as dots; chips are exempt — a chip
+   shows a name/label, never a secret value. */
+.w6w-expr-editor.is-masked {
+  -webkit-text-security: disc;
+  text-security: disc;
+}
+.w6w-expr-editor.is-masked .w6w-expr-chip {
+  -webkit-text-security: none;
+  text-security: none;
+}
+/* Sealed at-rest secret uses a simple flex wrapper (chip + Replace). */
+.w6w-expr-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: 5px var(--w6w-sp-2);
+  min-height: 38px;
+}