@colixsystems/widget-sdk 0.158.0 → 0.160.0

package/README.md

@@ -43,8 +43,8 @@ The data layer lives in **four separate domain-client packages**, each instantia
 | **CORE** | `useI18n()` | `{ t, locale }` | `ctx.i18n` — no scope. `t(key)` resolves the widget-namespaced key (`widget.<id>.<key>`, declared in `manifest.translations`) first, then a **predefined shared key** (`shared.<key>`) when `key` is one of the standard strings (`submit`, `cancel`, `save`, `loading`, …), then the raw key. Use a shared key for an identical default string so it translates once and any per-instance `widget.<id>.<key>` override still wins. |
 | **CORE** | `useTranslate()` | `{ translate, translating, error, language, available }` | `ctx.i18n.translate` — no scope. Machine-translates **user-generated content** (record text, file names, API payloads) into the app user's language; `useI18n().t()` is still the answer for your own copy. `translate(str)` → `Promise<string>`, `translate(str[])` → `Promise<string[]>` in ONE request. Target defaults to the app user's language. Cached per session, per pod, and durably per workspace, so repeat text is free. Limits: 50 segments / 5 000 chars each / 20 000 total. Rejects with `TranslateError`; `available` is false where the host cannot translate. |
 | **CORE** | `useStableQuery(buildQuery)` | `T \| undefined` (whatever `buildQuery()` returns) | No context slice, no scope. Keeps `buildQuery()`'s result at a STABLE reference across renders when its (JSON-serialised) content hasn't changed, so `useDatastoreQuery(tableId, useStableQuery(() => ({...})))` replaces a hand-rolled `useMemo` with an easy-to-get-wrong deps array. Never throws: a `buildQuery` that itself throws degrades to a stable `undefined`; a result that can't be diffed (e.g. circular) degrades to "always a new reference". |
-| **DATASTORE** (`ctx.datastore`) | `useDatastoreQuery(table, options)` (optional: options) | `{ data, loading, error, refetch }` | `records(table).list` (unwraps `{ data, meta }` to `data: []`) — `datastore.read:*` |
-| **DATASTORE** | `useDatastoreRecord(table, id)` | `{ data, loading, error, refetch }` | `records(table).get` — `datastore.read:<table>` |
+| **DATASTORE** (`ctx.datastore`) | `useDatastoreQuery(table, options)` (optional: options) | `{ data, loading, fetching, error, refetch }` — `loading` only until the first result for the table; a changed query / refetch keeps `data` while `fetching` | `records(table).list` (unwraps `{ data, meta }` to `data: []`) — `datastore.read:*` |
+| **DATASTORE** | `useDatastoreRecord(table, id)` | `{ data, loading, fetching, error, refetch }` — a refetch of the same record keeps `data` while `fetching` | `records(table).get` — `datastore.read:<table>` |
 | **DATASTORE** | `useDatastoreSchema(tableId)` | `{ schema, loading, error, refetch }` | `schema(tableId)` — `datastore.read:<table>` |
 | **DATASTORE** | `useBoundColumns(tableId, shape, props)` | `{ columns, resolved, missing, loading, error }` | `schema(tableId)` (built on `useDatastoreSchema`) — `datastore.read:<table>`. Resolves author-bound column NAMES from `props` by exact name → case-insensitive name → first unclaimed column matching `shape[key].dataType`, so a column an author renamed after install still resolves instead of `record[props.titleField]` reading `undefined`. `columns` holds the resolved NAME (`record[columns.titleField]`); `resolved` holds the full `Column`; `missing` lists non-`optional` keys that never resolved. Falsy `tableId` collapses to `{ columns: {}, resolved: {}, missing: Object.keys(shape), loading: false, error: null }`. |
 | **DATASTORE** | `useInterpretDraft(tableId)` | `{ interpret, interpreting, error, result, available }` | `interpret(tableId, body)` — `datastore.read:<table>`. Turns ONE sentence a user typed ("walk at 11 am tomorrow") into DRAFT column values so a form can prefill itself. IMPERATIVE: call `interpret(text, { fields?, timeZone? })` from an event handler, never on mount. It DRAFTS and writes nothing — show the values for review, then submit through `useDatastoreMutation().create`. Resolves to `{ values, unresolved }`; `values` is keyed by column NAME (the shape `create()` takes) and `unresolved` names the fields the sentence did not state. Only text / number / boolean / date / datetime / array columns are drafted — `FILE`, `RELATION`, `USER` and `USER_GROUP` carry ids and are never guessed. Fails closed to an empty draft. **Every call spends the workspace's AI credits** and is rate-limited per actor, so call it once per user action (never on mount or in a render loop); once the workspace runs out the call is refused with a generic 429 — an app user is deliberately **not** told the workspace's billing state, since they have never heard of an AI credit and cannot buy one. Never surface a raw error to the person filling the form: say drafting is unavailable and keep every field editable by hand. `available` is false where the host brokers no interpreter. |
@@ -73,7 +73,22 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.157.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.160.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.160.0 (contract 1.123.0)
+
+**`useDatastoreQuery` and `useDatastoreRecord` keep their data on screen while they re-fetch (sc-8595).** `loading` used to turn true on every fetch, so a widget that showed a spinner on `loading` flashed its content away whenever its query changed — most visibly when a sort or filter waited on `useBoundColumns`, where the first rows arrived before the schema and were replaced by the spinner a moment later. `loading` is now true only until the first result for the bound table (or record) lands. A changed query on that table, `refetch()` and pull-to-refresh keep the rows already in `data` with `loading: false`; the new **`fetching`** flag is true while any request is in flight. Binding a different table, or a different record id, still resets to `loading`.
+
+Show a spinner on `loading` only. A query built from a bound column should pass `null` as the table until `useBoundColumns(...).loading` is false, so its first fetch already carries the column — and treat BOTH as loading, because the query reports `loading: false` while its table is still `null`:
+
+```js
+const { columns: bound, loading: columnsLoading } = useBoundColumns(tableId, shape, props);
+const query = useStableQuery(() => ({ sort: { field: bound.publishedAtField, dir: "desc" }, limit: 5 }));
+const { data, loading } = useDatastoreQuery(columnsLoading ? null : tableId, query);
+if (columnsLoading || loading) return <Spinner />;
+```
+
+Behaviour change: a widget that deliberately showed a spinner on every re-fetch now keeps its previous rows until the new ones arrive. `fetching` is there for an inline "updating" hint.
 
 ### What's new in 0.157.0 (contract 1.122.0 — unchanged)
 
@@ -128,6 +143,12 @@ Additive — nothing in the existing `./host` surface changed, and the contract
 
 ### What's new in 0.151.0 (contract 1.118.0 — unchanged)
 
+**`resolveSidebarTokens` answers `activeInk` — the rail's active colour made readable as TEXT (sc-8655, REQ-NAV-LOCAL / REQ-THEME-14).** `activeColor` is authored as a SURFACE: the filled style paints it and forces a white label, so nothing in the system ever pressured it to be legible as ink. Every place that paints it as text inherited that — the accent style's active label, and now the entry a folded sidebar section hands its marking to — and the brand default reads 3.5:1 on the rail, below the 4.5:1 AA asks of normal text and worse than the unmarked rows around it.
+
+- `activeInk` is the same hue stepped toward the rail's own polarity (darker on a light rail, lighter on a dark one) only as far as AA needs, and is `activeColor` unchanged whenever that already reads. Derived, never authored: it moves with whatever colour the workspace sets, so there is no second control to keep in step.
+- **Additive.** `activeColor` still names the surface the filled style paints and the colour a non-text mark takes — a dot or an accent edge answers to 3:1, not 4.5:1, so those keep the author's actual colour. `CONTRACT` is untouched (`version` stays `1.122.0`): a host resolver, not a widget-facing surface.
+- Both hosts read it, so the Player, the exported drawer and the Design page's chrome preview cannot paint three different labels off one theme.
+
 **`resolveSidebarUnfold` joins the host navigation surface: where a page's local menu unfolds inside the app's own sidebar (sc-7696, REQ-NAV-LOCAL).** A page's local navigation could only be a bar, above or below its content. `local_nav` now also takes `SIDEBAR`, which takes no strip of the page: the saved menu unfolds in the rail and the drawer, under the global menu entry it belongs to.
 
 - `resolveSidebarUnfold({ entries, active, sections })` answers `{ under, items, standalone }` from host-neutral keys — page slugs on web, screen names in the export — so it is the ONE derivation both chromes read. Web calls it per render; the compiler asks it once per screen at build time, because the only runtime input is which screen is showing.

package/dist/contract.cjs

@@ -913,9 +913,14 @@ const HOOKS = [
   {
     name: "useDatastoreRecord",
     signature: "useDatastoreRecord(tableId, recordId)",
+    description:
+      "Reads one row. Re-reading the same record (refetch, pull-to-refresh) " +
+      "keeps it in `data` with loading false while `fetching` is true; a " +
+      "different table or record id resets to loading.",
     returnShape: {
       data: "Record | null",
       loading: "boolean",
+      fetching: "boolean",
       error: "DatastoreError | null",
       refetch: "() => Promise<void>",
     },
@@ -1205,9 +1210,16 @@ const HOOKS = [
     name: "useDatastoreQuery",
     signature: "useDatastoreQuery(tableId, options)",
     optionalArgs: ["options"],
+    description:
+      "Reads a table's rows. Stale-while-revalidate: `loading` is true only " +
+      "until the first result for the bound table lands; a changed query on " +
+      "that table, refetch() and pull-to-refresh keep the rows already in " +
+      "`data` with loading false, while `fetching` is true. Binding a " +
+      "different table resets to loading. Show a spinner on `loading` only.",
     returnShape: {
       data: "Record[]",
       loading: "boolean",
+      fetching: "boolean",
       error: "DatastoreError | null",
       refetch: "() => Promise<void>",
     },
@@ -4334,7 +4346,10 @@ const CONTRACT = deepFreeze({
   //    layout it would use in a half-width cell. Additive: `isNarrowWidth` and
   //    `NARROW_WIDTH_PX` are unchanged, and `widthTier(w) === "narrow"` exactly
   //    when `isNarrowWidth(w)` is true.
-  version: "1.122.0",
+  // 1.123.0: behaviour (sc-8595) — useDatastoreQuery / useDatastoreRecord
+  //    keep their data while a changed query or refetch runs; `loading` only
+  //    until the first result for the table/record, new `fetching` flag.
+  version: "1.123.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -913,9 +913,14 @@ const HOOKS = [
   {
     name: "useDatastoreRecord",
     signature: "useDatastoreRecord(tableId, recordId)",
+    description:
+      "Reads one row. Re-reading the same record (refetch, pull-to-refresh) " +
+      "keeps it in `data` with loading false while `fetching` is true; a " +
+      "different table or record id resets to loading.",
     returnShape: {
       data: "Record | null",
       loading: "boolean",
+      fetching: "boolean",
       error: "DatastoreError | null",
       refetch: "() => Promise<void>",
     },
@@ -1205,9 +1210,16 @@ const HOOKS = [
     name: "useDatastoreQuery",
     signature: "useDatastoreQuery(tableId, options)",
     optionalArgs: ["options"],
+    description:
+      "Reads a table's rows. Stale-while-revalidate: `loading` is true only " +
+      "until the first result for the bound table lands; a changed query on " +
+      "that table, refetch() and pull-to-refresh keep the rows already in " +
+      "`data` with loading false, while `fetching` is true. Binding a " +
+      "different table resets to loading. Show a spinner on `loading` only.",
     returnShape: {
       data: "Record[]",
       loading: "boolean",
+      fetching: "boolean",
       error: "DatastoreError | null",
       refetch: "() => Promise<void>",
     },
@@ -4330,7 +4342,10 @@ const CONTRACT = deepFreeze({
   //    layout it would use in a half-width cell. Additive: `isNarrowWidth` and
   //    `NARROW_WIDTH_PX` are unchanged, and `widthTier(w) === "narrow"` exactly
   //    when `isNarrowWidth(w)` is true.
-  version: "1.122.0",
+  // 1.123.0: behaviour (sc-8595) — useDatastoreQuery / useDatastoreRecord
+  //    keep their data while a changed query or refetch runs; `loading` only
+  //    until the first result for the table/record, new `fetching` flag.
+  version: "1.123.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/hooks.js

@@ -2173,8 +2173,23 @@ function toDatastoreError(err) {
 // on a genuine loop.
 const VOLATILE_QUERY_RENDER_LIMIT = 10;
 
+const NO_QUERY_RESULT = { key: null, table: null, data: null, error: null, loaded: false };
+const NO_RECORD_RESULT = { key: null, data: null, error: null, loaded: false };
+
+function serializeQuery(query) {
+  try {
+    return JSON.stringify(query);
+  } catch (_e) {
+    return null;
+  }
+}
+
+const queryResultKey = (table, queryKey) => JSON.stringify([table, queryKey]);
+const recordResultKey = (table, recordId) => JSON.stringify([table, recordId]);
+
 /**
- * Stateful datastore query hook. Returns { data, loading, error, refetch }.
+ * Stateful datastore query hook. Returns { data, loading, fetching, error,
+ * refetch }.
  *
  * The host injects a `@colixsystems/datastore-client` instance at
  * `ctx.datastore`. We call `ctx.datastore.records(table).list(query)`, which
@@ -2187,9 +2202,18 @@ const VOLATILE_QUERY_RENDER_LIMIT = 10;
  * re-fetch when [table, JSON.stringify(query)] changes. `refetch` re-runs the
  * same call on demand.
  *
+ * sc-8595 — stale-while-revalidate. `loading` is true only until the first
+ * result for the bound TABLE lands. A changed query on that table, `refetch()`
+ * and a page pull-to-refresh keep the rows already in `data` on screen with
+ * `loading: false`; `fetching` is true while any request is in flight. Binding
+ * a different table resets to `{ data: [], loading: true }`. So a widget shows
+ * its spinner on `loading` only, and never flashes back to it when its query
+ * settles (e.g. a sort that waits on `useBoundColumns`).
+ *
  * When `table` is falsy (e.g. the user hasn't bound a `tableRef` property
- * yet), the hook resolves to { data: [], loading: false, error: null,
- * refetch } so the widget can render its empty state without throwing.
+ * yet), the hook resolves to { data: [], loading: false, fetching: false,
+ * error: null, refetch } so the widget can render its empty state without
+ * throwing.
  */
 export function useDatastoreQuery(table, query) {
   const ctx = useWidgetContextOrThrow("useDatastoreQuery");
@@ -2198,9 +2222,12 @@ export function useDatastoreQuery(table, query) {
       "useDatastoreQuery: host did not inject a datastore client",
     );
   }
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(Boolean(table));
-  const [error, setError] = useState(null);
+  // sc-8595: the last settled request, stamped with the arguments it
+  // answered. What renders is DERIVED from it (see the return), so no
+  // committed frame shows another table's rows or a stale `loading`.
+  const [settled, setSettled] = useState(NO_QUERY_RESULT);
+  const [inFlight, setInFlight] = useState(false);
+  const emptyRows = useRef([]).current;
 
   // Capture the latest table + query in refs so refetch() — a stable
   // callback identity — always reads the current arguments without having
@@ -2230,13 +2257,12 @@ export function useDatastoreQuery(table, query) {
     if (!t) {
       // No table bound yet — collapse to a stable empty result without
       // a network round-trip.
-      setLoading(false);
-      setError(null);
-      setData([]);
+      setInFlight(false);
+      setSettled(NO_QUERY_RESULT);
       return;
     }
-    setLoading(true);
-    setError(null);
+    const key = queryResultKey(t, serializeQuery(queryRef.current));
+    setInFlight(true);
     try {
       const ns = recordsRef.current(t);
       const res = await ns.list(queryRef.current);
@@ -2245,23 +2271,23 @@ export function useDatastoreQuery(table, query) {
       const rows = res && Array.isArray(res.data) ? res.data : [];
       // Discard the result if a newer fetch has started since we kicked off.
       if (runRef.current !== myRun) return;
-      setData(rows);
-      setLoading(false);
+      setSettled({ key, table: t, data: rows, error: null, loaded: true });
+      setInFlight(false);
     } catch (err) {
       if (runRef.current !== myRun) return;
-      setError(toDatastoreError(err));
-      setLoading(false);
+      const error = toDatastoreError(err);
+      // A failed re-fetch keeps the table's rows; a failed first load has none.
+      setSettled((prev) =>
+        prev.table === t && prev.loaded
+          ? { ...prev, key, error }
+          : { key, table: t, data: emptyRows, error, loaded: false },
+      );
+      setInFlight(false);
     }
   }, []);
 
   // Re-run on mount and whenever [table, JSON.stringify(query)] changes.
-  const queryKey = (() => {
-    try {
-      return JSON.stringify(query);
-    } catch (_e) {
-      return null;
-    }
-  })();
+  const queryKey = serializeQuery(query);
 
   // sc-1579 — a query argument built from a volatile value (`Date.now()`,
   // `new Date()`, `Math.random()`) serialises differently every render, so the
@@ -2304,12 +2330,21 @@ export function useDatastoreQuery(table, query) {
   // pull-to-refresh on mobile re-runs the query without per-widget code.
   useRefresh(refetch);
 
-  return { data, loading, error, refetch };
+  const currentKey = table ? queryResultKey(table, queryKey) : null;
+  const busy = Boolean(table) && (settled.key !== currentKey || inFlight);
+  const hasRows = Boolean(table) && settled.table === table && settled.loaded;
+  return {
+    data: hasRows ? settled.data : emptyRows,
+    loading: !hasRows && busy,
+    fetching: busy,
+    error: table && !busy && settled.table === table ? settled.error : null,
+    refetch,
+  };
 }
 
 /**
- * Stateful single-record query hook. Returns { data, loading, error, refetch }
- * where `data` is one row (`null` until loaded, never an array).
+ * Stateful single-record query hook. Returns { data, loading, fetching, error,
+ * refetch } where `data` is one row (`null` until loaded, never an array).
  *
  * The host injects a `@colixsystems/datastore-client` instance at
  * `ctx.datastore`. We call `ctx.datastore.records(table).get(id)`, which
@@ -2318,9 +2353,13 @@ export function useDatastoreQuery(table, query) {
  * named them. We hold the result in component state and re-fetch when
  * [table, id] changes. `refetch` re-runs the call on demand.
  *
+ * sc-8595 — same rule as useDatastoreQuery: re-reading the SAME record keeps
+ * it in `data` with `loading: false` while `fetching` is true; a different
+ * table or id resets to `{ data: null, loading: true }`.
+ *
  * When `table` OR `recordId` is falsy (e.g. the author hasn't bound the
  * record id yet), the hook resolves to { data: null, loading: false,
- * error: null, refetch } so the widget can render its empty state
+ * fetching: false, error: null, refetch } so the widget can render its empty state
  * without throwing. A 404 surfaces as a DatastoreError with
  * `code: "NOT_FOUND"`.
  */
@@ -2331,10 +2370,10 @@ export function useDatastoreRecord(table, recordId) {
       "useDatastoreRecord: host did not inject a datastore client",
     );
   }
-  const ready = Boolean(table && recordId);
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(ready);
-  const [error, setError] = useState(null);
+  // sc-8595: stamped with the record it answered; rendered values derive
+  // from it, like useDatastoreQuery's.
+  const [settled, setSettled] = useState(NO_RECORD_RESULT);
+  const [inFlight, setInFlight] = useState(false);
 
   // Same ref discipline as useDatastoreQuery — `ctx` is a fresh object
   // identity on every host render, so we hold the live inputs in refs
@@ -2353,23 +2392,27 @@ export function useDatastoreRecord(table, recordId) {
     const t = tableRef.current;
     const id = recordIdRef.current;
     if (!t || !id) {
-      setLoading(false);
-      setError(null);
-      setData(null);
+      setInFlight(false);
+      setSettled(NO_RECORD_RESULT);
       return;
     }
-    setLoading(true);
-    setError(null);
+    const key = recordResultKey(t, id);
+    setInFlight(true);
     try {
       const ns = recordsRef.current(t);
       const row = await ns.get(id);
       if (runRef.current !== myRun) return;
-      setData(row || null);
-      setLoading(false);
+      setSettled({ key, data: row || null, error: null, loaded: true });
+      setInFlight(false);
     } catch (err) {
       if (runRef.current !== myRun) return;
-      setError(toDatastoreError(err));
-      setLoading(false);
+      const error = toDatastoreError(err);
+      setSettled((prev) =>
+        prev.key === key && prev.loaded
+          ? { ...prev, error }
+          : { key, data: null, error, loaded: false },
+      );
+      setInFlight(false);
     }
   }, []);
 
@@ -2385,7 +2428,16 @@ export function useDatastoreRecord(table, recordId) {
   // sc-1179 — auto-subscribe to the page-level refresh tick.
   useRefresh(refetch);
 
-  return { data, loading, error, refetch };
+  const currentKey = table && recordId ? recordResultKey(table, recordId) : null;
+  const busy = currentKey !== null && (settled.key !== currentKey || inFlight);
+  const hasRecord = currentKey !== null && settled.key === currentKey && settled.loaded;
+  return {
+    data: hasRecord ? settled.data : null,
+    loading: !hasRecord && busy,
+    fetching: busy,
+    error: currentKey !== null && !busy ? settled.error : null,
+    refetch,
+  };
 }
 
 /**
@@ -2770,8 +2822,8 @@ function toAgentError(err) {
  * who places the widget and never types costs the workspace nothing.
  *
  * `messages` is the running transcript this widget has seen, oldest first,
- * each `{ id, role, content, created_at }` with `role` of "user" | "assistant".
- * An assistant message that used a tool also carries `activity` — what the
+ * each `{ id, role, content, created_at }` with `role` of "user" | "assistant".
+ * An assistant message that used a tool also carries `activity` — what the
  * agent DID with the user's data. Render the writes: "done!" is not evidence.
  * The SERVER owns the real transcript and the system prompt: the widget sends
  * one message and can neither read nor set the prompt.

package/dist/host.d.ts

@@ -208,7 +208,14 @@ export function resolveFooterTokens(theme: unknown): FooterTokens;
 export interface SidebarTokens {
   backgroundColor: string;
   textColor: string;
+  /** The active colour as a SURFACE — what `filled` paints, what a non-text
+   *  mark (an accent edge, a folded section's dot) is drawn in. */
   activeColor: string;
+  /** sc-8655: the same colour as INK. `activeColor` is authored to sit under a
+   *  white label, so it can fall below AA as text on the rail; this is it
+   *  stepped toward the rail's own polarity until it clears 4.5:1, and equal to
+   *  `activeColor` whenever that already reads. Derived, never authored. */
+  activeInk: string;
   activeStyle: "filled" | "accent";
   borderColor: string | null;
   borderWidth: number | null;

package/dist/index.d.ts

@@ -825,7 +825,14 @@ export interface Query {
 
 export interface QueryResult<T> {
   data: T[];
+  /**
+   * True only until the first result for the bound table lands. A changed
+   * query on the same table, `refetch()` and pull-to-refresh keep the rows
+   * already in `data` with `loading: false`. Show a spinner on this only.
+   */
   loading: boolean;
+  /** True while any request is in flight, including a background re-fetch. */
+  fetching: boolean;
   error: Error | null;
   refetch(): Promise<void>;
 }
@@ -1042,8 +1049,10 @@ export function useTheme(): ThemeTokens;
 export function useWidgetStyle(): Record<string, unknown>;
 
 /**
- * Stateful single-record fetch hook. Returns `{ data, loading, error,
- * refetch }`. `data` is one row or `null` (never an array).
+ * Stateful single-record fetch hook. Returns `{ data, loading, fetching,
+ * error, refetch }`. `data` is one row or `null` (never an array). Re-reading
+ * the same record keeps it in `data` with `loading: false`; a different table
+ * or id resets to `loading: true`.
  */
 export function useDatastoreRecord(
   tableId: string | null | undefined,
@@ -1051,6 +1060,7 @@ export function useDatastoreRecord(
 ): {
   data: unknown | null;
   loading: boolean;
+  fetching: boolean;
   error: DatastoreError | null;
   refetch(): Promise<void>;
 };

package/dist/navigation.cjs

@@ -25,7 +25,7 @@
 // the SAME literal, so what a planner may persist and what a host draws cannot
 // diverge.
 
-const { CONTRACT, isHexColor } = require("./contract.cjs");
+const { CONTRACT, isHexColor, contrastRatio, mixHex, readableTextColor } = require("./contract.cjs");
 
 // Absent or unknown resolves here, so every app authored before menu types
 // existed renders and compiles byte-identically.
@@ -267,14 +267,46 @@ function brandPrimary(config) {
  * @returns {{ backgroundColor: string, textColor: string, activeColor: string,
  *   activeStyle: string, borderColor: string|null, borderWidth: number|null }}
  */
+// sc-8655: the sidebar's active colour is authored to sit UNDER a white label
+// (the filled style), so nothing ever pressured it to read as INK — the brand
+// default lands at 3.5:1 on the rail, below the 4.5:1 AA asks of normal text,
+// and worse than the inactive rows beside it. Every surface that paints the
+// active colour as TEXT reads the derived ink instead: the same hue, stepped
+// toward the rail's own polarity only as far as legibility needs.
+const AA_TEXT_CONTRAST = 4.5;
+const INK_STEP = 0.05;
+const INK_MAX_SHIFT = 0.7;
+
+function readableInk(color, background) {
+  if (!isHexColor(color) || !isHexColor(background)) return color;
+  if (contrastRatio(color, background) >= AA_TEXT_CONTRAST) return color;
+  // Darken on a light rail, lighten on a dark one — the direction that keeps
+  // the hue rather than washing it toward grey.
+  const toward = readableTextColor(background, "#000000", "#ffffff");
+  let ink = color;
+  for (let t = INK_STEP; t <= INK_MAX_SHIFT + 1e-9; t += INK_STEP) {
+    ink = mixHex(color, toward, t);
+    if (contrastRatio(ink, background) >= AA_TEXT_CONTRAST) break;
+  }
+  // A colour that cannot reach AA within the shift keeps the closest it got:
+  // the most readable answer available beats reverting to the unreadable one.
+  return ink;
+}
+
 function resolveSidebarTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const sidebar = isPlainObject(config.sidebar) ? config.sidebar : {};
   const borderColor = hexOrNull(sidebar.borderColor);
+  const backgroundColor = hexOr(sidebar.backgroundColor, chromeSurface(config));
+  const activeColor = hexOr(sidebar.activeColor, brandPrimary(config));
   return {
-    backgroundColor: hexOr(sidebar.backgroundColor, chromeSurface(config)),
+    backgroundColor,
     textColor: hexOr(sidebar.textColor, DEFAULT_CHROME_TEXT),
-    activeColor: hexOr(sidebar.activeColor, brandPrimary(config)),
+    activeColor,
+    // sc-8655: `activeColor` where it is a SURFACE, `activeInk` where it is
+    // text on the rail. Both hosts read the second for an accent-marked label
+    // and for a folded section's entry.
+    activeInk: readableInk(activeColor, backgroundColor),
     activeStyle: sidebar.activeStyle === "accent" ? "accent" : "filled",
     // REQ-THEME-LOOK: the colour is the switch — no colour, no line.
     borderColor,

package/dist/navigation.js

@@ -16,7 +16,7 @@
 // the SAME literal, so what a planner may persist and what a host draws cannot
 // diverge.
 
-import { CONTRACT, isHexColor } from "./contract.js";
+import { CONTRACT, isHexColor, contrastRatio, mixHex, readableTextColor } from "./contract.js";
 
 // Absent or unknown resolves here, so every app authored before menu types
 // existed renders and compiles byte-identically.
@@ -258,14 +258,46 @@ function brandPrimary(config) {
  * @returns {{ backgroundColor: string, textColor: string, activeColor: string,
  *   activeStyle: string, borderColor: string|null, borderWidth: number|null }}
  */
+// sc-8655: the sidebar's active colour is authored to sit UNDER a white label
+// (the filled style), so nothing ever pressured it to read as INK — the brand
+// default lands at 3.5:1 on the rail, below the 4.5:1 AA asks of normal text,
+// and worse than the inactive rows beside it. Every surface that paints the
+// active colour as TEXT reads the derived ink instead: the same hue, stepped
+// toward the rail's own polarity only as far as legibility needs.
+const AA_TEXT_CONTRAST = 4.5;
+const INK_STEP = 0.05;
+const INK_MAX_SHIFT = 0.7;
+
+function readableInk(color, background) {
+  if (!isHexColor(color) || !isHexColor(background)) return color;
+  if (contrastRatio(color, background) >= AA_TEXT_CONTRAST) return color;
+  // Darken on a light rail, lighten on a dark one — the direction that keeps
+  // the hue rather than washing it toward grey.
+  const toward = readableTextColor(background, "#000000", "#ffffff");
+  let ink = color;
+  for (let t = INK_STEP; t <= INK_MAX_SHIFT + 1e-9; t += INK_STEP) {
+    ink = mixHex(color, toward, t);
+    if (contrastRatio(ink, background) >= AA_TEXT_CONTRAST) break;
+  }
+  // A colour that cannot reach AA within the shift keeps the closest it got:
+  // the most readable answer available beats reverting to the unreadable one.
+  return ink;
+}
+
 export function resolveSidebarTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const sidebar = isPlainObject(config.sidebar) ? config.sidebar : {};
   const borderColor = hexOrNull(sidebar.borderColor);
+  const backgroundColor = hexOr(sidebar.backgroundColor, chromeSurface(config));
+  const activeColor = hexOr(sidebar.activeColor, brandPrimary(config));
   return {
-    backgroundColor: hexOr(sidebar.backgroundColor, chromeSurface(config)),
+    backgroundColor,
     textColor: hexOr(sidebar.textColor, DEFAULT_CHROME_TEXT),
-    activeColor: hexOr(sidebar.activeColor, brandPrimary(config)),
+    activeColor,
+    // sc-8655: `activeColor` where it is a SURFACE, `activeInk` where it is
+    // text on the rail. Both hosts read the second for an accent-marked label
+    // and for a folded section's entry.
+    activeInk: readableInk(activeColor, backgroundColor),
     activeStyle: sidebar.activeStyle === "accent" ? "accent" : "filled",
     // REQ-THEME-LOOK: the colour is the switch — no colour, no line.
     borderColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.158.0",
+  "version": "0.160.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",