@w6w/ui 0.1.1 → 0.2.11

package/dist/note-markdown.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The note editor's Markdown round-trip. A note is edited in place as a `contentEditable` block
+ * (no textarea); these two functions convert between its stored Markdown and that editable DOM.
+ *
+ * The editable model is line-based and covers exactly what the note toolbar writes: a heading
+ * level per line (`#`…`######`) and `**bold**` runs. Everything else (links, lists, `code`, …) is
+ * kept as literal text while editing and rendered by `Markdown` when not, so a line the toolbar
+ * never touched round-trips byte-for-byte.
+ *
+ * The DOM is built with `createElement` + text nodes only — note content is imported,
+ * attacker-controllable text and must never reach `innerHTML`.
+ */
+/** Build the editable DOM for `content` into `root` (its children are replaced). */
+export declare function renderEditable(root: HTMLElement, content: string): void;
+/** Serialize the editable DOM under `root` back to Markdown. */
+export declare function editableToMarkdown(root: HTMLElement): string;
+/**
+ * The content handed to `Markdown` for display. A note is typed line by line, so a single
+ * newline must show as a line break — Markdown would fold it into a space. A soft break between
+ * two non-empty lines becomes a hard break (two trailing spaces); the stored content is untouched.
+ */
+export declare function noteDisplayMarkdown(content: string): string;

package/dist/provider.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ActionDef, ApiCallRecord, AppSummary, AuthDef, ConnectionSummary, FunctionDetail, FunctionSummary, SavedTest, SubscriptionSummary, ThemeMode, TriggerSummary, WorkflowDetail, WorkflowSummary } from './types.ts';
+import { ActionDef, ApiCallRecord, AppSummary, AuthDef, ConnectionBinding, ConnectionSummary, CreateConnectionBody, CredentialDependents, CredentialSummary, CredentialTestResult, FunctionDetail, FunctionSummary, ResolveFieldsBody, ResolveFieldsResult, SavedTest, SubscriptionSummary, ThemeMode, TriggerSummary, WorkflowDetail, WorkflowSummary } from './types.ts';
 /**
  * A single tester-run summary from the unified `run_log` ledger, keyed to a
  * connection. Thin by design — the full result payload stays server-side in
@@ -111,6 +111,8 @@ export interface ListAppsPageOptions {
     q?: string;
     /** Server-side category filter (e.g. `"ai"`). */
     category?: string;
+    /** Server-side id allow-list (`GET /apps?ids=a,b`); `total` is then the filtered total. */
+    ids?: string[];
     /** Opaque pagination cursor from a prior {@link AppsPageResult.nextCursor}. */
     cursor?: string;
     /** Page size; a host may clamp this to its own bounds. */
@@ -119,12 +121,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 {
     /**
@@ -165,15 +176,67 @@ export interface W6WApi {
     listAppsByIds?(ids: readonly string[], options?: {
         signal?: AbortSignal;
     }): Promise<AppSummary[]>;
+    /**
+     * OPTIONAL: the tenant's model routes, for the `model-route` step-param
+     * picker (`@w6w/model` `complete`). Absent, the param renders as a plain text
+     * input and this is never called. A `broken` route is still selectable.
+     * `project` is the editor's own project (`WorkflowProjectProvider`) when it
+     * has one — a host should list THAT project's routes, not guess one from its
+     * URL; `undefined` leaves the choice to the host.
+     */
+    listModelRoutes?(project?: string): Promise<{
+        name: string;
+        model: string;
+        status: "active" | "broken";
+    }[]>;
+    /**
+     * OPTIONAL: resolve the choices of `options: { source: "resolveFields" }`
+     * params from the current form (`POST` to the host). Absent, those params
+     * render as plain inputs and this is never called.
+     */
+    resolveActionFields?(appId: string, actionKey: string, body: ResolveFieldsBody, opts?: {
+        signal?: AbortSignal;
+    }): Promise<ResolveFieldsResult>;
     /** Load auth methods declared by an app's manifest, with availability flags. */
     getAppAuth(appId: string): Promise<AuthDef[]>;
     /** Create a non-OAuth connection with a user-supplied credential. */
-    createConnection(appId: string, body: {
-        authKey: string;
-        credential: Record<string, unknown>;
+    createConnection(appId: string, body: CreateConnectionBody): 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;
-        profile?: Record<string, unknown>;
+        binding?: ConnectionBinding;
+        credentialId?: string;
+        credential?: Record<string, unknown>;
     }): Promise<ConnectionSummary>;
+    /** List stored credentials, optionally narrowed (`GET /credentials`). */
+    listCredentials?(filter?: {
+        contract?: string;
+        appId?: string;
+        authKey?: string;
+    }): Promise<CredentialSummary[]>;
+    /** Store a new credential (`POST /credentials`). `source` is the auth's field-value record. */
+    createCredential?(body: {
+        name: string;
+        contract: string;
+        source: Record<string, unknown>;
+    }): Promise<CredentialSummary>;
+    getCredential?(id: string): Promise<CredentialSummary>;
+    /** Replace a credential's secret (`POST /credentials/:id/rotate`). */
+    rotateCredential?(id: string, body: {
+        source: Record<string, unknown>;
+    }): Promise<CredentialSummary>;
+    /** Disable (`/disable`) or re-enable (`/enable`) a credential. */
+    setCredentialStatus?(id: string, status: "active" | "disabled"): Promise<CredentialSummary>;
+    /** Mint-level health check; distinct from a connection's app-access test. */
+    testCredential?(id: string): Promise<CredentialTestResult>;
+    credentialDependents?(id: string): Promise<CredentialDependents>;
+    /** Rejects with `ApiError` code `credential_in_use` (body.error.dependents) when in use. */
+    deleteCredential?(id: string): Promise<void>;
     /**
      * 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
@@ -412,6 +475,11 @@ export declare function W6WUIProvider({ api, theme, children }: W6WUIProviderPro
  * `<W6WUIProvider>` — the common mistake is forgetting to wrap the app root.
  */
 export declare function useW6WApi(): W6WApi;
+/**
+ * Like {@link useW6WApi} but returns `undefined` outside a provider instead of
+ * throwing — for optional enhancements (e.g. the `model-route` picker).
+ */
+export declare function useOptionalW6WApi(): W6WApi | undefined;
 /** Scopes test-invokes under it to `project`; the editor wraps its body with this. */
 export declare function WorkflowProjectProvider({ project, children, }: {
     project?: string;

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/resolve-params.d.ts

@@ -38,6 +38,11 @@ export interface ResolveScope {
         output?: unknown;
         meta?: StepMeta;
     }>;
+    /** `nodes.<id>…` root — the SAME object as `steps` (one state, two roots). */
+    nodes?: Record<string, {
+        output?: unknown;
+        meta?: StepMeta;
+    }>;
     trigger: {
         event?: unknown;
     };

package/dist/run-visuals.d.ts

@@ -28,7 +28,10 @@ export interface StepExecution {
  *  as the engine's own `RunState.steps`. */
 export interface RunState {
     status: RunStatus;
-    steps: Record<string, StepExecution>;
+    /** Canonical per-node records (D2). */
+    nodes?: Record<string, StepExecution>;
+    /** Legacy alias of `nodes`; read as `nodes ?? steps` (un-upgraded server). */
+    steps?: Record<string, StepExecution>;
 }
 /**
  * A step node's rendered state — exactly the five {@link StepStatus} values

package/dist/step-problems.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Host-supplied per-step problems painted on the canvas. Pure — no React or
+ * @xyflow imports. The host owns detection; ui never infers a problem itself.
+ */
+export interface StepProblem {
+    code: "unknown_connection";
+    connection: string;
+}
+/** Keyed by step id. */
+export type StepProblems = Record<string, StepProblem>;
+interface ProblemNode {
+    id: string;
+    data: {
+        stepProblem?: StepProblem;
+    };
+}
+/**
+ * Stamp `data.stepProblem` from `problems`, clearing it for steps no longer in
+ * the map. Returns the SAME node object when nothing changed.
+ */
+export declare function applyStepProblems<N extends ProblemNode>(nodes: N[], problems: StepProblems | undefined): N[];
+export declare function stepProblemTooltip(p: StepProblem): string;
+/** True while the step still points at the connection the host reports missing. */
+export declare function isConnectionBlocked(step: {
+    uses: {
+        connection?: string | null;
+    };
+}, problem: StepProblem | undefined): boolean;
+/** The Setup tab's Connection button label — exactly five outcomes. */
+export declare function connectionButtonLabel(connection: string | undefined | null, conns: {
+    id: string;
+    displayName?: string;
+}[] | null, failed: boolean): string;
+export {};

package/dist/types.d.ts

@@ -22,6 +22,11 @@ export interface AppSummary {
     maturity?: string;
     visibility?: string;
     successor?: string;
+    /** Model-provider designation; absent when the app does not declare one. */
+    modelProvider?: {
+        modelTypes: string[];
+        modelFamilies?: string[];
+    };
     /**
      * True when the calling tenant has zero-credential access flagged for this
      * app — usable with no connection step at all (server-computed per caller;
@@ -68,6 +73,8 @@ export interface AuthField {
     required?: boolean;
     default?: unknown;
     hint?: string;
+    /** Masks the input like a `secret` field whatever its `type` (e.g. a `json` key file). */
+    secret?: boolean;
 }
 /**
  * One declared parameter of an action, as returned by GET /apps/:id (the
@@ -119,7 +126,7 @@ export interface ActionParam {
      * Constrained choices. Renders as a single-select dropdown for `select` (or any
      * param with options), and as a multi-select pill picker for `multiselect`.
      */
-    options?: ParamOption[];
+    options?: ParamOption[] | DynamicOptions;
     /** Type-specific render/behavior options. */
     config?: ParamConfig;
     /**
@@ -146,6 +153,34 @@ export interface ActionParam {
 export interface ParamOption {
     value: string | number;
     label: string;
+    description?: string;
+}
+/** Host-resolved options (mirrors @w6w/types `DynamicOptions`). */
+export interface DynamicOptions {
+    source: string;
+    searchable?: boolean;
+    cache?: "session" | "none";
+    refreshOn?: string[];
+}
+/** True for the form-resolved arm: a non-array object with `source === "resolveFields"`. */
+export declare function isFormResolvedOptions(o: unknown): o is DynamicOptions;
+/** Body of `W6WApi.resolveActionFields`. */
+export interface ResolveFieldsBody {
+    connectionId: string;
+    version?: string;
+    reason: "init" | "change";
+    form: Record<string, unknown>;
+    previous?: Record<string, unknown>;
+    changed?: string[];
+    fields: string[];
+    unresolved: string[];
+}
+/** Result of `W6WApi.resolveActionFields`. */
+export interface ResolveFieldsResult {
+    fields: Record<string, {
+        options?: ParamOption[];
+        error?: string;
+    }>;
 }
 /**
  * The element schema for a `type: "array"` param. Either a scalar list
@@ -184,6 +219,8 @@ export interface ParamCondition {
 export interface ParamConfig {
     /** Render as a multi-line textarea. Implied by `type: "text"`. */
     multiline?: boolean;
+    /** With options: accept a value not in the list (Combobox `forceSelection` off). */
+    allowCustom?: boolean;
 }
 /** Summary of an action an app exposes, as returned by GET /apps/:id. */
 export interface ActionDef {
@@ -267,16 +304,83 @@ export interface WorkflowDetail {
     name: string;
     displayName?: string;
     description?: string;
-    steps: WorkflowStepSummary[];
+    /** The canonical (manifest v2) step list. */
+    nodes?: WorkflowStepSummary[];
+    /** The legacy (v1) step list; a definition carries one or the other. */
+    steps?: WorkflowStepSummary[];
+}
+/** A `serviceAccount` auth's declaration: the credential contract it accepts and its binding. */
+export interface ServiceAccountConfig {
+    /** Credential contract ids this auth accepts; the first one is used to list/create. */
+    accepts: string[];
+    /** Scopes the binding requests by default (shown read-only; the server applies them). */
+    scopes: string[];
+    /** Whether a connection must/may name an impersonated user (`delegatedUser`). */
+    impersonation: "none" | "optional" | "required";
+    /** Extra per-connection (binding) fields; each lands in `binding.settings`. */
+    bindingFields?: AuthField[];
+}
+export type CredentialStatus = "active" | "disabled" | "revoked";
+/** A stored credential as the API lists it. Never carries the secret payload. */
+export interface CredentialSummary {
+    id: string;
+    name: string;
+    contract: string;
+    status: CredentialStatus | string;
+    revision: number;
+    /** Non-secret display values (e.g. the service account's email). */
+    display: Record<string, string>;
+    private: boolean;
+    connectionCount: number;
+    createdAt: string;
+    updatedAt: string;
+}
+/** The connections that use a credential. */
+export interface CredentialDependents {
+    connections: Array<{
+        id: string;
+        appId: string;
+        authKey: string;
+        displayName?: string | null;
+    }>;
 }
+export interface CredentialTestResult {
+    ok: boolean;
+    code?: string;
+    message?: string;
+}
+/** Per-connection settings applied on top of a shared credential. */
+export interface ConnectionBinding {
+    scopes?: string[];
+    /** The user the credential impersonates (Google domain-wide delegation). */
+    delegatedUser?: string;
+    settings?: Record<string, string | number | boolean>;
+}
+/** Body of `createConnection`: an inline credential XOR a reference to a stored one. */
+export type CreateConnectionBody = {
+    authKey: string;
+    credential: Record<string, unknown>;
+    credentialId?: never;
+    displayName?: string;
+    profile?: Record<string, unknown>;
+} | {
+    authKey: string;
+    credentialId: string;
+    credential?: never;
+    binding?: ConnectionBinding;
+    displayName?: string;
+    profile?: never;
+};
 /** Auth method declaration as exposed by an app's manifest. */
 export interface AuthDef {
     key: string;
-    type: "oauth2" | "apiKey" | "basic" | "bearer" | "custom" | "tenantAuth" | "jit" | string;
+    type: "oauth2" | "apiKey" | "basic" | "bearer" | "custom" | "tenantAuth" | "jit" | "serviceAccount" | string;
     displayName?: string;
     description?: string;
     connectionLabel?: string;
     fields?: AuthField[];
+    /** Present when `type === "serviceAccount"`: what credential it accepts and how it binds. */
+    serviceAccount?: ServiceAccountConfig;
     /** OAuth2 endpoints (only present when type === "oauth2"). */
     oauth2?: Record<string, unknown>;
     /**
@@ -314,6 +418,8 @@ export interface ConnectionSummary {
     id: string;
     appId: string;
     authKey: string;
+    /** The stored credential this connection uses, when it has one. */
+    credentialId?: string | null;
     /** The owning tenant. The server sends `tenant`/`subject`, never `owner`. */
     tenant?: string;
     /** The owning subject (the partner's user id). */
@@ -328,6 +434,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/dist/use-dynamic-fields.d.ts

@@ -0,0 +1,23 @@
+import { DynamicContext } from './dynamic-fields.ts';
+import { ActionParam, ParamOption } from './types.ts';
+/** Per-field state the form renders from. */
+export interface DynamicFieldState {
+    options?: ParamOption[];
+    loading: boolean;
+    error?: string;
+    /** Why the field is free text (no connection / unresolved refreshOn). */
+    hint?: string;
+    /** Flag for a kept value not in the returned list. */
+    notInList?: string;
+}
+export interface UseDynamicFields {
+    fields: Record<string, DynamicFieldState>;
+    /** A pick committed `value` for `key` (select/Combobox/checkbox): one change call if any field refreshes on it. */
+    commit(key: string, value: unknown): void;
+    /** Focus entered `key`: remember the pre-edit form (the `previous` of a later blur commit). */
+    focus(key: string): void;
+    /** Focus left `key`: commit a text edit made since focus (never per keystroke). */
+    blur(key: string): void;
+    retry(key: string): void;
+}
+export declare function useDynamicFields(params: ActionParam[], values: Record<string, unknown>, dynamic: DynamicContext | undefined, onChange: (next: Record<string, unknown>) => void): UseDynamicFields;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w6w/ui",
-  "version": "0.1.1",
+  "version": "0.2.11",
   "description": "React components for w6w — central API management. Build plugins, apps and integrations on them.",
   "license": "MIT",
   "homepage": "https://w6w.io",
@@ -73,7 +73,8 @@
     "@uiw/react-codemirror": "^4.23.7",
     "@w6w/expr": "^0.1.0",
     "@xyflow/react": "^12.3.6",
-    "prism-react-renderer": "^2.4.1"
+    "prism-react-renderer": "^2.4.1",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
@@ -98,8 +99,9 @@
     "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:canvas-layer": "bash test/canvas-layer/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",

package/src/styles/_budget-meter.scss

@@ -0,0 +1,46 @@
+/* BudgetMeter — usage-vs-limit bar with a reserved segment.
+ *
+ * Token-only: every colour is a --w6w-* custom property, so a host restyles
+ * the meter (including the over-limit state) by overriding tokens, never by
+ * targeting a hex value here. */
+.w6w-budget-meter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+.w6w-budget-meter-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+  color: var(--w6w-muted);
+}
+.w6w-budget-meter-label {
+  color: var(--w6w-text);
+}
+.w6w-budget-meter-value {
+  font-variant-numeric: tabular-nums;
+}
+.w6w-budget-meter-track {
+  display: flex;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  background: var(--w6w-panel-2);
+  border: 1px solid var(--w6w-border);
+  border-radius: var(--w6w-radius);
+}
+.w6w-budget-meter-used {
+  height: 100%;
+  background: var(--w6w-accent);
+}
+.w6w-budget-meter-reserved {
+  height: 100%;
+  background: var(--w6w-health-degraded);
+}
+.w6w-budget-meter-over .w6w-budget-meter-used {
+  background: var(--w6w-danger);
+}
+.w6w-budget-meter-over .w6w-budget-meter-value {
+  color: var(--w6w-danger);
+}

package/src/styles/_callable-list.scss

@@ -0,0 +1,69 @@
+.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;
+  background: var(--w6w-panel);
+  overflow: hidden;
+}
+.w6w-callable-list-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-0-5);
+  min-width: 0;
+  text-align: left;
+}
+.w6w-callable-list-open {
+  all: unset;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+}
+.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);
+}
+.w6w-callable-list-row-desc {
+  display: block;
+}