@alliance-droid/status-feedback-system 4.0.3 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## 4.1.1
+
+### Fixed
+
+- `<FeedbackSidebar>`: removed the divider between the **Status** and **Sort By** selects so they read as one filter group, and gave the group consistent padding (`px-5 py-2` + `space-y-3`) so the labels line up with the "All" filter above and the dropdowns aren't flush to the rail edge. Styling only — no behavior change.
+
+### Changed
+
+- Raised the `@alliance-droid/svelte-component-library` peer dependency to `>=1.3.2`. Earlier versions (e.g. 1.1.21) are incompatible with Svelte `5.56+` and trigger `target.exclude.has is not a function` when board components render. Consumers should be on `1.3.2` or later.
+
+## 4.1.0
+
+### Added
+
+- `createAuthTokenGetter(options?)` — a shared client accessor for the bearer token the board's status controls send (the `getAuthToken` for `createFeedbackBoard`). Fetches a same-origin token endpoint (`/auth/access-token` by default), caches until just before expiry, single-flights, and returns `null` on failure. Replaces the per-app copy of this helper.
+
+## 4.0.3
+
+### Fixed
+
+- Board status: the transitions read (`GET /api/board/feedback/[id]/transitions`) now returns `200` with `{ canManage: false, targets: [] }` for signed-in users without management rights, instead of `403` — keeping the browser console clean. The client gates the status control on `canManage`. (Requires the matching `status-feedback-admin` deploy.)
+
+## 4.0.2
+
+### Fixed
+
+- The status control is shown only to users the backend actually authorizes (Admin / ProductOwner), resolved via a one-time privilege probe — not merely whenever a `getAuthToken` getter is provided.
+
+## 4.0.1
+
+### Fixed
+
+- Corrected the `getAuthToken` token-type docs to specify an **access token** scoped to `status-feedback-admin` (an id token is rejected by the backend).
+- `loadMore` failures are now surfaced (`board.loadMoreError`) with a Retry instead of failing silently.
+
+## 4.0.0
+
+### Added
+
+- **Inline status management**: signed-in Admin / ProductOwner users can change a feedback item's status from the board (status badge → menu), via a `getAuthToken` bearer-token bridge to the `status-feedback-admin` backend. Authorization (per-project access + the status state machine, with reason prompts on declines/reopens) is enforced server-side.
+
+### Changed (BREAKING)
+
+- Removed the all-in-one `FeedbackBoard` component. Compose the board from the exported parts instead — `createFeedbackBoard` + `FeedbackSidebar` / `FeedbackList` / `FeedbackDetail` / `FeedbackSubmitForm`. See [docs/custom-feedback-integration.md](docs/custom-feedback-integration.md).
+- Feedback categories are system-owned (**Bug** / **Feature Request**): `<FeedbackSubmitForm>` no longer accepts a `categories` prop and the board no longer accepts `submitCategories`. Use `categoryConfig` to relabel / add icons.
+
 ## 3.0.0
 
 ### Changed (BREAKING)

package/README.md

@@ -163,6 +163,7 @@ The board is composed from parts around **one shared state** (`createFeedbackBoa
 <script lang="ts">
   import {
     createFeedbackBoard,
+    createAuthTokenGetter,
     FeedbackSidebar,
     FeedbackList,
     FeedbackDetail,
@@ -175,7 +176,7 @@ The board is composed from parts around **one shared state** (`createFeedbackBoa
     apiUrl: 'https://status-admin.example.com',
     apiKey: 'sf_abc123...',
     userEmail: data.user?.email,
-    getAuthToken: () => auth.getAccessToken(), // optional — enables status management
+    getAuthToken: createAuthTokenGetter(), // optional — enables status management
     categoryConfig: {
       Bug: { icon: 'fa-solid fa-bug', label: 'Bugs' },
       'Feature Request': { icon: 'fa-solid fa-lightbulb', label: 'Ideas' },
@@ -213,6 +214,7 @@ Categories are fixed by the system (**Bug**, **Feature Request**) — `categoryC
 When you pass `getAuthToken`, a signed-in **Admin** or **ProductOwner** can change an item's status from the board (via the status badge → menu) — Open → Considering → Accepted, or a decline with a reason — no trip to the admin dashboard.
 
 - `getAuthToken` must return the user's **Alliance OIDC access token** whose audience covers **`status-feedback-admin`** (an *id token*, whose `aud` is your app's client id, is rejected). It's called on demand; return `null` for anonymous / non-privileged users and the control simply won't appear.
+- **Use the built-in `createAuthTokenGetter()`** for this — it fetches a same-origin token endpoint (`/auth/access-token` by default), caches until just before expiry, single-flights, and returns `null` on any failure. With `@alliance-droid/svelte-auth-core`, set `enableAccessTokenEndpoint: true` and request the `status-feedback-admin` scope so that endpoint exists. Create one instance at module level: `export const getAuthToken = createAuthTokenGetter();`
 - The token travels as `Authorization: Bearer …` to the admin backend, which **verifies it against the IdP** and derives the user's roles. Authorization (per-project access + which transitions a role may make, including reason prompts on declines/reopens) is enforced **server-side** by the same logic as the dashboard — the client never decides permissions.
 - The available transitions are returned by the backend per item, so the menu always reflects exactly what that user may do.
 
@@ -299,9 +301,13 @@ import {
 // Feedback board (composable)
 import {
   createFeedbackBoard,
+  createAuthTokenGetter,
   FeedbackSidebar, FeedbackList, FeedbackItem, FeedbackDetail, FeedbackSubmitForm,
 } from '@alliance-droid/status-feedback-system';
-import type { FeedbackBoardState, FeedbackBoardOptions, CategoryConfig } from '@alliance-droid/status-feedback-system';
+import type {
+  FeedbackBoardState, FeedbackBoardOptions, CategoryConfig,
+  AuthTokenGetter, AuthTokenGetterOptions,
+} from '@alliance-droid/status-feedback-system';
 
 // API Client
 import { createStatusClient } from '@alliance-droid/status-feedback-system';

package/dist/auth-token.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Client-side accessor for the bearer token the board's status controls send to
+ * the `status-feedback-admin` backend — the canonical `getAuthToken` for
+ * `createFeedbackBoard`.
+ *
+ * The backend verifies the token against the IdP and requires its audience to
+ * cover `status-feedback-admin`, so it must be an **access token** scoped to that
+ * resource (an id token, whose `aud` is the app's client id, is rejected).
+ *
+ * A stateless OIDC relying party never exposes the long-lived refresh token to
+ * the browser, so a same-origin host endpoint mints a fresh, short-lived token
+ * server-side and returns only that. With `@alliance-droid/svelte-auth-core`,
+ * enabling `enableAccessTokenEndpoint` serves exactly this at
+ * `GET /auth/access-token` (returns `{ accessToken, expiresAt }`).
+ *
+ * Usage:
+ *   // one module-level instance per app (shares the cache)
+ *   export const getAuthToken = createAuthTokenGetter();
+ *   // → createFeedbackBoard({ ..., getAuthToken })
+ */
+export interface AuthTokenGetterOptions {
+    /** Endpoint that mints a fresh token. Default: `/auth/access-token`. */
+    endpoint?: string;
+    /** Refresh this many ms before the token's `expiresAt`. Default: 30000. */
+    expirySkewMs?: number;
+    /** Custom fetch (e.g. for tests). Default: `globalThis.fetch`. */
+    fetch?: typeof globalThis.fetch;
+}
+/** A `getAuthToken` function with a `clear()` to drop the cache (e.g. after logout). */
+export interface AuthTokenGetter {
+    (): Promise<string | null>;
+    clear(): void;
+}
+/**
+ * Create a cached, single-flight token accessor.
+ *
+ * Safe to call repeatedly: an in-flight request is shared, and a still-valid
+ * token is served from memory without a network round-trip. Resolves `null` when
+ * the user isn't signed in / not privileged (any non-OK response) or on SSR —
+ * which the board reads as "no manage-status control".
+ */
+export declare function createAuthTokenGetter(options?: AuthTokenGetterOptions): AuthTokenGetter;

package/dist/auth-token.js

@@ -0,0 +1,89 @@
+/**
+ * Client-side accessor for the bearer token the board's status controls send to
+ * the `status-feedback-admin` backend — the canonical `getAuthToken` for
+ * `createFeedbackBoard`.
+ *
+ * The backend verifies the token against the IdP and requires its audience to
+ * cover `status-feedback-admin`, so it must be an **access token** scoped to that
+ * resource (an id token, whose `aud` is the app's client id, is rejected).
+ *
+ * A stateless OIDC relying party never exposes the long-lived refresh token to
+ * the browser, so a same-origin host endpoint mints a fresh, short-lived token
+ * server-side and returns only that. With `@alliance-droid/svelte-auth-core`,
+ * enabling `enableAccessTokenEndpoint` serves exactly this at
+ * `GET /auth/access-token` (returns `{ accessToken, expiresAt }`).
+ *
+ * Usage:
+ *   // one module-level instance per app (shares the cache)
+ *   export const getAuthToken = createAuthTokenGetter();
+ *   // → createFeedbackBoard({ ..., getAuthToken })
+ */
+/**
+ * Create a cached, single-flight token accessor.
+ *
+ * Safe to call repeatedly: an in-flight request is shared, and a still-valid
+ * token is served from memory without a network round-trip. Resolves `null` when
+ * the user isn't signed in / not privileged (any non-OK response) or on SSR —
+ * which the board reads as "no manage-status control".
+ */
+export function createAuthTokenGetter(options = {}) {
+    const endpoint = options.endpoint ?? '/auth/access-token';
+    const skewMs = options.expirySkewMs ?? 30_000;
+    const fetchFn = options.fetch ?? ((...args) => globalThis.fetch(...args));
+    let cached = null;
+    let inflight = null;
+    const getToken = (async () => {
+        // SSR has no session cookies to send and no relative-fetch origin; the board
+        // only calls this on client interaction anyway.
+        if (typeof window === 'undefined')
+            return null;
+        if (cached && Date.now() < cached.expiresAt - skewMs)
+            return cached.token;
+        if (inflight)
+            return inflight;
+        inflight = (async () => {
+            try {
+                const res = await fetchFn(endpoint, {
+                    headers: { accept: 'application/json' },
+                    credentials: 'same-origin',
+                });
+                if (!res.ok) {
+                    cached = null;
+                    return null;
+                }
+                const data = (await res.json());
+                const token = data.accessToken ?? data.idToken ?? data.token ?? null;
+                if (!token) {
+                    cached = null;
+                    return null;
+                }
+                cached = { token, expiresAt: normalizeExpiry(data.expiresAt) };
+                return token;
+            }
+            catch {
+                // Network/parse failure → treat as no token; the control simply won't show.
+                cached = null;
+                return null;
+            }
+            finally {
+                inflight = null;
+            }
+        })();
+        return inflight;
+    });
+    getToken.clear = () => {
+        cached = null;
+    };
+    return getToken;
+}
+/**
+ * Coerce the endpoint's `expiresAt` to epoch ms. Accepts ms or seconds; anything
+ * missing/invalid becomes 0 ("already expired") so a token we can't reason about
+ * is never cached.
+ */
+function normalizeExpiry(expiresAt) {
+    if (typeof expiresAt !== 'number' || !Number.isFinite(expiresAt))
+        return 0;
+    // Epoch seconds are ~1.7e9; epoch ms are ~1.7e12. Treat 10-digit values as seconds.
+    return expiresAt < 1e12 ? expiresAt * 1000 : expiresAt;
+}

package/dist/components/board/FeedbackSidebar.svelte

@@ -60,24 +60,19 @@
 
 	<Divider class="my-2" />
 
-	<div class="space-y-3">
-		<div class="mx-4">
-			<Select
-				label="Status"
-				class="rounded-lg border-0 bg-surface-hover"
-				options={statusOptions}
-				bind:value={board.statusFilter}
-			/>
-		</div>
-		<Divider class="my-2" />
-		<div class="mx-4">
-			<Select
-				label="Sort By"
-				class="rounded-lg border-0 bg-surface-hover"
-				options={sortOptions}
-				bind:value={board.sortBy}
-			/>
-		</div>
+	<div class="space-y-3 px-5 py-2">
+		<Select
+			label="Status"
+			class="rounded-lg border-0 bg-surface-hover"
+			options={statusOptions}
+			bind:value={board.statusFilter}
+		/>
+		<Select
+			label="Sort By"
+			class="rounded-lg border-0 bg-surface-hover"
+			options={sortOptions}
+			bind:value={board.sortBy}
+		/>
 	</div>
 </aside>
 

package/dist/index.d.ts

@@ -9,6 +9,8 @@
  */
 export type { Project, System, Incident, IncidentUpdate, Feedback, FeedbackResponse, FeedbackVisibility, StatusHistoryEntry, SystemStatus, IncidentStatus, IncidentSeverity, FeedbackStatus, ApiResponse, } from './types.js';
 export { deriveOverallStatus } from './utils.js';
+export { createAuthTokenGetter } from './auth-token.js';
+export type { AuthTokenGetter, AuthTokenGetterOptions } from './auth-token.js';
 export { createStatusClient } from './api.js';
 export type { StatusClient, StatusClientConfig, StatusData, IncidentData, UptimeData, BoardData, BoardItem, BoardCategory } from './api.js';
 export { default as StatusPage } from './components/StatusPage.svelte';

package/dist/index.js

@@ -9,6 +9,8 @@
  */
 // ── Utilities ──
 export { deriveOverallStatus } from './utils.js';
+// ── Auth token (getAuthToken for the board's status controls) ──
+export { createAuthTokenGetter } from './auth-token.js';
 // ── API Client ──
 export { createStatusClient } from './api.js';
 // ── Client Components ──

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@alliance-droid/status-feedback-system",
-	"version": "4.0.3",
+	"version": "4.1.1",
 	"type": "module",
 	"description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
 	"svelte": "./dist/index.js",
@@ -25,11 +25,11 @@
 		"prepublishOnly": "npm run build"
 	},
 	"peerDependencies": {
-		"@alliance-droid/svelte-component-library": ">=1.0.0",
-		"svelte": "^5.0.0"
+		"@alliance-droid/svelte-component-library": ">=1.3.2",
+		"svelte": "^5.48.0"
 	},
 	"devDependencies": {
-		"@alliance-droid/svelte-component-library": "^1.0.5",
+		"@alliance-droid/svelte-component-library": "^1.3.2",
 		"@eslint/js": "^10.0.1",
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",