@w6w/ui 0.1.0 → 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
@@ -375,7 +394,8 @@ export interface W6WUIProviderProps {
     api: W6WApi;
     /**
      * Force the theme every `@w6w/ui` component resolves to — both the CSS
-     * tokens (`styles.css`'s `:where([data-theme=...])` blocks) and the
+     * tokens (`styles.css`'s `:where([data-theme=...])` blocks; `color-scheme` is
+     * declared on component roots, never on the host `<html>`) and the
      * JS-side theme-aware components (`AppIcon`, `CodeEditor`, `JsonEditor`,
      * `WorkflowFlowEditor`, via `useEffectiveTheme`) — instead of each one
      * independently falling back to `data-theme` on `<html>` or the visitor'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.0",
+  "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,10 +98,11 @@
     "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",
+    "test:host-isolation": "bash test/host-isolation/run.sh",
     "test:copyable": "bash test/copyable/run.sh",
     "test:pack-smoke": "bash test/pack-smoke/run.sh",
     "storybook": "storybook dev -p 6006 --no-open",

package/src/code.css

@@ -34,7 +34,6 @@
  */
 /* Light — the base defaults. */
 :where(:root) {
-  color-scheme: light;
   --w6w-bg: #f7f8fa;
   --w6w-panel: #ffffff;
   --w6w-panel-2: #f0f2f6;
@@ -57,13 +56,13 @@
   --w6w-code-punctuation: #5f6875;
   --w6w-code-variable: #953800;
   --w6w-radius: 10px;
+  --w6w-scheme: light;
 }
 
 /* Dark — followed automatically from the OS preference (unless a host has
    forced a mode via data-theme, which is handled by the blocks below). */
 @media (prefers-color-scheme: dark) {
   :where(:root) {
-    color-scheme: dark;
     --w6w-bg: #0f1115;
     --w6w-panel: #181b22;
     --w6w-panel-2: #1f232c;
@@ -78,6 +77,7 @@
     --w6w-health-down: var(--w6w-danger);
     --w6w-health-unknown: #9aa3b2;
     --w6w-icon-swatch: #1f232c;
+    --w6w-scheme: dark;
     --w6w-code-comment: #7d8797;
     --w6w-code-keyword: #d2a8ff;
     --w6w-code-string: #7ee787;
@@ -90,7 +90,7 @@
 /* Explicit mode. Declared AFTER the media query at equal (zero) specificity, so
    a forced data-theme always beats the OS preference. */
 :where([data-theme=light]) {
-  color-scheme: light;
+  --w6w-scheme: light;
   --w6w-bg: #f7f8fa;
   --w6w-panel: #ffffff;
   --w6w-panel-2: #f0f2f6;
@@ -115,7 +115,7 @@
 }
 
 :where([data-theme=dark]) {
-  color-scheme: dark;
+  --w6w-scheme: dark;
   --w6w-bg: #0f1115;
   --w6w-panel: #181b22;
   --w6w-panel-2: #1f232c;
@@ -147,6 +147,25 @@
   font-size: 0.85em;
 }
 
+/* color-scheme — declared on ui COMPONENT ROOTS, never on the host's <html>.
+   `color-scheme` inherits and also themes the page canvas, scrollbars and form
+   controls, so setting it on :root / [data-theme] let importing this file flip a
+   host's whole document. Instead each token block above also sets the
+   `--w6w-scheme` custom property (light / dark), which INHERITS, so the nearest
+   themed ancestor wins however themes nest (a light panel inside a dark page and
+   the reverse). Elements ui renders (any `w6w-` class, which covers the native
+   <dialog> modals) and the native controls inside them read it with
+   `color-scheme: var(--w6w-scheme)`. Not a hand-picked root list: every ui
+   component carries a `w6w-` class. Only an element whose class LIST has a token
+   starting `w6w-` matches (`class^=` / `class*=" w6w-"`), so host elements are never
+   touched: not a host `data-theme` wrapper, not a host class that merely contains
+   `w6w-` (`my-w6w-card`), and not a host element's own color-scheme on inputs nested
+   in a ui root (color-scheme inherits, so no descendant rule is needed). Nothing here
+   ever matches <html>/:root. All zero specificity. */
+:where([class^=w6w-]:not(:root), [class*=" w6w-"]:not(:root)) {
+  color-scheme: var(--w6w-scheme);
+}
+
 /*
  * @w6w/ui — the spacing / typography scale.
  *

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/_flow.scss

@@ -9,10 +9,10 @@
    added to that stack later inherits it with no styling of its own.
 
    Custom properties, deliberately, rather than a `.react-flow__controls-button`
-   override: `@xyflow/react/dist/style.css` is imported as a side effect from
-   WorkflowFlowEditor.tsx, so it rides in the LAZY chunk and is injected *after*
-   this stylesheet. A bare class override (0,1,0) would tie with the library's
-   own rule and lose on source order. Custom properties inherit and are
+   override: React Flow's own stylesheet is compiled into the same
+   styles.css (`@use` in the build-only styles.build.scss), but cascade
+   order is not something to lean on: a bare class override (0,1,0) would tie
+   with the library's own rule and lose if the order ever changed. Custom properties inherit and are
    order-independent, and scoping them on `.w6w-flow` keeps them off the rest of
    the page.
 

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);
 }