@w6w/ui 0.0.0-stage → 0.1.0

package/src/styles/_chips.scss

@@ -0,0 +1,210 @@
+/* Chips: a var/secret/expr segment. Distinct look per kind; sits inline in the
+   text flow. */
+.w6w-expr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  vertical-align: baseline;
+  box-sizing: border-box;
+  /* Never exceed the field's content box; the label truncates before the chip
+     can overrun the adjacent ƒx button. */
+  max-width: 100%;
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: 1px var(--w6w-sp-1-5);
+  margin: 0 3px;
+  font-size: 12.5px;
+  line-height: 1.4;
+  font-family: var(--w6w-font-mono);
+  color: var(--w6w-text);
+  background: var(--w6w-panel);
+  white-space: nowrap;
+  user-select: none;
+}
+.w6w-expr-chip-var {
+  border-color: var(--w6w-accent);
+  color: var(--w6w-accent);
+  background: color-mix(in srgb, var(--w6w-accent) 14%, transparent);
+}
+.w6w-expr-chip-secret {
+  border-color: var(--w6w-danger);
+  color: var(--w6w-danger);
+  background: color-mix(in srgb, var(--w6w-danger) 14%, transparent);
+}
+.w6w-expr-chip-expr {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--w6w-text) 8%, transparent);
+}
+.w6w-expr-chip-render {
+  border-color: var(--w6w-success);
+  color: var(--w6w-success);
+  background: color-mix(in srgb, var(--w6w-success) 14%, transparent);
+}
+.w6w-expr-chip-sigil {
+  flex: none;
+  font-weight: var(--w6w-fw-semibold);
+  opacity: 0.8;
+}
+.w6w-expr-chip-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--w6w-fw-medium);
+}
+.w6w-expr-chip-x {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  font-size: var(--w6w-fs-sm);
+  line-height: 1;
+  cursor: pointer;
+}
+.w6w-expr-chip-x:hover {
+  opacity: 1;
+  background: var(--w6w-border);
+}
+/* The render affordance: flips a var/render chip in place (see `makeChip`). */
+.w6w-expr-chip-toggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  font-size: var(--w6w-fs-xs);
+  line-height: 1;
+  cursor: pointer;
+}
+.w6w-expr-chip-toggle:hover {
+  opacity: 1;
+  background: var(--w6w-border);
+}
+.w6w-expr-replace {
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  font-family: inherit;
+  padding: 3px var(--w6w-sp-2);
+  cursor: pointer;
+}
+.w6w-expr-replace:hover {
+  color: var(--w6w-text);
+  background: var(--w6w-panel);
+}
+/* Insert affordance + popover menu (variable / secret / expression). */
+.w6w-expr-insert {
+  position: relative;
+  display: inline-flex;
+}
+.w6w-expr-insert-btn {
+  border: 1px dashed var(--w6w-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  font-family: inherit;
+  padding: 3px var(--w6w-sp-2);
+  cursor: pointer;
+}
+.w6w-expr-insert-btn:hover {
+  color: var(--w6w-text);
+  border-color: var(--w6w-accent);
+}
+.w6w-expr-menu {
+  position: absolute;
+  top: calc(100% + var(--w6w-sp-1));
+  left: 0;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  min-width: 200px;
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+}
+.w6w-expr-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+.w6w-expr-menu-group + .w6w-expr-menu-group {
+  border-top: 1px solid var(--w6w-border);
+  padding-top: var(--w6w-sp-2);
+}
+.w6w-expr-menu-label {
+  font-size: 0.72em;
+  font-weight: var(--w6w-fw-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--w6w-muted);
+}
+/* A secret-typed field surfaces the Secrets group first + highlighted, so
+   picking a secret is the obvious one-click path (task 3.2). */
+.w6w-expr-menu-group.is-primary {
+  background: var(--w6w-panel-2);
+  border-radius: 6px;
+  padding: var(--w6w-sp-1-5);
+  margin: -2px;
+}
+.w6w-expr-menu-group.is-primary .w6w-expr-menu-label {
+  color: var(--w6w-accent);
+}
+.w6w-expr-menu-empty {
+  font-size: var(--w6w-fs-xs);
+  color: var(--w6w-muted);
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  font-style: italic;
+}
+.w6w-expr-menu-item {
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+}
+.w6w-expr-menu-item:hover {
+  background: var(--w6w-panel-2);
+}
+.w6w-expr-menu-add {
+  display: flex;
+  gap: var(--w6w-sp-1-5);
+  align-items: center;
+}
+.w6w-expr-menu-add input {
+  flex: 1;
+  min-width: 0;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: 5px var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+}
+.w6w-expr-menu-add input:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+
+/* Typed key/value rows (the `vars` form element / `data` control step). */

package/src/styles/_code.scss

@@ -0,0 +1,139 @@
+.w6w-code-block {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  margin: 0;
+  overflow-x: auto;
+  padding: var(--w6w-sp-3) 14px;
+  tab-size: 2;
+}
+.w6w-code-block code {
+  background: none;
+  display: block;
+  font-family: var(--w6w-font-mono);
+  font-size: 13px;
+  line-height: 1.55;
+  padding: 0;
+}
+/* Each line is its own row so a line number can sit beside the text rather
+   than inside it — a number inside the flow would be caught by a copy. */
+.w6w-code-line {
+  display: flex;
+  gap: var(--w6w-sp-3);
+  white-space: pre;
+}
+.w6w-code-line-text {
+  white-space: inherit;
+}
+/* `user-select: none` keeps the gutter out of a mouse selection; `aria-hidden`
+   on the element keeps it out of the accessibility tree. Both are needed —
+   neither one alone stops a copy from picking up the digits. */
+.w6w-code-line-no {
+  color: var(--w6w-muted);
+  flex: 0 0 auto;
+  min-width: 2ch;
+  opacity: 0.65;
+  text-align: right;
+  user-select: none;
+}
+/* Wrapped mode indents continuation rows to the text column so a wrapped line
+   still reads as one line. */
+.w6w-code-block--wrap .w6w-code-line,
+.w6w-code-block--wrap .w6w-code-line-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.w6w-code-block--wrap {
+  overflow-x: hidden;
+}
+
+/* Resolved params (Test tab, read-only): inline badge weight — like
+   JsonParamField's "Invalid JSON" hint, not a full `.w6w-result.w6w-error`
+   block per param, since either can appear once per configured param. */
+.w6w-param-unresolved {
+  color: var(--w6w-danger);
+  font-size: 0.85em;
+  font-style: italic;
+}
+.w6w-param-unevaluated {
+  color: var(--w6w-muted);
+  font-size: 0.85em;
+  font-style: italic;
+}
+
+/* One resolved param: a table row, not a stacked form field — this list is
+   read-only display, never an editable `.w6w-field`, so it earns its own
+   compact key-left/value-right layout instead of a label-above-control block
+   (human report, 2026-09-01: key and value were indistinguishable and every
+   row burned a full stacked block of vertical space). ONE grid across the
+   whole list (`.w6w-resolved-table`), not one grid per row, so every row's
+   key column lines up with the one above and below it. */
+.w6w-resolved-table {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+}
+/* Each row is `display: contents` — it renders no box of its own, so its two
+   children (label, value) become direct items of the parent grid above,
+   sharing its column tracks instead of sizing their own. */
+.w6w-resolved-row {
+  display: contents;
+  font-size: calc(var(--w6w-fs-sm) * 0.9);
+}
+/* No `column-gap` on the grid: a gap leaves a hole no cell's own border
+   crosses, breaking the row divider into two segments. The same visual
+   space between key and value comes from padding instead, which is part of
+   each cell's own box — the border-bottom stays one unbroken line. */
+.w6w-resolved-row > * {
+  padding: var(--w6w-sp-1-5) 0;
+  border-bottom: 1px solid var(--w6w-border);
+}
+.w6w-resolved-row:last-child > * {
+  border-bottom: none;
+}
+.w6w-resolved-label {
+  padding-right: var(--w6w-sp-3);
+  color: var(--w6w-muted);
+}
+/* One resolved row's value. `anywhere` (not `break-word`) because these values
+   are markup and URLs as often as prose: a single unbroken 40kB attribute
+   string would otherwise force the whole modal to scroll sideways. Full-
+   strength text color (not `--w6w-muted`) so it reads as the actual content,
+   distinct from the label beside it. */
+.w6w-resolved-value {
+  color: var(--w6w-text);
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+/* 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-text-full {
+  display: block;
+  margin: var(--w6w-sp-1) 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);
+  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);
+  white-space: pre-wrap;
+}
+/* Link-weight toggle — this sits inside a value, so it must not read as a
+   second action competing with the modal's own buttons. */
+.w6w-resolved-more {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-left: var(--w6w-sp-2);
+  color: var(--w6w-accent);
+  font-size: 0.85em; /* lint-tokens-allow: matches the sibling code-typography rules above in this same file */
+  cursor: pointer;
+  white-space: nowrap;
+}
+.w6w-resolved-more:hover {
+  text-decoration: underline;
+}

package/src/styles/_copyable.scss

@@ -0,0 +1,147 @@
+/* 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
+   is flattened below, so the value and the copy affordance read as ONE box. */
+.w6w-copyable {
+  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);
+  /* Box-family invariant: byte-identical to `.w6w-fx-wrap`'s at `_fx.scss:13` —
+     six rules across four partials share this value (`building-blocks.md` §3
+     row 7); a scale token here would drift the moment that family moves. */
+  min-height: 38px;
+}
+/* A textarea/pre is taller than the button, so the button rides at the top —
+   mirrors `.w6w-fx-wrap:has(> textarea)` (`_fx.scss:16-18`). */
+.w6w-copyable:has(> textarea),
+.w6w-copyable:has(> pre) {
+  align-items: flex-start;
+}
+/* Focus reads on the box now that the inner control has no border of its own. */
+.w6w-copyable:focus-within {
+  border-color: var(--w6w-accent);
+}
+.w6w-copyable > input,
+.w6w-copyable > textarea,
+.w6w-copyable > pre {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* The control inside the wrapper carries NO chrome of its own. Mirrors
+   `_fx.scss:36-88`'s selector list and property list WHOLESALE
+   (s/w6w-fx-wrap/w6w-copyable/g) — not re-derived, gated for parity by the
+   project's test plan. See that file for the measured leak evidence (7.0px
+   alignment / 2px / 29% height) each property below defends against; a host
+   page's unscoped `input[type="text"], … textarea { … }` rule (studio's own,
+   layered AFTER this stylesheet) is exactly what these declarations beat. */
+.w6w-field .w6w-copyable input[type="text"],
+.w6w-field .w6w-copyable input[type="password"],
+.w6w-field .w6w-copyable input[type="number"],
+.w6w-field .w6w-copyable select,
+.w6w-field .w6w-copyable textarea,
+.w6w-datavar-row .w6w-copyable input,
+.w6w-datavar-row .w6w-copyable select,
+.w6w-copyable input[type="text"],
+.w6w-copyable input[type="password"],
+.w6w-copyable input[type="number"],
+.w6w-copyable select,
+.w6w-copyable textarea {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  /* lint-tokens-allow: mirrors _fx.scss:36-88 byte-for-byte, required by the parity gate */
+  padding: 4px 2px;
+  outline: none;
+  margin: 0;
+  min-height: 0;
+}
+/* The wrapper never draws a box around a box (mirrors `_fx.scss:91-98`). */
+.w6w-copyable .w6w-code-block {
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+/* Button chrome extends `.w6w-icon-btn` (`_icons.scss:1-11`) in markup — this
+   class only pins the flex behaviour and the copied state, no re-authored
+   hover/active states. */
+.w6w-copyable-btn {
+  flex: none;
+}
+
+/* ── CodeBlock: the button OVERLAYS the box's top-right corner ──────────────
+   For an <input>/<textarea> the button is a flex sibling, which is right: the
+   value is one line and the control shrinks to leave room for it. A <pre> is
+   different — it is a block of many lines, and a flex sibling would carve a
+   permanent empty column out of the full height of it to seat one 28px button.
+   So here the button leaves the flow and sits over the corner instead.
+
+   Absolute against the WRAPPER, not the <pre>, on purpose: the <pre> is the
+   element that scrolls (`overflow-x: auto`, plus `overflow-y` when `maxHeight`
+   is set), so anchoring to it would slide the button out of view on a wide or
+   tall snippet. Anchored to the wrapper it stays pinned to the visible corner. */
+.w6w-copyable:has(> pre) {
+  position: relative;
+}
+.w6w-copyable:has(> pre) > .w6w-copyable-btn {
+  position: absolute;
+  top: var(--w6w-sp-1);
+  right: var(--w6w-sp-1);
+  /* An opaque backdrop, which the flex-sibling case does not need: this button
+     sits ON the code, and `.w6w-icon-btn`'s transparent idle state would let
+     the first line's text read through it. It also restores the hover feedback
+     — `.w6w-icon-btn:hover` paints `--w6w-panel-2`, which is the wrapper's own
+     background here and would otherwise be a no-op. */
+  background: var(--w6w-panel);
+  border-color: var(--w6w-border);
+}
+/* Keep the first line clear of the button. Deliberately NOT folded into the
+   `.w6w-copyable .w6w-code-block` reset above — that rule mirrors
+   `_fx.scss:91-98` and is held byte-for-byte by the parity gate. 40px = the
+   button's ~28px box + its 4px inset + a 8px gap before the text. */
+.w6w-copyable:has(> pre) > .w6w-code-block {
+  padding-right: var(--w6w-sp-10);
+}
+.w6w-copyable-btn.is-copied {
+  /* Mirrors `.w6w-expr-chip-render`'s "confirmed/success" convention exactly
+     (`_chips.scss:38-42`) — the one visual for a copied/success state. */
+  border-color: var(--w6w-success);
+  color: var(--w6w-success);
+  background: color-mix(in srgb, var(--w6w-success) 14%, transparent);
+}
+/* Scoped visually-hidden live region — not a new general `sr-only` utility
+   (none exists in `ui` to extend; see `Copyable.tsx` for why this, not the
+   button's own accessible name, carries the "Copied" announcement). */
+.w6w-copyable-status {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+  padding: 0;
+}
+
+/* ── Bare modifier: CopyableText (D-7) ───────────────────────────────────
+   A self-contained modifier, NOT a widening of the shared `> input, >
+   textarea, > pre` selector above (`:28-33`) — that list stays untouched.
+   Strips the box chrome the base `.w6w-copyable` rule sets (`:5-17`: border,
+   background, padding, min-height), and separately gives its own `> span`
+   child the SAME flex-and-shrink pair the shared selector gives an
+   `<input>`/`<textarea>`/`<pre>` (`:28-33` below) — a bare `<span>` is not in
+   that list, and without this it silently reproduces the overflow bug
+   `studio/src/pages/VarsPage.tsx:62-79` had to hand-patch. */
+.w6w-copyable--bare {
+  border: none;
+  background: transparent;
+  padding: 0;
+  min-height: 0;
+}
+.w6w-copyable--bare > span {
+  flex: 1 1 auto;
+  min-width: 0;
+}

package/src/styles/_data-vars.scss

@@ -0,0 +1,38 @@
+.w6w-datavar-row {
+  display: grid;
+  grid-template-columns: 1fr 110px 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;
+}
+.w6w-datavar-row input,
+.w6w-datavar-row select {
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2);
+  color: var(--w6w-text);
+  font-size: 13px;
+  font-family: inherit;
+  min-width: 0;
+}
+/* The block above is `.w6w-datavar-row input` at (0,1,1), which TIES with a host
+   `input[type="text"] { margin-top: 4px }` and loses on source order — so the
+   margin has to be re-declared at a specificity that wins, rather than added to
+   that block where it would have no effect. `.w6w-field` is always an ancestor
+   here (`VarsField` renders one), giving (0,2,1). */
+.w6w-field .w6w-datavar-row input,
+.w6w-field .w6w-datavar-row select {
+  margin: 0;
+}
+.w6w-datavar-row input:focus,
+.w6w-datavar-row select:focus {
+  outline: none;
+  border-color: var(--w6w-accent);
+}
+.w6w-datavar-row .w6w-btn {
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-2-5);
+}