@globalbrain/sefirot 4.61.2 → 4.63.0

package/lib/blocks/lens/components/LensCatalog.vue

@@ -1768,6 +1768,9 @@ defineExpose({
       :width="sheetWidth"
       @close="sheet.off"
     >
+      <template v-if="$slots['sheet-title-after']" #title-after="s">
+        <slot name="sheet-title-after" v-bind="s" />
+      </template>
       <template v-if="$slots['sheet-before']" #before="s">
         <slot name="sheet-before" v-bind="s" />
       </template>

package/lib/blocks/lens/components/LensSheet.vue

@@ -301,15 +301,15 @@ function requestClose() {
 
 // --- Slot context -----------------------------------------------------------
 //
-// Content passed to the `#before` / `#after` slots is declared in the page
+// Content passed to the `#title-after` / `#before` / `#after` slots is declared in the page
 // that hosts the catalog, so it cannot `inject` the edit context (which is
 // provided inside `LensCatalog`, a child of that page). Expose the pieces a
-// slot needs as slot props instead: the resolved record id, a record-bound
-// partial `save`, the entity key, the sheet `mode` (so a slot can render
-// different content for create vs view), and `registerCreateExtension` (so a
-// create-mode slot can contribute extra keys to the create payload). This keeps
-// the generic sheet free of one-off concerns (avatar upload, social links,
-// linked records) while still letting a page implement them.
+// slot needs as slot props instead: the rendered title, resolved record id, a
+// record-bound partial `save`, the entity key, the sheet `mode` (so a slot can
+// render different content for create vs view), and `registerCreateExtension`
+// (so a create-mode slot can contribute extra keys to the create payload). This
+// keeps the generic sheet free of one-off concerns (badges, avatar upload,
+// social links, linked records) while still letting a page implement them.
 
 const resolvedId = computed(() => (props.record && edit ? edit.resolveId(props.record) : null))
 
@@ -331,6 +331,7 @@ function saveRecord(values: Record<string, any>): Promise<void> {
 }
 
 const slotProps = computed(() => ({
+  title: title.value,
   record: props.record ?? null,
   id: resolvedId.value,
   entity: props.entity,
@@ -357,7 +358,12 @@ const slotProps = computed(() => ({
   <SSheet :open :closable="!saving" :width="width ?? '480px'" @close="requestClose">
     <div class="LensSheet">
       <div class="header">
-        <div class="title">{{ title }}</div>
+        <div class="heading">
+          <div class="title">{{ title }}</div>
+          <div v-if="$slots['title-after']" class="title-after">
+            <slot name="title-after" v-bind="slotProps" />
+          </div>
+        </div>
         <button
           class="close"
           type="button"
@@ -462,6 +468,15 @@ const slotProps = computed(() => ({
   border-bottom: 1px solid var(--c-divider);
 }
 
+.heading {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 1;
+  gap: 8px;
+  min-width: 0;
+}
+
 .title {
   font-size: 16px;
   font-weight: 500;
@@ -469,10 +484,17 @@ const slotProps = computed(() => ({
   color: var(--c-text-1);
 }
 
+.title-after {
+  display: flex;
+  align-items: center;
+  flex: none;
+}
+
 .close {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: none;
   width: 32px;
   height: 32px;
   border-radius: 6px;

package/lib/http/Http.ts

@@ -3,9 +3,107 @@ import { parse as parseCookie } from '@tinyhttp/cookie'
 import { FetchError, type FetchOptions, type FetchResponse } from 'ofetch'
 import { stringify } from 'qs'
 import { saveAs } from '../support/File'
-import { objectToFormData } from '../support/Http'
+import { getHttpStatusCode, objectToFormData } from '../support/Http'
 
 type Config = ReturnType<typeof import('../stores/HttpConfig').useHttpConfig>
+type BuiltRequest = [url: string, options: FetchOptions]
+
+export type HttpRequestOptions = FetchOptions & {
+  /**
+   * Prevent this request from recursively recovering the application session.
+   * Authentication bootstrap requests should disable session recovery.
+   */
+  sessionRecovery?: false
+}
+
+const xsrfRefreshes = new WeakMap<Config, Promise<void>>()
+const sessionRecoveries = new WeakMap<Config, Promise<boolean>>()
+const sessionRecoveryGenerations = new WeakMap<Config, number>()
+const relativeUrlBases = [
+  new URL('http://a.sefirot.invalid'),
+  new URL('http://b.sefirot.invalid')
+]
+
+function getSessionRecoveryGeneration(config: Config): number {
+  return sessionRecoveryGenerations.get(config) ?? 0
+}
+
+function isLocalUrlReference(url: string): boolean {
+  if (URL.canParse(url)) {
+    return false
+  }
+
+  return relativeUrlBases.every(
+    (base) => URL.canParse(url, base)
+      && new URL(url, base).origin === base.origin
+  )
+}
+
+function isReplayableBody(body: unknown): boolean {
+  if (body == null) {
+    return true
+  }
+
+  if (typeof body !== 'object') {
+    return ['string', 'number', 'boolean'].includes(typeof body)
+  }
+
+  if (
+    Array.isArray(body)
+    || body instanceof Blob
+    || body instanceof FormData
+    || body instanceof URLSearchParams
+    || body instanceof ArrayBuffer
+    || ArrayBuffer.isView(body)
+  ) {
+    return true
+  }
+
+  const source = body as {
+    constructor?: { name?: string }
+    pipeTo?: unknown
+    pipe?: unknown
+    next?: unknown
+    toJSON?: unknown
+    [Symbol.iterator]?: unknown
+    [Symbol.asyncIterator]?: unknown
+  }
+
+  if (
+    typeof source.pipeTo === 'function'
+    || typeof source.pipe === 'function'
+    || typeof source.next === 'function'
+    || typeof source[Symbol.iterator] === 'function'
+    || typeof source[Symbol.asyncIterator] === 'function'
+  ) {
+    return false
+  }
+
+  return source.constructor?.name === 'Object'
+    || typeof source.toJSON === 'function'
+}
+
+async function runSingleFlight<T>(
+  activeRequests: WeakMap<Config, Promise<T>>,
+  config: Config,
+  request: () => Promise<T>
+): Promise<T> {
+  const activeRequest = activeRequests.get(config)
+  if (activeRequest) {
+    return activeRequest
+  }
+
+  const nextRequest = Promise.resolve().then(request)
+  activeRequests.set(config, nextRequest)
+
+  try {
+    return await nextRequest
+  } finally {
+    if (activeRequests.get(config) === nextRequest) {
+      activeRequests.delete(config)
+    }
+  }
+}
 
 export class Http {
   private config: Config
@@ -22,16 +120,77 @@ export class Http {
     let xsrfToken = parseCookie(document.cookie)['XSRF-TOKEN']
 
     if (!xsrfToken) {
-      await this.head(this.config.xsrfUrl)
+      await this.refreshXsrfToken()
       xsrfToken = parseCookie(document.cookie)['XSRF-TOKEN']
     }
 
     return xsrfToken
   }
 
-  private async buildRequest(url: string, _options: FetchOptions = {}): Promise<[string, FetchOptions]> {
+  private isApplicationRequest(url: string, options: HttpRequestOptions = {}): boolean {
+    const pageUrl = typeof location === 'undefined' ? undefined : location.href
+    const applicationBaseUrl = this.config.baseUrl || pageUrl
+    const requestBaseUrl = Object.hasOwn(options, 'baseURL')
+      ? options.baseURL
+      : this.config.baseUrl
+    if (
+      !applicationBaseUrl
+      || (!pageUrl && isLocalUrlReference(applicationBaseUrl))
+    ) {
+      return isLocalUrlReference(url)
+        && (requestBaseUrl == null || isLocalUrlReference(requestBaseUrl))
+    }
+
+    try {
+      const applicationUrl = new URL(applicationBaseUrl, pageUrl)
+      const resolvedRequestBaseUrl = requestBaseUrl
+        ? new URL(requestBaseUrl, pageUrl)
+        : pageUrl
+
+      return new URL(url, resolvedRequestBaseUrl).origin === applicationUrl.origin
+    } catch {
+      return false
+    }
+  }
+
+  private async refreshXsrfToken(): Promise<void> {
+    const xsrfUrl = this.config.xsrfUrl
+    if (!xsrfUrl) {
+      return
+    }
+
+    return runSingleFlight(xsrfRefreshes, this.config, async () => {
+      await this.config.client(...(await this.buildRequest(
+        xsrfUrl,
+        { method: 'HEAD' }
+      )))
+    })
+  }
+
+  private async recoverSession(): Promise<boolean> {
+    const recoverSession = this.config.recoverSession
+    if (!recoverSession) {
+      return false
+    }
+
+    return runSingleFlight(sessionRecoveries, this.config, async () => {
+      const recovered = await recoverSession()
+      if (recovered) {
+        sessionRecoveryGenerations.set(
+          this.config,
+          getSessionRecoveryGeneration(this.config) + 1
+        )
+      }
+      return recovered
+    })
+  }
+
+  private async buildRequest(url: string, _options: HttpRequestOptions = {}): Promise<BuiltRequest> {
     const { method, params, query, ...options } = _options
-    const xsrfToken = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '')
+    delete options.sessionRecovery
+
+    const xsrfToken = this.isApplicationRequest(url, _options)
+      && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method || '')
       && (await this.ensureXsrfToken())
 
     const queryString = stringify(
@@ -57,25 +216,90 @@ export class Http {
     ]
   }
 
-  private async performRequest<T>(url: string, options: FetchOptions = {}): Promise<T> {
-    return this.config.client(...(await this.buildRequest(url, options)))
+  private async execute<T>(
+    url: string,
+    options: HttpRequestOptions,
+    send: (request: BuiltRequest) => Promise<T>
+  ): Promise<T> {
+    const applicationRequest = this.isApplicationRequest(url, options)
+    const replayable = isReplayableBody(options.body)
+
+    const attempt = async (
+      xsrfRecovered = false,
+      sessionRecovered = false
+    ): Promise<T> => {
+      const request = await this.buildRequest(url, options)
+      const sessionRecoveryGeneration = getSessionRecoveryGeneration(this.config)
+
+      try {
+        return await send(request)
+      } catch (error) {
+        const status = getHttpStatusCode(error)
+
+        if (
+          status === 419
+          && applicationRequest
+          && replayable
+          && this.config.xsrfUrl
+          && !xsrfRecovered
+        ) {
+          await this.refreshXsrfToken()
+          return attempt(true, sessionRecovered)
+        }
+
+        const canRecoverSession =
+          applicationRequest
+          && replayable
+          && options.sessionRecovery !== false
+          && this.config.recoverSession != null
+          && !sessionRecovered
+
+        if (status === 401 && canRecoverSession) {
+          const alreadyRecovered =
+            sessionRecoveryGeneration !== getSessionRecoveryGeneration(this.config)
+
+          if (alreadyRecovered || await this.recoverSession()) {
+            return attempt(xsrfRecovered, true)
+          }
+        }
+
+        throw error
+      }
+    }
+
+    return attempt()
+  }
+
+  private async performRequest<T>(url: string, options: HttpRequestOptions = {}): Promise<T> {
+    return this.execute(
+      url,
+      options,
+      (request) => this.config.client(...request)
+    )
   }
 
-  private async performRequestRaw<T>(url: string, options: FetchOptions = {}): Promise<FetchResponse<T>> {
+  private async performRequestRaw<T>(
+    url: string,
+    options: HttpRequestOptions = {}
+  ): Promise<FetchResponse<T>> {
     // 'raw' is unavailable in useRequestFetch() during SSR, but performRequestRaw is only
     // called by download, which runs client-side, so asserting raw's existence is safe
-    return this.config.client.raw!(...(await this.buildRequest(url, options)))
+    return this.execute(
+      url,
+      options,
+      (request) => this.config.client.raw!(...request)
+    )
   }
 
-  async get<T = any>(url: string, options?: FetchOptions): Promise<T> {
+  async get<T = any>(url: string, options?: HttpRequestOptions): Promise<T> {
     return this.performRequest<T>(url, { method: 'GET', ...options })
   }
 
-  async head<T = any>(url: string, options?: FetchOptions): Promise<T> {
+  async head<T = any>(url: string, options?: HttpRequestOptions): Promise<T> {
     return this.performRequest<T>(url, { method: 'HEAD', ...options })
   }
 
-  async post<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+  async post<T = any>(url: string, body?: any, options?: HttpRequestOptions): Promise<T> {
     if (body && !(body instanceof FormData)) {
       let hasFile = false
 
@@ -99,23 +323,23 @@ export class Http {
     return this.performRequest<T>(url, { method: 'POST', body, ...options })
   }
 
-  async put<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+  async put<T = any>(url: string, body?: any, options?: HttpRequestOptions): Promise<T> {
     return this.performRequest<T>(url, { method: 'PUT', body, ...options })
   }
 
-  async patch<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+  async patch<T = any>(url: string, body?: any, options?: HttpRequestOptions): Promise<T> {
     return this.performRequest<T>(url, { method: 'PATCH', body, ...options })
   }
 
-  async delete<T = any>(url: string, options?: FetchOptions): Promise<T> {
+  async delete<T = any>(url: string, options?: HttpRequestOptions): Promise<T> {
     return this.performRequest<T>(url, { method: 'DELETE', ...options })
   }
 
-  async upload<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
+  async upload<T = any>(url: string, body?: any, options?: HttpRequestOptions): Promise<T> {
     return this.post<T>(url, objectToFormData(body), options)
   }
 
-  async download(url: string, options?: FetchOptions): Promise<void> {
+  async download(url: string, options?: HttpRequestOptions): Promise<void> {
     const { _data: blob, headers } =
       await this.performRequestRaw<Blob>(url, { method: 'GET', responseType: 'blob', ...options })
 

package/lib/stores/HttpConfig.ts

@@ -15,6 +15,7 @@ export interface HttpOptions {
   baseUrl?: string
   xsrfUrl?: string | false
   client?: HttpClient
+  recoverSession?: false | (() => Awaitable<boolean>)
   lang?: Lang
   payloadKey?: string
   headers?: () => Awaitable<Record<string, string>>
@@ -25,6 +26,7 @@ export const useHttpConfig = defineStore('sefirot-http-config', () => {
   const baseUrl = ref<string | undefined>(undefined)
   const xsrfUrl = ref<string | false>('/api/csrf-cookie')
   const client = ref<HttpClient>(ofetch)
+  const recoverSession = ref<(() => Awaitable<boolean>) | undefined>(undefined)
   const lang = ref<Lang | undefined>(undefined)
   const payloadKey = ref<string>('__payload__')
   const headers = ref<() => Awaitable<Record<string, string>>>(async () => ({}))
@@ -34,6 +36,9 @@ export const useHttpConfig = defineStore('sefirot-http-config', () => {
     if (options.baseUrl != null) { baseUrl.value = options.baseUrl }
     if (options.xsrfUrl != null) { xsrfUrl.value = options.xsrfUrl }
     if (options.client != null) { client.value = options.client }
+    if (options.recoverSession != null) {
+      recoverSession.value = options.recoverSession || undefined
+    }
     if (options.lang != null) { lang.value = options.lang }
     if (options.payloadKey != null) { payloadKey.value = options.payloadKey }
     if (options.headers != null) { headers.value = options.headers }
@@ -44,6 +49,7 @@ export const useHttpConfig = defineStore('sefirot-http-config', () => {
     baseUrl: computed(() => baseUrl.value),
     xsrfUrl: computed(() => xsrfUrl.value),
     client: computed(() => client.value),
+    recoverSession: computed(() => recoverSession.value),
     lang: computed(() => lang.value),
     payloadKey: computed(() => payloadKey.value),
     headers: computed(() => headers.value),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.61.2",
+  "version": "4.63.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",