@w6w/ui 0.1.1 → 0.2.0

package/dist/provider.d.ts

@@ -119,12 +119,21 @@ export interface ListAppsPageOptions {
     compact?: boolean;
     /** Abort this request. Local request control only; never a wire field. */
     signal?: AbortSignal;
+    /** Snapshot id from a prior {@link AppsPageResult.snapshot}. Navigation normally uses `cursor` alone. */
+    snapshot?: string;
+    /** Absolute offset into the snapshot. */
+    offset?: number;
 }
 /** One page of apps, as returned by {@link W6WApi.listAppsPage}. */
 export interface AppsPageResult {
     apps: AppSummary[];
     /** Present unless this is the last page. */
     nextCursor?: string;
+    snapshot?: string;
+    total?: number;
+    offset?: number;
+    limit?: number;
+    expiresAt?: string;
 }
 export interface W6WApi {
     /**
@@ -174,6 +183,16 @@ export interface W6WApi {
         displayName?: string;
         profile?: Record<string, unknown>;
     }): Promise<ConnectionSummary>;
+    /**
+     * Rename a connection and/or replace some of its credential fields (`PATCH /connections/:id`).
+     * Send only the fields being changed: the server merges a partial `credential` over the stored
+     * one. Optional: when absent, `EditConnectionModal` shows no Save button (a one-line notice
+     * instead) and hosts should not offer an Edit action. It never throws for the absence.
+     */
+    updateConnection?(id: string, body: {
+        displayName?: string;
+        credential?: Record<string, unknown>;
+    }): Promise<ConnectionSummary>;
     /**
      * Start an OAuth 2.0 flow. Server builds the provider's authorize URL and
      * returns it; the caller opens it in a popup and awaits the server's

package/dist/reliability-board-layout.d.ts

@@ -0,0 +1,121 @@
+/**
+ * How the reliability board arranges itself — the decisions that are arithmetic
+ * rather than markup, kept pure (no React, no DOM) so they test without a DOM
+ * and so `@w6w/embed` can import them beside the components.
+ *
+ * **None of these decide a STATE.** Every state read below arrived already
+ * decided by the server; nothing here compares a ratio, applies a threshold to
+ * call data, or invents a fifth word. What these decide is where a row is PUT,
+ * which is presentation.
+ */
+/** The four words the server uses for a health verdict. */
+export type ReliabilityViewState = "ok" | "degraded" | "down" | "unknown";
+/**
+ * The row shape the reliability components render — owned by `@w6w/ui` so it
+ * imports nothing from the SDK. The SDK's `ReliabilityService` assigns to it
+ * structurally; the generic functions below keep the caller's richer row type.
+ */
+export interface ReliabilityServiceView {
+    appId: string;
+    displayName: string;
+    /** Inline icon fields — the board never asks a catalog for them. */
+    iconSrc?: string;
+    iconSrcDark?: string;
+    brandColor?: string;
+    /** "Did YOUR calls succeed". */
+    state: ReliabilityViewState;
+    calls: number;
+    errors: {
+        e4xx: number;
+        e429: number;
+        eAuth: number;
+        e5xx: number;
+    };
+    p95Ms: number | null;
+    ongoingOutageId: string | null;
+    /** One entry per calendar day, oldest first, exactly as the server sent it. */
+    uptime: readonly {
+        day: string;
+        state: ReliabilityViewState;
+    }[];
+    /** "What does the vendor say about itself"; `null` when no public check exists. */
+    vendorStatus: {
+        state: ReliabilityViewState;
+        message: string | null;
+    } | null;
+    /** The server's tier for the row — read, never re-derived. */
+    attention: "now" | "recent" | "none";
+}
+/** One point of the performance scatter — a service with both a call volume and a measured p95. */
+export interface PerformancePoint {
+    appId: string;
+    displayName: string;
+    calls: number;
+    p95Ms: number;
+    state: ReliabilityViewState;
+    /** Total errors across all four kinds — drives the point's size, not its position. */
+    errorCount: number;
+}
+/**
+ * Every service with at least one timed call, as a (calls, p95) point — what
+ * the performance chart plots. Excludes `p95Ms: null`: there is no Y position
+ * for a service with nothing timed.
+ */
+export declare function performancePoints(services: readonly ReliabilityServiceView[]): PerformancePoint[];
+/**
+ * Does this service want the reader's attention? READS the tier the server
+ * sent (`attention`), never re-derives it from `state` or `vendorStatus`: the
+ * server's `boardRank` is the one implementation, and a second copy here would
+ * drift. `now` and `recent` both count; they differ in tense only.
+ */
+export declare function needsAttention(service: Pick<ReliabilityServiceView, "attention">): boolean;
+/** The board in its three groups, each keeping the server's own ordering. */
+export interface BoardPartition<T extends ReliabilityServiceView = ReliabilityServiceView> {
+    /** Broken right now, on either signal. */
+    now: T[];
+    /** Clear now, but this window holds a failed stretch or an open advisory. */
+    recent: T[];
+    /** Everything else, in the server's recency order. */
+    clear: T[];
+}
+/**
+ * Group the board without reordering within any group. Bucketing is not
+ * sorting: each group comes out in the order it arrived. An unrecognised
+ * `attention` value falls to `clear` rather than throwing — a client can be
+ * older than the server that answered it.
+ */
+export declare function partitionBoard<T extends ReliabilityServiceView>(services: readonly T[]): BoardPartition<T>;
+/**
+ * The uptime strip's cells for one service — the server's own array, in the
+ * order it arrived (oldest first). A passthrough on purpose: no sort, no
+ * reverse, no gap filling. The strip has no date axis, so a reversed array is
+ * visually plausible and would silently move an outage to the wrong end.
+ */
+export declare function uptimeDays(service: Pick<ReliabilityServiceView, "uptime">): {
+    day: string;
+    state: ReliabilityViewState;
+}[];
+/** Compact mode shows at most this many needs-attention cards, `now` filling first. */
+export declare const ATTENTION_DISPLAY_CAP = 3;
+/** Compact mode shows this many table rows unless the caller passes `limit`. */
+export declare const RECENT_DISPLAY_CAP = 5;
+/** What the board shows and what a display cap hid. */
+export interface BoardDisplay<T extends ReliabilityServiceView = ReliabilityServiceView> {
+    /** TRUE total of attention rows (the whole input, not the capped slice). */
+    attentionCount: number;
+    shownNow: T[];
+    shownRecent: T[];
+    hiddenAttentionCount: number;
+    /** Table rows in the server's order, every attention tier included. */
+    shownTable: T[];
+    hiddenTableCount: number;
+}
+/**
+ * Apply the display caps to the complete board. Compact: ≤ 3 attention cards
+ * (`now` first, `recent` tops up) and `limit ?? 5` table rows; otherwise
+ * uncapped. Hidden counts are computed from the full input, so they are real.
+ */
+export declare function displayBoard<T extends ReliabilityServiceView>(services: readonly T[], opts?: {
+    compact?: boolean;
+    limit?: number;
+}): BoardDisplay<T>;

package/dist/types.d.ts

@@ -328,6 +328,14 @@ export interface ConnectionSummary {
     profile?: Record<string, unknown>;
     createdAt?: string;
     updatedAt?: string;
+    /**
+     * True for the server's synthetic "no credential needed" rows. They have no stored credential,
+     * so the server 404s get/test/delete on their ids; the connection UI offers nothing on them.
+     * Detect with this flag only, never an id prefix.
+     */
+    builtIn?: boolean;
+    /** The last test result: `false` = failed, `null`/absent = never tested. */
+    lastTestOk?: boolean | null;
 }
 /** A saved set of action-test input values, scoped to a connection + action. */
 export interface SavedTest {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w6w/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "React components for w6w — central API management. Build plugins, apps and integrations on them.",
   "license": "MIT",
   "homepage": "https://w6w.io",
@@ -98,7 +98,7 @@
     "build:css": "node scripts/build-css.mjs",
     "check:css": "node scripts/build-css.mjs --check",
     "typecheck": "tsc -b --noEmit",
-    "test": "node --conditions=w6w-source --import ./src/test-jsx-loader.mjs --test src/__tests__/*.test.ts src/components/__tests__/*.test.ts",
+    "test": "node --max-old-space-size=2048 --conditions=w6w-source --import ./src/test-jsx-loader.mjs --test --test-concurrency=4 --test-timeout=120000 src/__tests__/*.test.ts src/components/__tests__/*.test.ts",
     "test:picker-layout": "bash test/picker-layout/run.sh",
     "test:expr-template": "bash test/expr-template/run.sh",
     "test:action-test-form": "bash test/action-test-form/run.sh",

package/src/styles/_callable-list.scss

@@ -0,0 +1,60 @@
+.w6w-callable-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-4);
+}
+.w6w-callable-list-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--w6w-sp-4);
+}
+.w6w-callable-list-heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  min-width: 0;
+}
+.w6w-callable-list-title {
+  margin: 0;
+}
+.w6w-callable-list-description {
+  margin: 0;
+}
+.w6w-callable-list-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  cursor: pointer;
+}
+.w6w-callable-list-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.w6w-callable-list-body {
+  border: 1px solid var(--w6w-border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2);
+}
+.w6w-callable-list-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+.w6w-callable-list-trail {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-callable-list-badge {
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  border-radius: 999px;
+  border: 1px solid var(--w6w-border);
+  color: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}

package/src/styles/_connections.scss

@@ -0,0 +1,100 @@
+/* Connections (D-12u): ConnectionList, ConnectionHeader and the state tags they share. */
+.w6w-connection-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+.w6w-connection-list-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--w6w-sp-4);
+}
+.w6w-connection-list-heading {
+  min-width: 0;
+}
+.w6w-connection-list-actions {
+  display: flex;
+  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;
+  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);
+  flex-shrink: 0;
+}
+.w6w-connection-name {
+  margin-right: var(--w6w-sp-2);
+}
+
+/* State tags (connected / needs attention / invalid). */
+.w6w-connection-tag {
+  display: inline-block;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  font-size: var(--w6w-fs-xs);
+  margin-right: var(--w6w-sp-1);
+}
+.w6w-connection-tag-warn {
+  color: #ffb86b;
+  border-color: #ffb86b;
+}
+.w6w-connection-tag-danger {
+  color: var(--w6w-danger);
+  border-color: var(--w6w-danger);
+}
+
+/* ConnectionHeader */
+.w6w-connection-header {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+}
+.w6w-connection-header-main {
+  flex: 1;
+  min-width: 0;
+}
+.w6w-connection-header-title {
+  margin: 0;
+}
+.w6w-connection-header-meta {
+  margin: 0;
+}
+.w6w-connection-header-actions {
+  display: flex;
+  gap: var(--w6w-sp-1-5);
+  align-items: center;
+}
+/* The id's copy button appears on hover/focus only. */
+.w6w-connection-id-copy.w6w-copyable {
+  display: inline-flex;
+  width: auto;
+  min-width: 0;
+  vertical-align: middle;
+}
+.w6w-connection-id-copy .w6w-copyable-btn {
+  opacity: 0;
+}
+.w6w-connection-id-copy:hover .w6w-copyable-btn,
+.w6w-connection-id-copy:focus-within .w6w-copyable-btn {
+  opacity: 1;
+}

package/src/styles/_lists.scss

@@ -16,6 +16,10 @@ button.w6w-list-item {
   font: inherit;
   font-size: var(--w6w-fs-sm);
 }
+a.w6w-list-item {
+  text-decoration: none;
+  color: inherit;
+}
 .w6w-list-item:hover {
   background: var(--w6w-panel-2);
 }

package/src/styles/_reliability.scss

@@ -0,0 +1,339 @@
+/* --- ReliabilityList / ReliabilityChart ---------------------------------- */
+/* The service-reliability board: "needs attention" cards, a calls x p95
+   scatter and the services table. State colour throughout comes from the
+   shared `--w6w-health-*` tokens via HealthStatusPill and UptimeStrip (and,
+   for the scatter, read directly) — never from a colour written here.
+   Every navigation site (card, service cell, scatter point) may be an `<a>`,
+   a `<button>` or a plain element, so the shared rules reset all three. */
+
+.w6w-rel-section {
+  margin-bottom: var(--w6w-sp-6);
+}
+.w6w-rel-heading {
+  margin: 0 0 var(--w6w-sp-2);
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+}
+.w6w-rel-intro {
+  margin: 0 0 var(--w6w-sp-2);
+}
+.w6w-rel-card {
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+  padding: var(--w6w-sp-4);
+}
+.w6w-rel-card h4 {
+  margin: 0 0 var(--w6w-sp-2);
+}
+.w6w-rel-tag {
+  display: inline-block;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: 999px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  font-size: var(--w6w-fs-xs);
+  color: var(--w6w-muted);
+  margin-right: var(--w6w-sp-1);
+}
+.w6w-rel-group + .w6w-rel-group {
+  margin-top: var(--w6w-sp-5);
+}
+.w6w-rel-group-head {
+  margin: 0 0 var(--w6w-sp-2);
+  font-size: var(--w6w-fs-sm);
+}
+/* The "N more — view all" line under a capped section. */
+.w6w-rel-more-note {
+  margin: var(--w6w-sp-2) 0 0;
+}
+
+/* --- "Needs attention" callout — a few dense cards, not table rows -------- */
+.w6w-rel-issues {
+  display: grid;
+  /* `auto-fit`, not `auto-fill`: with fewer cards than fit the row, `auto-fill`
+     keeps empty width-reserving tracks and the cards stop short of the edge. */
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--w6w-sp-2);
+}
+.w6w-rel-issue-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+  padding: var(--w6w-sp-3);
+  background: var(--w6w-panel);
+  border: 1px solid var(--w6w-border);
+  /* Same `--w6w-health-*` tokens as the pills inside, so the stripe cannot
+     drift from the pill beside it. `down` on either signal escalates it. */
+  border-left: 3px solid var(--w6w-health-degraded);
+  border-radius: var(--w6w-radius);
+  color: inherit;
+  text-decoration: none;
+  /* button reset (the card is a <button> when only `onOpen` is given) */
+  font: inherit;
+  text-align: left;
+  width: 100%;
+  cursor: pointer;
+}
+div.w6w-rel-issue-card {
+  cursor: default;
+}
+.w6w-rel-issue-card:has(.w6w-health-pill-down) {
+  border-left-color: var(--w6w-health-down);
+}
+a.w6w-rel-issue-card:hover,
+a.w6w-rel-issue-card:focus-visible,
+button.w6w-rel-issue-card:hover,
+button.w6w-rel-issue-card:focus-visible {
+  border-color: var(--w6w-accent);
+}
+.w6w-rel-issue-head {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+.w6w-rel-issue-head-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+.w6w-rel-issue-signals {
+  display: flex;
+  gap: var(--w6w-sp-4);
+}
+.w6w-rel-issue-signal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+}
+
+/* --- Performance scatter — calls x p95, one point per API ----------------- */
+.w6w-rel-scatter svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+/* SVG shapes have no fill unless one is set here; without it the plot
+   renders as SVG's default opaque black regardless of theme. */
+.w6w-rel-scatter-plot-bg {
+  fill: var(--w6w-panel-2);
+}
+.w6w-rel-scatter-grid {
+  stroke: var(--w6w-border);
+  stroke-width: 1;
+}
+.w6w-rel-scatter-axis-label {
+  fill: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+.w6w-rel-scatter-axis-title {
+  fill: var(--w6w-muted);
+  font-size: var(--w6w-fs-xs);
+}
+/* The point's coloured ring — carries exec status. */
+.w6w-rel-scatter-ring {
+  fill: var(--w6w-panel);
+  stroke-width: 2;
+}
+.w6w-rel-scatter-ring-ok {
+  stroke: var(--w6w-health-ok);
+}
+.w6w-rel-scatter-ring-degraded {
+  stroke: var(--w6w-health-degraded);
+}
+.w6w-rel-scatter-ring-down {
+  stroke: var(--w6w-health-down);
+}
+.w6w-rel-scatter-ring-unknown {
+  stroke: var(--w6w-health-unknown);
+}
+.w6w-rel-scatter-point-link {
+  cursor: pointer;
+}
+.w6w-rel-scatter-point-link:hover .w6w-rel-scatter-ring,
+.w6w-rel-scatter-point-link:focus-visible .w6w-rel-scatter-ring {
+  stroke-width: 3;
+}
+.w6w-rel-scatter-point {
+  stroke: var(--w6w-panel);
+  stroke-width: 1.5;
+  fill-opacity: 0.85;
+}
+.w6w-rel-scatter-point-ok {
+  fill: var(--w6w-health-ok);
+}
+.w6w-rel-scatter-point-degraded {
+  fill: var(--w6w-health-degraded);
+}
+.w6w-rel-scatter-point-down {
+  fill: var(--w6w-health-down);
+}
+.w6w-rel-scatter-point-unknown {
+  fill: var(--w6w-health-unknown);
+}
+.w6w-rel-scatter-note {
+  margin: var(--w6w-sp-1) 0 0;
+}
+
+/* --- The full roster — one real <table> ------------------------------------ */
+.w6w-rel-table-wrap {
+  overflow-x: auto;
+}
+.w6w-rel-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.w6w-rel-table th {
+  padding: var(--w6w-sp-2) var(--w6w-sp-3);
+  text-align: left;
+  font-size: var(--w6w-fs-xs);
+  font-weight: var(--w6w-fw-semibold);
+  color: var(--w6w-muted);
+  border-bottom: 1px solid var(--w6w-border);
+  white-space: nowrap;
+}
+.w6w-rel-table td {
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  border-bottom: 1px solid var(--w6w-border);
+  vertical-align: top;
+}
+/* Inside a compact card there is no rule under the last row. */
+.w6w-rel-card .w6w-rel-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.w6w-rel-table tbody tr:hover {
+  background: var(--w6w-panel-2);
+}
+/* A row's own stripe — same tokens and escalation as the issue card; both the
+   tier and the state that select the token are decided server-side. */
+.w6w-rel-tr.w6w-rel-attention {
+  box-shadow: inset 3px 0 0 var(--w6w-health-degraded);
+}
+.w6w-rel-tr.w6w-rel-attention:has(.w6w-health-pill-down) {
+  box-shadow: inset 3px 0 0 var(--w6w-health-down);
+}
+.w6w-rel-tr[data-attention="recent"] {
+  box-shadow: inset 3px 0 0 var(--w6w-health-unknown);
+}
+.w6w-rel-open {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+  color: inherit;
+  text-decoration: none;
+  /* button reset (the cell is a <button> when only `onOpen` is given) */
+  font: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+  padding: 0;
+}
+a.w6w-rel-open,
+button.w6w-rel-open {
+  cursor: pointer;
+}
+.w6w-rel-td-service-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+.w6w-rel-td-service strong {
+  overflow-wrap: anywhere;
+}
+a.w6w-rel-open:hover strong,
+a.w6w-rel-open:focus-visible strong,
+button.w6w-rel-open:hover strong,
+button.w6w-rel-open:focus-visible strong {
+  color: var(--w6w-accent);
+}
+.w6w-rel-td-uptime {
+  min-width: 220px;
+}
+.w6w-rel-td-uptime .w6w-uptime-strip {
+  max-width: 260px;
+}
+/* A single short value ("397 ms" / "—"); no caption, whose varying length
+   destabilised this column's `auto` layout. */
+.w6w-rel-td-p95 {
+  white-space: nowrap;
+}
+/* Both signals stacked as one line each ("Ops: <pill>" / "API: <pill>") rather
+   than two columns, so the table fits a smaller screen without scrolling. */
+.w6w-rel-td-status {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+  min-width: 140px;
+}
+.w6w-rel-status-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+}
+.w6w-rel-status-label {
+  min-width: 28px;
+}
+/* Within a status ROW the signal reads inline, beside its label — the issue
+   card's own use of `.w6w-rel-signal` (label above pill) is unaffected. */
+.w6w-rel-status-row .w6w-rel-signal {
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+/* One labelled signal inside a state cell/card — label ABOVE its pill, so two
+   labelled pills in a narrow column do not wrap unpredictably. */
+.w6w-rel-signal {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+}
+.w6w-rel-vendor-msg {
+  color: var(--w6w-muted);
+  /* The API's own incident title — clamped, full text in the row's `title`, so
+     one verbose status page cannot stretch a board row. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+/* A service the account never called: no strip, just a note. */
+.w6w-rel-idle-note {
+  font-size: var(--w6w-fs-xs);
+  font-style: italic;
+  color: var(--w6w-text);
+}
+.w6w-rel-allclear {
+  margin-bottom: var(--w6w-sp-4);
+}
+.w6w-rel-allclear p {
+  margin: 0 0 var(--w6w-sp-1-5);
+}
+@media (max-width: 900px) {
+  /* The table scrolls inside `.w6w-rel-table-wrap` rather than reflowing —
+     4 columns of pills and a strip cannot usefully stack. */
+  .w6w-rel-table {
+    min-width: 600px;
+  }
+}
+
+/* "Show all services →" when only `onShowAll` is given: a <button> that reads as the link. */
+.w6w-rel-show-all {
+  font: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+}
+.w6w-rel-show-all:hover,
+.w6w-rel-show-all:focus-visible {
+  color: var(--w6w-accent);
+}