@flamingo-stack/openframe-frontend-core 0.0.472 → 0.0.473-snapshot.20260724114839

package/src/hooks/use-authed-image-src.ts

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useReducer } from 'react'
+import { embedAuthedFetch, needsBearerAssetFetch } from '../utils/embed-authed-fetch'
+
+/**
+ * Resolve an image URL for hosts whose auth rides in request headers
+ * instead of cookies (native shells — `capacitor://localhost`,
+ * `tauri://localhost` — running in bearer mode). A native `<img>` load
+ * can't carry an `Authorization` header, so a gateway image URL that
+ * works on the cookie-auth web 401s in a shell. When
+ * `needsBearerAssetFetch` says the URL's origin is bearer-authed, this
+ * hook fetches it through `embedAuthedFetch` (bearer + deduped
+ * 401-refresh-retry + the adapter's cross-origin guard) and returns a
+ * blob object-URL; every other URL is returned unchanged, so on the
+ * cookie-auth web the hook is a pass-through.
+ *
+ * Returns `undefined` while the fetch is in flight OR after it fails, so
+ * callers show their existing initials/placeholder fallback instead of a
+ * broken image; a failed fetch retries on the next mount.
+ *
+ * Cache: module-level, session-lifetime, keyed by full URL. Gateway image
+ * URLs carry a `?v=<content-hash>` cache-buster, so a changed image is a
+ * new key; entries are never revoked (avatars are a few KB — refcount
+ * churn isn't worth it).
+ *
+ * Distinct from the legacy `useAuthenticatedImage`, which ALWAYS
+ * blob-fetches with `credentials: 'include'` and its own global config.
+ * This hook is pass-through-first and keys off the single auth knob the
+ * lib already has: the registered `EmbedAuthAdapter`.
+ */
+
+const resolvedCache = new Map<string, string>()
+const inFlight = new Map<string, Promise<void>>()
+let cacheGeneration = 0
+
+/**
+ * Drop every cached blob and revoke its object URL. Hosts call this at
+ * session end (logout / forced re-login) so a follow-on login as a
+ * different identity cannot be served blobs fetched under the previous
+ * one's bearer. Fetches still in flight when the clear happens are fenced
+ * by a generation counter — their results are revoked instead of cached.
+ */
+export function clearAuthedImageCache(): void {
+  cacheGeneration++
+  for (const url of resolvedCache.values()) URL.revokeObjectURL(url)
+  resolvedCache.clear()
+  inFlight.clear()
+}
+
+function fetchAsBlobUrl(src: string): Promise<void> {
+  let pending = inFlight.get(src)
+  if (!pending) {
+    const startedGeneration = cacheGeneration
+    pending = embedAuthedFetch(src, { headers: { Accept: 'image/*' } })
+      .then(async response => {
+        if (!response.ok) throw new Error(`image fetch failed: ${response.status}`)
+        const blobUrl = URL.createObjectURL(await response.blob())
+        if (startedGeneration === cacheGeneration) {
+          resolvedCache.set(src, blobUrl)
+        } else {
+          URL.revokeObjectURL(blobUrl)
+        }
+      })
+      .finally(() => {
+        if (inFlight.get(src) === pending) inFlight.delete(src)
+      })
+    inFlight.set(src, pending)
+  }
+  return pending
+}
+
+export function useAuthedImageSrc(src?: string | null): string | undefined {
+  const bearerSrc = src && needsBearerAssetFetch(src) ? src : null
+  const [, rerender] = useReducer((c: number) => c + 1, 0)
+
+  useEffect(() => {
+    if (!bearerSrc || resolvedCache.has(bearerSrc)) return
+    let cancelled = false
+    fetchAsBlobUrl(bearerSrc)
+      .catch(() => {})
+      .finally(() => {
+        if (!cancelled) rerender()
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [bearerSrc])
+
+  if (!src) return undefined
+  if (!bearerSrc) return src
+  return resolvedCache.get(bearerSrc)
+}

package/src/stories/AnnouncementBar.stories.tsx

@@ -83,6 +83,26 @@ export const WithCTA: Story = {
   },
 }
 
+/**
+ * Non-dismissible announcement — `dismissible={false}` drops the close (X)
+ * button, so the bar only disappears when the announcement is deactivated.
+ */
+export const WithoutCloseButton: Story = {
+  args: {
+    dismissible: false,
+    initialAnnouncement: {
+      ...baseAnnouncement,
+      id: 'story-no-dismiss',
+      title: 'Mandatory Maintenance Notice',
+      description: 'This announcement cannot be dismissed by the user.',
+      cta_enabled: true,
+      cta_text: 'Learn More',
+      cta_url: 'https://example.com',
+      cta_target: '_blank',
+    },
+  },
+}
+
 /**
  * Announcement with a CTA button that opens in the same tab.
  */

package/src/types/announcement.ts

@@ -238,6 +238,11 @@ export interface AnnouncementBarProps {
    * cookies or touches localStorage).
    */
   previewMode?: boolean;
+  /**
+   * When false, the dismiss (X) button is not rendered — the bar can only
+   * disappear by deactivating the announcement. Default true.
+   */
+  dismissible?: boolean;
   className?: string;
 }
 

package/src/utils/embed-authed-fetch.ts

@@ -156,6 +156,36 @@ export function hasEmbedAuthAdapter(): boolean {
   return getRegisteredAuthAdapter() !== null
 }
 
+/**
+ * Whether `url` is an asset the browser CANNOT load natively because its
+ * auth rides in request headers: the registered adapter is currently
+ * supplying an `Authorization` header AND the URL's origin is one the
+ * adapter explicitly sanctions for that bearer (`allowedOrigins` — the
+ * host's gateway, cross-origin by construction in native shells).
+ *
+ * Native asset loads (`<img src>`, CSS `background-image`) can't carry
+ * custom headers, so a URL this returns `true` for must go through
+ * `embedAuthedFetch` → blob object-URL instead (see `useAuthedImageSrc`).
+ * Everything else — cookie-auth web (no Authorization), relative /
+ * same-origin URLs (cookies work), third-party origins the bearer does
+ * NOT belong to (public images) — loads natively, unchanged.
+ */
+export function needsBearerAssetFetch(url: string): boolean {
+  if (typeof window === 'undefined') return false
+  const adapter = getRegisteredAuthAdapter()
+  if (!adapter?.allowedOrigins?.length || adapter.getHeaders?.().Authorization === undefined) {
+    return false
+  }
+  let target: URL
+  try {
+    target = new URL(url, window.location.href)
+  } catch {
+    return false
+  }
+  if (target.protocol !== 'http:' && target.protocol !== 'https:') return false
+  return adapter.allowedOrigins.includes(target.origin)
+}
+
 /**
  * `fetch` wrapper that attaches embed-proxy bearer headers (when
  * present in sessionStorage) and forces `credentials: 'same-origin'`