@w6w/ui 0.0.0-stage → 0.1.1

package/src/styles/_multiselect.scss

@@ -0,0 +1,69 @@
+/* Material-style multi-select: chips live INSIDE a single input-like box,
+   followed by the dropdown which reads as the trailing placeholder. */
+.w6w-multiselect {
+  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;
+}
+.w6w-multiselect:focus-within {
+  border-color: var(--w6w-accent);
+}
+.w6w-multiselect.is-readonly {
+  opacity: 0.7;
+}
+/* The add-dropdown blends into the box (no border/background) — compound
+   selector so it beats the global `.w6w-field select` styling. */
+.w6w-field .w6w-multiselect-add,
+.w6w-multiselect .w6w-multiselect-add {
+  flex: 1 1 90px;
+  min-width: 90px;
+  border: none;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  font-family: inherit;
+  padding: var(--w6w-sp-0-5) 0;
+  outline: none;
+  cursor: pointer;
+}
+.w6w-multiselect .w6w-multiselect-add:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+/* A selected value, rendered as a filled chip inside the box. */
+.w6w-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: 6px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-1) var(--w6w-sp-0-5) var(--w6w-sp-2);
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--w6w-text);
+}
+.w6w-chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-sm);
+  line-height: 1;
+  cursor: pointer;
+}
+.w6w-chip-x:hover {
+  background: var(--w6w-border);
+  color: var(--w6w-text);
+}

package/src/styles/_repo-sync-indicator.scss

@@ -0,0 +1,99 @@
+.w6w-repo-sync {
+  position: relative;
+  display: inline-flex;
+}
+.w6w-repo-sync-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  padding: var(--w6w-sp-1-5) var(--w6w-sp-3);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  background: var(--w6w-panel-2);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+.w6w-repo-sync-trigger:hover {
+  border-color: var(--w6w-accent);
+}
+.w6w-repo-sync-icon {
+  position: relative;
+  display: inline-flex;
+}
+.w6w-repo-sync-spin {
+  position: absolute;
+  bottom: calc(-1 * var(--w6w-sp-0-5));
+  right: calc(-1 * var(--w6w-sp-0-5));
+  width: 10px;
+  height: 10px;
+  background: var(--w6w-panel-2);
+  border-radius: 50%;
+  animation: w6w-spin 0.8s linear infinite;
+}
+@keyframes w6w-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .w6w-repo-sync-spin {
+    animation: none;
+  }
+}
+.w6w-repo-sync-branch {
+  font-weight: var(--w6w-fw-medium);
+}
+.w6w-repo-sync-sha {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  font-family: var(--w6w-font-mono);
+}
+.w6w-repo-sync-menu {
+  position: absolute;
+  top: calc(100% + var(--w6w-sp-1-5));
+  right: 0;
+  min-width: 220px;
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  padding: var(--w6w-sp-1-5);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+}
+.w6w-repo-sync-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+.w6w-repo-sync-detail > :first-child {
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-medium);
+}
+.w6w-repo-sync-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  cursor: pointer;
+}
+.w6w-repo-sync-item:hover:not(:disabled) {
+  background: var(--w6w-panel-2);
+}
+.w6w-repo-sync-item:disabled {
+  cursor: default;
+  opacity: 0.6;
+}

package/src/styles/_scale.scss

@@ -0,0 +1,70 @@
+/*
+ * @w6w/ui — the spacing / typography scale.
+ *
+ * Values are MIRRORED, not invented, from `packages/frontend/packages/web`'s
+ * `src/styles/global.css:83-130` — that file is the canonical reference (it
+ * arrived at the same 4px base independently); this block copies its
+ * `--sp-*`/`--fs-*`/`--fw-*`/`--lh-*`/`--font-*` values byte-for-byte under the
+ * `--w6w-*` namespace this package already uses for every other token.
+ * `--fs-hero`'s `clamp()` stays `web`-only (a marketing-page concern; `ui` has
+ * no hero). Colour tokens, `--radius*`, `--shadow-*` and `--transition-fast`
+ * are NOT part of this scale — see `_tokens.scss`.
+ *
+ * HALF-STEPS (`--w6w-sp-0-5` / `--w6w-sp-1-5` / `--w6w-sp-2-5`) are `ui`-only
+ * additions on top of `web`'s set — `web` has none. The rule that keeps this a
+ * system rather than a free-for-all: whole steps for new code; a half-step is
+ * only for preserving an existing measured value that does not sit on a 4px
+ * step. Parity with `web` is therefore DIRECTIONAL — `ui` ⊇ `web` on the
+ * shared key set (every `web` token here has a byte-identical `ui` counterpart;
+ * `ui` additionally declares the three half-steps `web` does not).
+ *
+ * One `:where(:root)` block, not colour's three-way light / prefers-color-scheme /
+ * [data-theme] split — the scale is not theme-dependent, so a single specificity-0
+ * block covers every mode. Positioning this partial's `@use` line immediately
+ * after `styles/tokens` (see `styles.scss`) is a readability convention, not a
+ * cascade constraint: CSS custom properties resolve at computed-value time, so
+ * definition order relative to consumption order does not matter here, unlike
+ * `_tokens.scss`'s internal prefers-color-scheme / [data-theme] ordering, which
+ * IS load-bearing.
+ */
+
+:where(:root) {
+  /* Spacing — 4px ramp. Values mirror frontend/web's --sp-* verbatim. */
+  --w6w-sp-1: 4px;   --w6w-sp-2: 8px;   --w6w-sp-3: 12px;  --w6w-sp-4: 16px;
+  --w6w-sp-5: 20px;  --w6w-sp-6: 24px;  --w6w-sp-8: 32px;  --w6w-sp-10: 40px;
+  --w6w-sp-12: 48px; --w6w-sp-16: 64px; --w6w-sp-20: 80px;
+
+  /* Half-steps — ui-only, see the decision above. */
+  --w6w-sp-0-5: 2px; --w6w-sp-1-5: 6px; --w6w-sp-2-5: 10px;
+
+  /* Type ramp — rem, role names mirror frontend/web's --fs-*. */
+  --w6w-fs-xs: 0.75rem;  --w6w-fs-sm: 0.875rem; --w6w-fs-base: 1rem;
+  --w6w-fs-lg: 1.125rem; --w6w-fs-xl: 1.25rem;  --w6w-fs-2xl: 1.5rem;
+  --w6w-fs-3xl: 2rem;
+
+  --w6w-fw-regular: 400; --w6w-fw-medium: 500; --w6w-fw-semibold: 600; --w6w-fw-bold: 700;
+
+  --w6w-lh-tight: 1.2; --w6w-lh-normal: 1.5; --w6w-lh-relaxed: 1.7;
+
+  --w6w-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --w6w-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/*
+ * Breakpoints — Sass variables, NOT CSS custom properties.
+ *
+ * `@media (min-width: var(--w6w-bp-md))` is invalid in every browser: a media
+ * query condition cannot read a custom property. So these live as Sass
+ * variables instead, resolved before the browser ever sees the stylesheet.
+ * `!default` lets a Sass consumer override one:
+ *
+ *   @use "@w6w/ui/styles/scale" with ($w6w-bp-md: 960px);
+ *
+ * `ui` itself consumes none of these — it deliberately ships no layout media
+ * queries (the host owns page layout; `ui` owns component internals). They
+ * exist purely so a consumer stops inventing its own breakpoint values (seven
+ * uncoordinated ones exist across the four repos today).
+ */
+$w6w-bp-sm: 640px !default;
+$w6w-bp-md: 900px !default;
+$w6w-bp-lg: 1200px !default;

package/src/styles/_sections.scss

@@ -0,0 +1,36 @@
+.w6w-section {
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) var(--w6w-sp-2-5);
+}
+.w6w-section > summary {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+}
+.w6w-section-title {
+  color: var(--w6w-text);
+  font-weight: var(--w6w-fw-semibold);
+}
+.w6w-section-subtitle {
+  color: var(--w6w-muted);
+  font-size: 0.8em;
+}
+.w6w-section-body {
+  margin-top: var(--w6w-sp-2);
+}
+
+/* Inline "Test run" block in the step builder (sits above the footer). */
+.w6w-steptest {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  flex-shrink: 0;
+}
+.w6w-steptest-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+}
+/* A labeled test-run output block (Result vs Console). */

package/src/styles/_server-resources.scss

@@ -0,0 +1,163 @@
+/*
+ * Server resources — the four presentational variants from
+ * `src/components/ServerResources.tsx` (card, small card, rail, badge).
+ *
+ * Spacing and type come from the `--w6w-sp-*` / `--w6w-fs-*` ramps only, so a
+ * host that re-tunes the scale re-tunes these too; box geometry (heights,
+ * track widths, radii) is deliberately literal, as everywhere else in this
+ * package. The only colour that is not a themed token reference is the
+ * sparkline stroke, which is `--w6w-accent` in both modes.
+ *
+ * The rail variant is the size-sensitive one: it lands in a ~200 px sidebar
+ * column, so every part of it is `min-width: 0`-safe and the sparkline is
+ * scaled by `preserveAspectRatio="none"` rather than given an intrinsic width.
+ */
+
+.w6w-server-resources {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  min-width: 0;
+  color: var(--w6w-text);
+  font-size: var(--w6w-fs-sm);
+  line-height: var(--w6w-lh-normal);
+}
+
+.w6w-server-resources__title {
+  margin: 0;
+  font-size: var(--w6w-fs-base);
+  font-weight: var(--w6w-fw-semibold);
+  line-height: var(--w6w-lh-tight);
+}
+
+.w6w-server-resources__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.w6w-server-resources__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: var(--w6w-sp-1) var(--w6w-sp-2);
+}
+
+.w6w-server-resources__label {
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.w6w-server-resources__value {
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The line itself. `stroke` is repeated as a property (not only as the
+   polyline's presentation attribute) so a host stylesheet can re-colour it
+   without reaching into the SVG. */
+.w6w-server-resources__spark {
+  grid-column: 1 / -1;
+  display: block;
+  width: 100%;
+  height: 28px;
+  stroke: var(--w6w-accent);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  overflow: visible;
+}
+
+.w6w-server-resources__meta {
+  margin: 0;
+  color: var(--w6w-muted);
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-xs);
+}
+
+/* --- card ---------------------------------------------------------------- */
+
+.w6w-server-resources--card {
+  gap: var(--w6w-sp-3);
+  padding: var(--w6w-sp-4);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+}
+
+/* --- small card ---------------------------------------------------------- */
+
+.w6w-server-resources--small {
+  gap: var(--w6w-sp-1-5);
+  padding: var(--w6w-sp-3);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+}
+
+.w6w-server-resources--small .w6w-server-resources__title {
+  font-size: var(--w6w-fs-sm);
+}
+
+/* --- rail ---------------------------------------------------------------- */
+
+.w6w-server-resources--rail {
+  gap: var(--w6w-sp-1);
+  padding: var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel);
+}
+
+.w6w-server-resources__rail-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: baseline;
+  gap: 0 var(--w6w-sp-2);
+}
+
+.w6w-server-resources__rail-row .w6w-server-resources__value {
+  text-align: right;
+}
+
+.w6w-server-resources__rail-row .w6w-server-resources__spark {
+  height: 20px;
+}
+
+.w6w-server-resources__expand {
+  width: 100%;
+  padding: var(--w6w-sp-1) var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  background: var(--w6w-panel-2);
+  color: var(--w6w-muted);
+  font-family: inherit;
+  font-size: var(--w6w-fs-xs);
+  cursor: pointer;
+}
+
+.w6w-server-resources__expand:hover {
+  color: var(--w6w-text);
+  border-color: var(--w6w-accent);
+}
+
+/* --- badge --------------------------------------------------------------- */
+
+.w6w-server-resources--badge {
+  flex-direction: row;
+  gap: var(--w6w-sp-2);
+  align-items: center;
+  padding: 0 var(--w6w-sp-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  background: var(--w6w-panel-2);
+  font-family: var(--w6w-font-mono);
+  font-size: var(--w6w-fs-xs);
+  white-space: nowrap;
+}