@flamingo-stack/openframe-frontend-core 0.0.556 → 0.0.557-snapshot.20260818183037

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

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { embedAuthedFetch, setEmbedAuthAdapter } from '../embed-authed-fetch'
+import { embedAuthedFetch, needsBearerAssetFetch, setEmbedAuthAdapter } from '../embed-authed-fetch'
 
 /**
  * Tests focus on the same-origin guard rather than the proxy-auth
@@ -205,3 +205,52 @@ describe('embedAuthedFetch adapter.allowedOrigins (native-shell cross-origin san
     expect(() => embedAuthedFetch('javascript:alert(1)')).toThrow(/non-http\(s\)/i)
   })
 })
+
+/**
+ * `needsBearerAssetFetch` decides whether a `<img>` / `<track>` URL has to be
+ * blob-fetched (see `useAuthedAssetSrc`). The signal is the adapter's
+ * `Authorization` header — i.e. the host authenticates by HEADER, so nothing
+ * the browser fetches on its own carries auth, same-origin included.
+ */
+describe('needsBearerAssetFetch (native subresources that cannot carry a header)', () => {
+  const bearer = { getHeaders: () => ({ Authorization: 'Bearer t' }) }
+
+  afterEach(() => {
+    setEmbedAuthAdapter(null)
+  })
+
+  it('is false with no adapter registered (the hub — cookies or nothing)', () => {
+    expect(needsBearerAssetFetch('/content/api/captions/release/1')).toBe(false)
+  })
+
+  it('is false in cookie mode (adapter supplies no Authorization)', () => {
+    setEmbedAuthAdapter({ getHeaders: () => ({}) })
+    expect(needsBearerAssetFetch('/content/api/captions/release/1')).toBe(false)
+  })
+
+  it('is TRUE for a relative proxy path in header-auth mode (dev-ticket web)', () => {
+    setEmbedAuthAdapter(bearer)
+    expect(needsBearerAssetFetch('/content/api/captions/release/1')).toBe(true)
+  })
+
+  it('is TRUE for an absolute same-origin URL in header-auth mode', () => {
+    setEmbedAuthAdapter(bearer)
+    expect(needsBearerAssetFetch('http://localhost:3000/content/api/image-proxy?u=x')).toBe(true)
+  })
+
+  it('is TRUE for a cross-origin gateway the adapter sanctions (native shell)', () => {
+    setEmbedAuthAdapter({ ...bearer, allowedOrigins: ['https://gateway.example'] })
+    expect(needsBearerAssetFetch('https://gateway.example/content/api/captions/release/1')).toBe(true)
+  })
+
+  it('is false for a third-party origin the bearer does not belong to', () => {
+    setEmbedAuthAdapter({ ...bearer, allowedOrigins: ['https://gateway.example'] })
+    expect(needsBearerAssetFetch('https://cdn.example.com/pic.png')).toBe(false)
+  })
+
+  it('is false for non-http(s) schemes (data:/blob: assets load natively)', () => {
+    setEmbedAuthAdapter(bearer)
+    expect(needsBearerAssetFetch('data:image/png;base64,AAAA')).toBe(false)
+    expect(needsBearerAssetFetch('blob:http://localhost:3000/abc')).toBe(false)
+  })
+})

package/src/utils/auto-scroll-ancestors.ts

@@ -0,0 +1,90 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import {
+  autoScrollForElements,
+  autoScrollWindowForElements,
+} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element'
+import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element'
+import { scrollableAncestorsOf } from './scroll-parent'
+
+/**
+ * How far past a scroller's edge a drag still counts as "scroll this".
+ *
+ * Big on purpose: past the edge there is nothing else to hit, so the only
+ * question is whether the intent is obvious, and dragging beyond a container is
+ * about as obvious as intent gets.
+ */
+const OVERFLOW_REACH = 5000
+
+const overflow = () => ({
+  forTopEdge: { top: OVERFLOW_REACH, left: OVERFLOW_REACH, right: OVERFLOW_REACH },
+  forBottomEdge: { bottom: OVERFLOW_REACH, left: OVERFLOW_REACH, right: OVERFLOW_REACH },
+  forLeftEdge: { left: OVERFLOW_REACH, top: OVERFLOW_REACH, bottom: OVERFLOW_REACH },
+  forRightEdge: { right: OVERFLOW_REACH, top: OVERFLOW_REACH, bottom: OVERFLOW_REACH },
+})
+
+/** Straight up and straight down only — no sideways reach at all. */
+const verticalOverflow = () => ({
+  forTopEdge: { top: OVERFLOW_REACH },
+  forBottomEdge: { bottom: OVERFLOW_REACH },
+})
+
+/**
+ * Registers drag auto-scroll for one scroller, both **inside** its edges and
+ * **past** them.
+ *
+ * Pragmatic's over-element scrolling only engages in a band just inside the
+ * edge, so a drag that has already left the container stops scrolling it — you
+ * have to hunt for the strip where it works. dnd-kit kept scrolling however far
+ * out you went, and `unsafeOverflowAutoScrollForElements` is Pragmatic's own
+ * answer for that; "unsafe" here only means it can reach a container the pointer
+ * is not over, which is exactly what is wanted.
+ */
+export function autoScrollBothWays(element: HTMLElement): () => void {
+  return combine(
+    autoScrollForElements({ element }),
+    unsafeOverflowAutoScrollForElements({ element, getOverflow: overflow }),
+  )
+}
+
+/**
+ * Auto-scroll for one of several scrollers standing side by side — a board lane.
+ *
+ * Same as {@link autoScrollBothWays} except that its reach past the edges is
+ * vertical only, and that is the whole point. Lanes sit shoulder to shoulder, so
+ * a reach that also spreads sideways puts a pointer below the board inside
+ * EVERY lane's overflow region at once and scrolls all of them together. Keeping
+ * the region to the lane's own width means the pointer is below exactly one
+ * lane, and only that lane moves — which is what a board is expected to do.
+ */
+export function autoScrollColumn(element: HTMLElement): () => void {
+  return combine(
+    autoScrollForElements({ element }),
+    unsafeOverflowAutoScrollForElements({ element, getOverflow: verticalOverflow }),
+  )
+}
+
+/**
+ * Registers auto-scroll on every scrollable ancestor of `element`, and on the
+ * window.
+ *
+ * dnd-kit walked the ancestor chain for you; Pragmatic makes each scroller opt
+ * in by name, which is why dragging towards the edge of the screen stopped
+ * scrolling anything after the migration. Registering the window alone would
+ * have fixed nothing either: the app's real scroller is the layout's `<main>`,
+ * not the document — so the chain has to be walked.
+ *
+ * Registration is passive; a scroller only moves while a drag is actually near
+ * its edge, so it is safe to call this once on mount.
+ *
+ * Register this ONCE per page region, not once per thing that can be dragged:
+ * Pragmatic keeps one entry per registration and each entry scrolls on its own,
+ * so registering the same `<main>` from five lanes scrolls it five times as
+ * fast.
+ */
+export function autoScrollAncestors(element: HTMLElement): () => void {
+  const cleanups = scrollableAncestorsOf(element).map(autoScrollBothWays)
+  // Cheap and harmless when the document itself does not scroll, and the only
+  // thing that works when it does.
+  cleanups.push(autoScrollWindowForElements())
+  return combine(...cleanups)
+}

package/src/utils/drag-effect.ts

@@ -0,0 +1,26 @@
+/**
+ * Holds a native drag started from `element` to the "move" effect, from its very
+ * first frame.
+ *
+ * The browser picks the drag cursor from `dataTransfer.dropEffect`, and the
+ * value it starts each drag with comes from `effectAllowed`. Pragmatic never
+ * writes `effectAllowed`, so it stays `uninitialized` — which the browser reads
+ * as "all", whose initial `dropEffect` is `copy`. That is the green plus cursor
+ * flashing for one frame at the start of every drag, before the first `dragover`
+ * has had a chance to say otherwise.
+ *
+ * This is a raw listener rather than a Pragmatic callback because `effectAllowed`
+ * can only be written during the `dragstart` event itself, and none of
+ * Pragmatic's callbacks are handed the event.
+ *
+ * Distinct from `preventUnhandled`, which answers the other half of the same
+ * question: this sets what the drag starts as, that keeps it from falling back
+ * to "no drop" over everything that is not a drop target.
+ */
+export function holdMoveDragEffect(element: HTMLElement): () => void {
+  const onDragStart = (event: DragEvent) => {
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+  }
+  element.addEventListener('dragstart', onDragStart)
+  return () => element.removeEventListener('dragstart', onDragStart)
+}

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

@@ -158,32 +158,49 @@ export function hasEmbedAuthAdapter(): boolean {
 
 /**
  * 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).
+ * auth rides in request headers.
  *
- * 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.
+ * Native asset loads (`<img src>`, `<track 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
+ * `useAuthedAssetSrc` / `useAuthedImageSrc`).
+ *
+ * The single signal is the registered adapter: when it supplies an
+ * `Authorization` header, the host authenticates by HEADER, so nothing the
+ * browser fetches on its own is authenticated. That holds for BOTH shapes a
+ * header-auth host takes:
+ *
+ *   - a cross-origin gateway URL — sanctioned via `allowedOrigins` (native
+ *     shells, whose page origin is `capacitor://` / `tauri://`);
+ *   - a same-origin / relative reverse-proxy path (`/content/api/...`) —
+ *     dev-ticket web, where the token lives in localStorage and there is NO
+ *     session cookie to fall back on. This case used to be excluded on the
+ *     assumption that same-origin implies "cookies work"; true for a cookie
+ *     session, false for every header-auth host, which is exactly when this
+ *     predicate is consulted at all.
+ *
+ * Everything else loads natively, unchanged: cookie-auth web (the adapter
+ * supplies no `Authorization`), no adapter at all (the hub), and third-party
+ * origins the bearer does NOT belong to (public images) — those stay out of
+ * reach of the token by the same origin rules `embedAuthedFetch` enforces.
  */
 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
-  }
+  if (!adapter || adapter.getHeaders?.().Authorization === undefined) return false
   let target: URL
+  let pageOrigin: string
   try {
     target = new URL(url, window.location.href)
+    // Same reason `assertSameOrigin` derives it this way: test environments
+    // mock `window.location` as a plain object with no `origin` field.
+    pageOrigin = new URL(window.location.href).origin
   } catch {
     return false
   }
   if (target.protocol !== 'http:' && target.protocol !== 'https:') return false
-  return adapter.allowedOrigins.includes(target.origin)
+  if (target.origin === pageOrigin) return true
+  return adapter.allowedOrigins?.includes(target.origin) ?? false
 }
 
 /**

package/src/utils/scroll-parent.ts

@@ -0,0 +1,23 @@
+/** Anything the browser can scroll. */
+const SCROLLABLE = /(auto|scroll|overlay)/
+
+/** Every scrollable ancestor of `element`, innermost first. */
+export function scrollableAncestorsOf(element: HTMLElement): HTMLElement[] {
+  const found: HTMLElement[] = []
+  for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node)
+    if (SCROLLABLE.test(style.overflowY) || SCROLLABLE.test(style.overflowX)) found.push(node)
+  }
+  return found
+}
+
+/**
+ * The nearest scrollable ancestor, or `null`.
+ *
+ * Stands in for "the working area this thing lives in": in an app whose layout
+ * scrolls a `<main>` rather than the document, that element is exactly the
+ * region a user considers to be the page.
+ */
+export function nearestScrollableAncestor(element: HTMLElement): HTMLElement | null {
+  return scrollableAncestorsOf(element)[0] ?? null
+}