@01.software/sdk 0.4.0 → 0.4.2

package/dist/realtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/query/realtime-hooks.ts","../src/core/query/realtime.ts","../src/core/client/types.ts","../src/core/query/query-keys.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { RealtimeConnection, type RealtimeEvent } from './realtime'\nimport { resolveApiUrl, type PublicCollection } from '../client/types'\nimport { collectionKeys } from './query-keys'\n\nexport type { RealtimeEvent }\n\nexport interface UseRealtimeQueryOptions {\n  /** Filter events to specific collections. Empty/undefined = all collections. */\n  collections?: PublicCollection[]\n  /** Enable/disable the SSE connection. Default: true. */\n  enabled?: boolean\n}\n\nexport interface UseRealtimeQueryResult {\n  /** Whether the SSE connection is currently active. */\n  connected: boolean\n  /** The last received event, or null. */\n  lastEvent: RealtimeEvent | null\n}\n\n/**\n * React hook that subscribes to real-time collection change events via SSE.\n * Automatically invalidates React Query cache when changes are detected.\n *\n * @example\n * ```tsx\n * const { connected } = useRealtimeQuery({\n *   clientKey: 'your-key',\n *   getToken: () => client.customer.getToken(),\n *   collections: ['products', 'orders'],\n * })\n * ```\n */\nexport function useRealtimeQuery(options: {\n  clientKey: string\n  getToken: () => string | null\n  collections?: PublicCollection[]\n  enabled?: boolean\n}): UseRealtimeQueryResult {\n  const { clientKey, getToken, collections, enabled = true } = options\n  const queryClient = useQueryClient()\n  const [connected, setConnected] = useState(false)\n  const [lastEvent, setLastEvent] = useState<RealtimeEvent | null>(null)\n  const connectionRef = useRef<RealtimeConnection | null>(null)\n\n  useEffect(() => {\n    if (!enabled || !clientKey) return\n\n    const baseUrl = resolveApiUrl()\n    const conn = new RealtimeConnection(\n      baseUrl,\n      clientKey,\n      getToken,\n      collections,\n    )\n    connectionRef.current = conn\n\n    // Listen for events and invalidate queries\n    const removeListener = conn.addListener((event) => {\n      setLastEvent(event)\n\n      // Invalidate all queries for the changed collection\n      const keys = collectionKeys(event.collection as PublicCollection)\n      queryClient.invalidateQueries({ queryKey: keys.all })\n    })\n\n    // Track connection state\n    const pollInterval = setInterval(() => {\n      setConnected(conn.connected)\n    }, 1000)\n\n    conn.connect()\n\n    return () => {\n      conn.disconnect()\n      removeListener()\n      clearInterval(pollInterval)\n      connectionRef.current = null\n      setConnected(false)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [clientKey, enabled, collections?.join(',')])\n\n  return { connected, lastEvent }\n}\n","/**\n * Fetch-based SSE connection manager for real-time collection change events.\n * Uses fetch + ReadableStream to support custom auth headers (unlike native EventSource).\n */\n\nexport interface RealtimeEvent {\n  collection: string\n  operation: string\n  id: string | null\n  timestamp: string\n}\n\nexport type RealtimeListener = (event: RealtimeEvent) => void\n\nconst INITIAL_RECONNECT_DELAY = 1_000\nconst MAX_RECONNECT_DELAY = 30_000\nconst RECONNECT_BACKOFF_FACTOR = 2\nconst MAX_NO_TOKEN_RETRIES = 5\n\nexport class RealtimeConnection {\n  private abortController: AbortController | null = null\n  private reconnectAttempt = 0\n  private noTokenAttempts = 0\n  private reconnectTimer: ReturnType<typeof setTimeout> | null = null\n  private listeners = new Set<RealtimeListener>()\n  private _connected = false\n\n  constructor(\n    private baseUrl: string,\n    private clientKey: string,\n    private getToken: () => string | null,\n    private collections?: string[],\n  ) {}\n\n  get connected(): boolean {\n    return this._connected\n  }\n\n  addListener(fn: RealtimeListener): () => void {\n    this.listeners.add(fn)\n    return () => this.listeners.delete(fn)\n  }\n\n  connect(): void {\n    if (this.abortController) return // Already connecting/connected\n\n    this.abortController = new AbortController()\n    this.startStream(this.abortController.signal)\n  }\n\n  disconnect(): void {\n    this._connected = false\n    if (this.reconnectTimer) {\n      clearTimeout(this.reconnectTimer)\n      this.reconnectTimer = null\n    }\n    if (this.abortController) {\n      this.abortController.abort()\n      this.abortController = null\n    }\n    this.reconnectAttempt = 0\n    this.noTokenAttempts = 0\n  }\n\n  private async startStream(signal: AbortSignal): Promise<void> {\n    const token = this.getToken()\n    if (!token) {\n      this.noTokenAttempts++\n      if (this.noTokenAttempts >= MAX_NO_TOKEN_RETRIES) {\n        // Stop reconnecting — no token available after multiple attempts\n        this._connected = false\n        this.abortController = null\n        return\n      }\n      this.scheduleReconnect()\n      return\n    }\n    this.noTokenAttempts = 0\n\n    const params = this.collections?.length\n      ? `?collections=${this.collections.join(',')}`\n      : ''\n    const url = `${this.baseUrl}/api/events/stream${params}`\n\n    try {\n      const response = await fetch(url, {\n        headers: {\n          'X-Client-Key': this.clientKey,\n          Authorization: `Bearer ${token}`,\n        },\n        signal,\n      })\n\n      if (!response.ok) {\n        if (response.status === 401) {\n          // Token expired — try reconnecting (will get fresh token)\n          this.scheduleReconnect()\n          return\n        }\n        throw new Error(`SSE connection failed: ${response.status}`)\n      }\n\n      if (!response.body) {\n        throw new Error('SSE response has no body')\n      }\n\n      this._connected = true\n      this.reconnectAttempt = 0\n\n      await this.readStream(response.body, signal)\n    } catch {\n      if (signal.aborted) return // Intentional disconnect\n      this._connected = false\n      this.scheduleReconnect()\n    }\n  }\n\n  private async readStream(\n    body: ReadableStream<Uint8Array>,\n    signal: AbortSignal,\n  ): Promise<void> {\n    const reader = body.getReader()\n    const decoder = new TextDecoder()\n    let buffer = ''\n    let currentEvent = ''\n    let currentData = ''\n\n    try {\n      while (true) {\n        const { done, value } = await reader.read()\n        if (done || signal.aborted) break\n\n        buffer += decoder.decode(value, { stream: true })\n        const lines = buffer.split('\\n')\n        buffer = lines.pop() ?? '' // Keep incomplete last line in buffer\n\n        for (const line of lines) {\n          if (line.startsWith('event: ')) {\n            currentEvent = line.slice(7)\n          } else if (line.startsWith('data: ')) {\n            currentData += (currentData ? '\\n' : '') + line.slice(6)\n          } else if (line === '') {\n            // Empty line = end of event\n            if (currentEvent === 'collection:change' && currentData) {\n              try {\n                const event: RealtimeEvent = JSON.parse(currentData)\n                for (const listener of this.listeners) {\n                  try {\n                    listener(event)\n                  } catch {\n                    // Listener error — ignore\n                  }\n                }\n              } catch {\n                // Malformed JSON — ignore\n              }\n            }\n            currentEvent = ''\n            currentData = ''\n          }\n          // Ignore comment lines (: heartbeat)\n        }\n      }\n    } catch {\n      // Stream read error\n    } finally {\n      reader.releaseLock()\n      this._connected = false\n      if (!signal.aborted) {\n        this.scheduleReconnect()\n      }\n    }\n  }\n\n  private scheduleReconnect(): void {\n    if (this.reconnectTimer) return\n\n    const delay = Math.min(\n      INITIAL_RECONNECT_DELAY *\n        Math.pow(RECONNECT_BACKOFF_FACTOR, this.reconnectAttempt),\n      MAX_RECONNECT_DELAY,\n    )\n    this.reconnectAttempt++\n\n    this.reconnectTimer = setTimeout(() => {\n      this.reconnectTimer = null\n      this.abortController = new AbortController()\n      this.startStream(this.abortController.signal)\n    }, delay)\n  }\n}\n","import type { Sort, Where } from 'payload'\n\nimport type { Collection, PublicCollection } from '../collection/const'\n\nexport type { Collection, PublicCollection }\n\n// ============================================================================\n// API URL Configuration\n// ============================================================================\n\ndeclare const __DEFAULT_API_URL__: string\n\n/**\n * API URL을 반환합니다.\n * 환경변수 SOFTWARE_API_URL 또는 NEXT_PUBLIC_SOFTWARE_API_URL로 오버라이드 가능.\n * 빌드 시 버전에 따라 기본값 결정: dev 빌드 → api-dev, 정식 → api.01.software\n */\nexport function resolveApiUrl(): string {\n  const envUrl =\n    process.env.SOFTWARE_API_URL || process.env.NEXT_PUBLIC_SOFTWARE_API_URL\n  if (envUrl) {\n    return envUrl.replace(/\\/$/, '')\n  }\n  return __DEFAULT_API_URL__\n}\n\n// ============================================================================\n// Client Configuration\n// ============================================================================\n\nexport interface ClientBrowserConfig {\n  clientKey: string\n  /**\n   * Customer authentication options.\n   * Used to initialize CustomerAuth on BrowserClient.\n   */\n  customer?: {\n    /**\n     * Persist token in localStorage. Defaults to `true`.\n     * - `true` (default): uses key `'customer-token'`\n     * - `string`: uses the given string as localStorage key\n     * - `false`: disables persistence (token/onTokenChange used instead)\n     *\n     * Handles SSR safely (no-op on server).\n     * When enabled, `token` and `onTokenChange` are ignored.\n     */\n    persist?: boolean | string\n    /** Initial token (e.g. from SSR cookie) */\n    token?: string\n    /** Called when token changes (login/logout) — use to persist in localStorage/cookie */\n    onTokenChange?: (token: string | null) => void\n  }\n}\n\nexport interface ClientServerConfig extends ClientBrowserConfig {\n  secretKey: string\n}\n\nexport interface ClientMetadata {\n  userAgent?: string\n  timestamp: number\n}\n\nexport interface ClientState {\n  metadata: ClientMetadata\n}\n\n// ============================================================================\n// API Response Types\n// ============================================================================\n\nexport interface PaginationMeta {\n  page: number\n  limit: number\n  totalDocs: number\n  totalPages: number\n  hasNextPage: boolean\n  hasPrevPage: boolean\n  pagingCounter: number\n  prevPage: number | null\n  nextPage: number | null\n}\n\n// ============================================================================\n// Payload CMS Native Response Types\n// ============================================================================\n\n/**\n * Payload CMS Find (List) Response\n * GET /api/{collection}\n */\nexport interface PayloadFindResponse<T = unknown> {\n  docs: T[]\n  totalDocs: number\n  limit: number\n  totalPages: number\n  page: number\n  pagingCounter: number\n  hasPrevPage: boolean\n  hasNextPage: boolean\n  prevPage: number | null\n  nextPage: number | null\n}\n\n/**\n * Payload CMS Create/Update Response\n * POST /api/{collection}\n * PATCH /api/{collection}/{id}\n */\nexport interface PayloadMutationResponse<T = unknown> {\n  message: string\n  doc: T\n  errors?: unknown[]\n}\n\n// ============================================================================\n// Query Options\n// ============================================================================\n\nexport interface ApiQueryOptions {\n  page?: number\n  limit?: number\n  sort?: Sort\n  where?: Where\n  depth?: number\n  select?: Record<string, boolean>\n}\n\nexport interface ApiQueryReactOptions {\n  keepPreviousData?: boolean\n}\n\n// ============================================================================\n// Debug & Retry Configuration\n// ============================================================================\n\nexport interface DebugConfig {\n  logRequests?: boolean\n  logResponses?: boolean\n  logErrors?: boolean\n}\n\nexport interface RetryConfig {\n  maxRetries?: number\n  retryableStatuses?: number[]\n  retryDelay?: (attempt: number) => number\n}\n\n\n// ============================================================================\n// Collection Types (re-exported from collection/const)\n// ============================================================================\n\n// ============================================================================\n// Type Utilities\n// ============================================================================\n\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]\n}\n\nexport type ExtractArrayType<T> = T extends (infer U)[] ? U : never\n","import type { PublicCollection, ApiQueryOptions } from '../client/types'\n\nexport function collectionKeys<T extends PublicCollection>(collection: T) {\n  return {\n    all: [collection] as const,\n    lists: () => [collection, 'list'] as const,\n    list: (options?: ApiQueryOptions) => [collection, 'list', options] as const,\n    details: () => [collection, 'detail'] as const,\n    detail: (id: string, options?: ApiQueryOptions) =>\n      [collection, 'detail', id, options] as const,\n    infinites: () => [collection, 'infinite'] as const,\n    infinite: (options?: Omit<ApiQueryOptions, 'page'>) =>\n      [collection, 'infinite', options] as const,\n  }\n}\n\nexport const customerKeys = {\n  all: ['customer'] as const,\n  me: () => ['customer', 'me'] as const,\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/core/query/realtime-hooks.ts","../src/core/query/realtime.ts","../src/core/client/types.ts","../src/core/query/query-keys.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { RealtimeConnection, type RealtimeEvent } from './realtime'\nimport { resolveApiUrl, type PublicCollection } from '../client/types'\nimport { collectionKeys } from './query-keys'\n\nexport type { RealtimeEvent }\n\nexport interface UseRealtimeQueryOptions {\n  /** Filter events to specific collections. Empty/undefined = all collections. */\n  collections?: PublicCollection[]\n  /** Enable/disable the SSE connection. Default: true. */\n  enabled?: boolean\n}\n\nexport interface UseRealtimeQueryResult {\n  /** Whether the SSE connection is currently active. */\n  connected: boolean\n  /** The last received event, or null. */\n  lastEvent: RealtimeEvent | null\n}\n\n/**\n * React hook that subscribes to real-time collection change events via SSE.\n * Automatically invalidates React Query cache when changes are detected.\n *\n * @example\n * ```tsx\n * const { connected } = useRealtimeQuery({\n *   clientKey: 'your-key',\n *   getToken: () => client.customer.getToken(),\n *   collections: ['products', 'orders'],\n * })\n * ```\n */\nexport function useRealtimeQuery(options: {\n  clientKey: string\n  getToken: () => string | null\n  collections?: PublicCollection[]\n  enabled?: boolean\n}): UseRealtimeQueryResult {\n  const { clientKey, getToken, collections, enabled = true } = options\n  const queryClient = useQueryClient()\n  const [connected, setConnected] = useState(false)\n  const [lastEvent, setLastEvent] = useState<RealtimeEvent | null>(null)\n  const connectionRef = useRef<RealtimeConnection | null>(null)\n\n  useEffect(() => {\n    if (!enabled || !clientKey) return\n\n    const baseUrl = resolveApiUrl()\n    const conn = new RealtimeConnection(\n      baseUrl,\n      clientKey,\n      getToken,\n      collections,\n    )\n    connectionRef.current = conn\n\n    // Listen for events and invalidate queries\n    const removeListener = conn.addListener((event) => {\n      setLastEvent(event)\n\n      // Invalidate all queries for the changed collection\n      const keys = collectionKeys(event.collection as PublicCollection)\n      queryClient.invalidateQueries({ queryKey: keys.all })\n    })\n\n    // Track connection state\n    const pollInterval = setInterval(() => {\n      setConnected(conn.connected)\n    }, 1000)\n\n    conn.connect()\n\n    return () => {\n      conn.disconnect()\n      removeListener()\n      clearInterval(pollInterval)\n      connectionRef.current = null\n      setConnected(false)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [clientKey, enabled, collections?.join(',')])\n\n  return { connected, lastEvent }\n}\n","/**\n * Fetch-based SSE connection manager for real-time collection change events.\n * Uses fetch + ReadableStream to support custom auth headers (unlike native EventSource).\n */\n\nexport interface RealtimeEvent {\n  collection: string\n  operation: string\n  id: string | null\n  timestamp: string\n}\n\nexport type RealtimeListener = (event: RealtimeEvent) => void\n\nconst INITIAL_RECONNECT_DELAY = 1_000\nconst MAX_RECONNECT_DELAY = 30_000\nconst RECONNECT_BACKOFF_FACTOR = 2\nconst MAX_NO_TOKEN_RETRIES = 5\n\nexport class RealtimeConnection {\n  private abortController: AbortController | null = null\n  private reconnectAttempt = 0\n  private noTokenAttempts = 0\n  private reconnectTimer: ReturnType<typeof setTimeout> | null = null\n  private listeners = new Set<RealtimeListener>()\n  private _connected = false\n\n  constructor(\n    private baseUrl: string,\n    private clientKey: string,\n    private getToken: () => string | null,\n    private collections?: string[],\n  ) {}\n\n  get connected(): boolean {\n    return this._connected\n  }\n\n  addListener(fn: RealtimeListener): () => void {\n    this.listeners.add(fn)\n    return () => this.listeners.delete(fn)\n  }\n\n  connect(): void {\n    if (this.abortController) return // Already connecting/connected\n\n    this.abortController = new AbortController()\n    this.startStream(this.abortController.signal)\n  }\n\n  disconnect(): void {\n    this._connected = false\n    if (this.reconnectTimer) {\n      clearTimeout(this.reconnectTimer)\n      this.reconnectTimer = null\n    }\n    if (this.abortController) {\n      this.abortController.abort()\n      this.abortController = null\n    }\n    this.reconnectAttempt = 0\n    this.noTokenAttempts = 0\n  }\n\n  private async startStream(signal: AbortSignal): Promise<void> {\n    const token = this.getToken()\n    if (!token) {\n      this.noTokenAttempts++\n      if (this.noTokenAttempts >= MAX_NO_TOKEN_RETRIES) {\n        // Stop reconnecting — no token available after multiple attempts\n        this._connected = false\n        this.abortController = null\n        return\n      }\n      this.scheduleReconnect()\n      return\n    }\n    this.noTokenAttempts = 0\n\n    const params = this.collections?.length\n      ? `?collections=${this.collections.join(',')}`\n      : ''\n    const url = `${this.baseUrl}/api/events/stream${params}`\n\n    try {\n      const response = await fetch(url, {\n        headers: {\n          'X-Client-Key': this.clientKey,\n          Authorization: `Bearer ${token}`,\n        },\n        signal,\n      })\n\n      if (!response.ok) {\n        if (response.status === 401) {\n          // Token expired — try reconnecting (will get fresh token)\n          this.scheduleReconnect()\n          return\n        }\n        throw new Error(`SSE connection failed: ${response.status}`)\n      }\n\n      if (!response.body) {\n        throw new Error('SSE response has no body')\n      }\n\n      this._connected = true\n      this.reconnectAttempt = 0\n\n      await this.readStream(response.body, signal)\n    } catch {\n      if (signal.aborted) return // Intentional disconnect\n      this._connected = false\n      this.scheduleReconnect()\n    }\n  }\n\n  private async readStream(\n    body: ReadableStream<Uint8Array>,\n    signal: AbortSignal,\n  ): Promise<void> {\n    const reader = body.getReader()\n    const decoder = new TextDecoder()\n    let buffer = ''\n    let currentEvent = ''\n    let currentData = ''\n\n    try {\n      while (true) {\n        const { done, value } = await reader.read()\n        if (done || signal.aborted) break\n\n        buffer += decoder.decode(value, { stream: true })\n        const lines = buffer.split('\\n')\n        buffer = lines.pop() ?? '' // Keep incomplete last line in buffer\n\n        for (const line of lines) {\n          if (line.startsWith('event: ')) {\n            currentEvent = line.slice(7)\n          } else if (line.startsWith('data: ')) {\n            currentData += (currentData ? '\\n' : '') + line.slice(6)\n          } else if (line === '') {\n            // Empty line = end of event\n            if (currentEvent === 'collection:change' && currentData) {\n              try {\n                const event: RealtimeEvent = JSON.parse(currentData)\n                for (const listener of this.listeners) {\n                  try {\n                    listener(event)\n                  } catch {\n                    // Listener error — ignore\n                  }\n                }\n              } catch {\n                // Malformed JSON — ignore\n              }\n            }\n            currentEvent = ''\n            currentData = ''\n          }\n          // Ignore comment lines (: heartbeat)\n        }\n      }\n    } catch {\n      // Stream read error\n    } finally {\n      reader.releaseLock()\n      this._connected = false\n      if (!signal.aborted) {\n        this.scheduleReconnect()\n      }\n    }\n  }\n\n  private scheduleReconnect(): void {\n    if (this.reconnectTimer) return\n\n    const delay = Math.min(\n      INITIAL_RECONNECT_DELAY *\n        Math.pow(RECONNECT_BACKOFF_FACTOR, this.reconnectAttempt),\n      MAX_RECONNECT_DELAY,\n    )\n    this.reconnectAttempt++\n\n    this.reconnectTimer = setTimeout(() => {\n      this.reconnectTimer = null\n      this.abortController = new AbortController()\n      this.startStream(this.abortController.signal)\n    }, delay)\n  }\n}\n","import type { Sort, Where } from 'payload'\n\nimport type { Collection, PublicCollection } from '../collection/const'\n\nexport type { Collection, PublicCollection }\n\n// ============================================================================\n// API URL Configuration\n// ============================================================================\n\ndeclare const __DEFAULT_API_URL__: string\n\n/**\n * API URL을 반환합니다.\n * 환경변수 SOFTWARE_API_URL 또는 NEXT_PUBLIC_SOFTWARE_API_URL로 오버라이드 가능.\n * 빌드 시 버전에 따라 기본값 결정: dev 빌드 → api-dev, 정식 → api.01.software\n */\nexport function resolveApiUrl(): string {\n  if (typeof process !== 'undefined' && process.env) {\n    const envUrl =\n      process.env.SOFTWARE_API_URL || process.env.NEXT_PUBLIC_SOFTWARE_API_URL\n    if (envUrl) {\n      return envUrl.replace(/\\/$/, '')\n    }\n  }\n  return __DEFAULT_API_URL__\n}\n\n// ============================================================================\n// Client Configuration\n// ============================================================================\n\nexport interface ClientBrowserConfig {\n  clientKey: string\n  /**\n   * Customer authentication options.\n   * Used to initialize CustomerAuth on BrowserClient.\n   */\n  customer?: {\n    /**\n     * Persist token in localStorage. Defaults to `true`.\n     * - `true` (default): uses key `'customer-token'`\n     * - `string`: uses the given string as localStorage key\n     * - `false`: disables persistence (token/onTokenChange used instead)\n     *\n     * Handles SSR safely (no-op on server).\n     * When enabled, `token` and `onTokenChange` are ignored.\n     */\n    persist?: boolean | string\n    /** Initial token (e.g. from SSR cookie) */\n    token?: string\n    /** Called when token changes (login/logout) — use to persist in localStorage/cookie */\n    onTokenChange?: (token: string | null) => void\n  }\n}\n\nexport interface ClientServerConfig extends ClientBrowserConfig {\n  secretKey: string\n}\n\nexport interface ClientMetadata {\n  userAgent?: string\n  timestamp: number\n}\n\nexport interface ClientState {\n  metadata: ClientMetadata\n}\n\n// ============================================================================\n// API Response Types\n// ============================================================================\n\nexport interface PaginationMeta {\n  page: number\n  limit: number\n  totalDocs: number\n  totalPages: number\n  hasNextPage: boolean\n  hasPrevPage: boolean\n  pagingCounter: number\n  prevPage: number | null\n  nextPage: number | null\n}\n\n// ============================================================================\n// Payload CMS Native Response Types\n// ============================================================================\n\n/**\n * Payload CMS Find (List) Response\n * GET /api/{collection}\n */\nexport interface PayloadFindResponse<T = unknown> {\n  docs: T[]\n  totalDocs: number\n  limit: number\n  totalPages: number\n  page: number\n  pagingCounter: number\n  hasPrevPage: boolean\n  hasNextPage: boolean\n  prevPage: number | null\n  nextPage: number | null\n}\n\n/**\n * Payload CMS Create/Update Response\n * POST /api/{collection}\n * PATCH /api/{collection}/{id}\n */\nexport interface PayloadMutationResponse<T = unknown> {\n  message: string\n  doc: T\n  errors?: unknown[]\n}\n\n// ============================================================================\n// Query Options\n// ============================================================================\n\nexport interface ApiQueryOptions {\n  page?: number\n  limit?: number\n  sort?: Sort\n  where?: Where\n  depth?: number\n  select?: Record<string, boolean>\n}\n\nexport interface ApiQueryReactOptions {\n  keepPreviousData?: boolean\n}\n\n// ============================================================================\n// Debug & Retry Configuration\n// ============================================================================\n\nexport interface DebugConfig {\n  logRequests?: boolean\n  logResponses?: boolean\n  logErrors?: boolean\n}\n\nexport interface RetryConfig {\n  maxRetries?: number\n  retryableStatuses?: number[]\n  retryDelay?: (attempt: number) => number\n}\n\n\n// ============================================================================\n// Collection Types (re-exported from collection/const)\n// ============================================================================\n\n// ============================================================================\n// Type Utilities\n// ============================================================================\n\nexport type DeepPartial<T> = {\n  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]\n}\n\nexport type ExtractArrayType<T> = T extends (infer U)[] ? U : never\n","import type { PublicCollection, ApiQueryOptions } from '../client/types'\n\nexport function collectionKeys<T extends PublicCollection>(collection: T) {\n  return {\n    all: [collection] as const,\n    lists: () => [collection, 'list'] as const,\n    list: (options?: ApiQueryOptions) => [collection, 'list', options] as const,\n    details: () => [collection, 'detail'] as const,\n    detail: (id: string, options?: ApiQueryOptions) =>\n      [collection, 'detail', id, options] as const,\n    infinites: () => [collection, 'infinite'] as const,\n    infinite: (options?: Omit<ApiQueryOptions, 'page'>) =>\n      [collection, 'infinite', options] as const,\n  }\n}\n\nexport const customerKeys = {\n  all: ['customer'] as const,\n  me: () => ['customer', 'me'] as const,\n}\n"],"mappings":"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","names":[]}

package/dist/ui/flow.cjs

@@ -2,7 +2,9 @@
 "use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -20,6 +22,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -68,13 +71,16 @@ __export(Flow_exports, {
   BUILT_IN_EDGE_TYPES: () => BUILT_IN_EDGE_TYPES,
   BUILT_IN_NODE_TYPES: () => BUILT_IN_NODE_TYPES,
   FlowRenderer: () => FlowRenderer,
+  getFrames: () => getFrames,
+  getNodeBounds: () => getNodeBounds,
   isDynamicNode: () => isDynamicNode,
   isFrameNode: () => isFrameNode,
-  useFlow: () => useFlow
+  useFlow: () => useFlow,
+  useFlowData: () => useFlowData
 });
 module.exports = __toCommonJS(Flow_exports);
-var import_react2 = __toESM(require("react"), 1);
-var import_react3 = require("@xyflow/react");
+var import_react3 = __toESM(require("react"), 1);
+var import_react4 = require("@xyflow/react");
 
 // src/ui/Flow/types.ts
 function isDynamicNode(node) {
@@ -240,6 +246,104 @@ function useFlow(options) {
   };
 }
 
+// src/ui/Flow/useFlowData.ts
+var import_react2 = require("react");
+function useFlowData(options) {
+  const { data, nodeTypeDefs: inputNodeDefs, edgeTypeDefs: inputEdgeDefs } = options;
+  const nodeTypeDefsMap = (0, import_react2.useMemo)(() => {
+    const allDefs = inputNodeDefs != null ? inputNodeDefs : BUILT_IN_NODE_TYPES;
+    return new Map(allDefs.map((d) => [d.slug, d]));
+  }, [inputNodeDefs]);
+  const edgeTypeDefsMap = (0, import_react2.useMemo)(() => {
+    const allDefs = inputEdgeDefs != null ? inputEdgeDefs : BUILT_IN_EDGE_TYPES;
+    return new Map(allDefs.map((d) => [d.slug, d]));
+  }, [inputEdgeDefs]);
+  const nodes = (0, import_react2.useMemo)(() => {
+    var _a;
+    return (_a = data == null ? void 0 : data.nodes) != null ? _a : [];
+  }, [data == null ? void 0 : data.nodes]);
+  const edges = (0, import_react2.useMemo)(() => {
+    var _a;
+    return (_a = data == null ? void 0 : data.edges) != null ? _a : [];
+  }, [data == null ? void 0 : data.edges]);
+  return {
+    nodes,
+    edges,
+    nodeTypeDefsMap,
+    edgeTypeDefsMap
+  };
+}
+
+// src/ui/Flow/utils.ts
+function getNodeBounds(nodes, nodeIds) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const idSet = new Set(nodeIds);
+  const targetNodes = nodes.filter((n) => idSet.has(n.id));
+  if (targetNodes.length === 0) return void 0;
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  function getAbsolutePosition(node) {
+    let x = node.position.x;
+    let y = node.position.y;
+    let current = node;
+    const visited = /* @__PURE__ */ new Set([node.id]);
+    while (current.parentId) {
+      const parentId = current.parentId;
+      if (visited.has(parentId)) break;
+      const parent = nodeMap.get(parentId);
+      if (!parent) break;
+      visited.add(parent.id);
+      x += parent.position.x;
+      y += parent.position.y;
+      current = parent;
+    }
+    return { x, y };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of targetNodes) {
+    const abs = getAbsolutePosition(node);
+    const w = (_e = (_d = (_c = (_a = node.style) == null ? void 0 : _a.width) != null ? _c : (_b = node.measured) == null ? void 0 : _b.width) != null ? _d : node.width) != null ? _e : 200;
+    const h = (_j = (_i = (_h = (_f = node.style) == null ? void 0 : _f.height) != null ? _h : (_g = node.measured) == null ? void 0 : _g.height) != null ? _i : node.height) != null ? _j : 200;
+    minX = Math.min(minX, abs.x);
+    minY = Math.min(minY, abs.y);
+    maxX = Math.max(maxX, abs.x + w);
+    maxY = Math.max(maxY, abs.y + h);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function getFrames(nodes) {
+  const frames = nodes.filter((n) => n.type === "frame");
+  if (frames.length === 0) return [];
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  function getAbsolutePosition(node) {
+    let x = node.position.x;
+    let y = node.position.y;
+    let current = node;
+    const visited = /* @__PURE__ */ new Set([node.id]);
+    while (current.parentId) {
+      const parentId = current.parentId;
+      if (visited.has(parentId)) break;
+      const parent = nodeMap.get(parentId);
+      if (!parent) break;
+      visited.add(parent.id);
+      x += parent.position.x;
+      y += parent.position.y;
+      current = parent;
+    }
+    return { x, y };
+  }
+  return frames.map((f) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    const data = f.data;
+    const abs = getAbsolutePosition(f);
+    const w = (_e = (_d = (_c = (_a = f.style) == null ? void 0 : _a.width) != null ? _c : (_b = f.measured) == null ? void 0 : _b.width) != null ? _d : f.width) != null ? _e : 200;
+    const h = (_j = (_i = (_h = (_f = f.style) == null ? void 0 : _f.height) != null ? _h : (_g = f.measured) == null ? void 0 : _g.height) != null ? _i : f.height) != null ? _j : 200;
+    return { id: f.id, label: (_k = data.label) != null ? _k : "", bounds: { x: abs.x, y: abs.y, width: w, height: h } };
+  }).sort((a, b) => a.bounds.y - b.bounds.y || a.bounds.x - b.bounds.x);
+}
+
 // src/ui/Flow/index.tsx
 function sanitizeUrl(url) {
   if (!url) return url;
@@ -252,8 +356,8 @@ function sanitizeUrl(url) {
   }
 }
 function toMarkerType(value) {
-  if (value === "arrow") return import_react3.MarkerType.Arrow;
-  if (value === "arrowclosed") return import_react3.MarkerType.ArrowClosed;
+  if (value === "arrow") return import_react4.MarkerType.Arrow;
+  if (value === "arrowclosed") return import_react4.MarkerType.ArrowClosed;
   return void 0;
 }
 function renderFieldValue(key, val, fieldDef) {
@@ -263,7 +367,7 @@ function renderFieldValue(key, val, fieldDef) {
     const imgUrl = typeof val === "string" ? val : val == null ? void 0 : val.url;
     const safeUrl = sanitizeUrl(imgUrl);
     if (!safeUrl) return null;
-    return /* @__PURE__ */ import_react2.default.createElement(
+    return /* @__PURE__ */ import_react3.default.createElement(
       "img",
       {
         key,
@@ -274,7 +378,7 @@ function renderFieldValue(key, val, fieldDef) {
       }
     );
   }
-  return /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
       key,
@@ -291,7 +395,7 @@ function renderFieldValue(key, val, fieldDef) {
 }
 function DefaultDynamicNode({ data }) {
   const d = data;
-  return /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
       style: {
@@ -308,7 +412,7 @@ function EnhancedDynamicNode({
   data,
   typeDef
 }) {
-  return /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
       style: {
@@ -337,7 +441,7 @@ function DefaultFrameNode({ data }) {
     if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`;
     return baseColor;
   })();
-  return /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
       style: {
@@ -348,7 +452,7 @@ function DefaultFrameNode({ data }) {
         border: borderStyle === "none" ? "none" : `2px ${borderStyle} rgba(128,128,128,0.3)`
       }
     },
-    /* @__PURE__ */ import_react2.default.createElement(
+    /* @__PURE__ */ import_react3.default.createElement(
       "div",
       {
         style: {
@@ -362,14 +466,15 @@ function DefaultFrameNode({ data }) {
     )
   );
 }
-function createNodeTypes(nodeRenderers, nodeTypeDefsMap) {
+function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode) {
   const types = {};
   types.dynamic = ((props) => {
     const d = props.data;
     const typeDef = nodeTypeDefsMap == null ? void 0 : nodeTypeDefsMap.get(d.nodeTypeSlug);
     const CustomRenderer = nodeRenderers == null ? void 0 : nodeRenderers[d.nodeTypeSlug];
+    let content;
     if (CustomRenderer) {
-      return /* @__PURE__ */ import_react2.default.createElement(
+      content = /* @__PURE__ */ import_react3.default.createElement(
         CustomRenderer,
         {
           id: props.id,
@@ -379,15 +484,94 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap) {
           nodeTypeDef: typeDef
         }
       );
+    } else if (typeDef) {
+      content = /* @__PURE__ */ import_react3.default.createElement(EnhancedDynamicNode, { data: d, typeDef });
+    } else {
+      content = /* @__PURE__ */ import_react3.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
     }
-    if (typeDef) {
-      return /* @__PURE__ */ import_react2.default.createElement(EnhancedDynamicNode, { data: d, typeDef });
+    if (renderNode) {
+      const slotProps = {
+        id: props.id,
+        nodeTypeSlug: d.nodeTypeSlug,
+        label: d.label,
+        fields: d.fields,
+        nodeTypeDef: typeDef
+      };
+      const result = renderNode(slotProps, content);
+      if (result !== null) content = result;
     }
-    return /* @__PURE__ */ import_react2.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    if (nodeWrapper) {
+      const Wrapper = nodeWrapper;
+      content = /* @__PURE__ */ import_react3.default.createElement(
+        Wrapper,
+        {
+          id: props.id,
+          nodeTypeSlug: d.nodeTypeSlug,
+          label: d.label,
+          selected: props.selected,
+          nodeTypeDef: typeDef
+        },
+        content
+      );
+    }
+    return content;
   });
-  types.frame = DefaultFrameNode;
+  types.frame = frameRenderer ? ((props) => {
+    const d = props.data;
+    const Renderer = frameRenderer;
+    return /* @__PURE__ */ import_react3.default.createElement(
+      Renderer,
+      {
+        id: props.id,
+        label: d.label,
+        color: d.color,
+        padding: d.padding,
+        borderStyle: d.borderStyle,
+        opacity: d.opacity
+      }
+    );
+  }) : DefaultFrameNode;
+  return types;
+}
+function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
+  if (!edgeRenderers || Object.keys(edgeRenderers).length === 0) return void 0;
+  const types = {};
+  for (const [slug, Renderer] of Object.entries(edgeRenderers)) {
+    types[slug] = ((props) => {
+      var _a;
+      const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
+      return /* @__PURE__ */ import_react3.default.createElement(
+        Renderer,
+        {
+          id: props.id,
+          edgeTypeSlug: slug,
+          source: props.source,
+          target: props.target,
+          label: props.label,
+          fields: (_a = props.data) == null ? void 0 : _a.fields,
+          edgeTypeDef: def,
+          style: props.style
+        }
+      );
+    });
+  }
   return types;
 }
+function FocusHandler({
+  bounds,
+  padding,
+  animation
+}) {
+  const { fitBounds } = (0, import_react4.useReactFlow)();
+  const boundsKey = `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`;
+  const boundsRef = import_react3.default.useRef(bounds);
+  boundsRef.current = bounds;
+  import_react3.default.useEffect(() => {
+    const duration = animation === true ? 300 : typeof animation === "number" ? animation : 0;
+    fitBounds(boundsRef.current, { padding, duration });
+  }, [boundsKey, padding, animation, fitBounds]);
+  return null;
+}
 var EDGE_TYPE_MAP = {
   step: "step",
   smoothstep: "smoothstep",
@@ -434,50 +618,78 @@ function FlowRenderer({
   nodeRenderers,
   nodeTypeDefs,
   edgeTypeDefs,
-  background = true,
+  background = false,
   interactive = false,
   fitView = true,
   onNodeClick,
-  onEdgeClick
+  onEdgeClick,
+  frameRenderer,
+  edgeRenderers,
+  nodeWrapper,
+  controls,
+  minimap,
+  minimapNodeColor,
+  children,
+  renderNode,
+  onViewportChange,
+  defaultViewport: defaultViewportProp,
+  bounds,
+  focusPadding,
+  focusAnimation
 }) {
   var _a;
-  const nodeTypeDefsMap = import_react2.default.useMemo(() => {
+  const nodeTypeDefsMap = import_react3.default.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return void 0;
     return new Map(nodeTypeDefs.map((d) => [d.slug, d]));
   }, [nodeTypeDefs]);
-  const edgeTypeDefsMap = import_react2.default.useMemo(() => {
+  const edgeTypeDefsMap = import_react3.default.useMemo(() => {
     if (!(edgeTypeDefs == null ? void 0 : edgeTypeDefs.length)) return void 0;
     return new Map(edgeTypeDefs.map((d) => [d.slug, d]));
   }, [edgeTypeDefs]);
-  const nodeTypes = import_react2.default.useMemo(
-    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),
-    [nodeRenderers, nodeTypeDefsMap]
+  const nodeTypes = import_react3.default.useMemo(
+    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode),
+    [nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode]
   );
-  const styledEdges = import_react2.default.useMemo(
-    () => {
-      var _a2;
-      return applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
-    },
-    [data == null ? void 0 : data.edges, edgeTypeDefsMap]
+  const customEdgeTypes = import_react3.default.useMemo(
+    () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
+    [edgeRenderers, edgeTypeDefsMap]
   );
+  const styledEdges = import_react3.default.useMemo(() => {
+    var _a2;
+    let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
+    if (edgeRenderers) {
+      edges = edges.map((edge) => {
+        const slug = edge.edgeTypeSlug;
+        if (slug && edgeRenderers[slug]) {
+          return __spreadProps(__spreadValues({}, edge), { type: slug });
+        }
+        return edge;
+      });
+    }
+    return edges;
+  }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
   if (!data) return null;
-  const defaultViewport = !fitView && data.viewport ? data.viewport : void 0;
-  return /* @__PURE__ */ import_react2.default.createElement(import_react3.ReactFlowProvider, null, /* @__PURE__ */ import_react2.default.createElement(
+  const resolvedDefaultViewport = defaultViewportProp != null ? defaultViewportProp : !fitView && data.viewport ? data.viewport : void 0;
+  return /* @__PURE__ */ import_react3.default.createElement(import_react4.ReactFlowProvider, null, /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
       className,
       style: __spreadValues({ width: "100%", height: "100%" }, style)
     },
-    /* @__PURE__ */ import_react2.default.createElement(
-      import_react3.ReactFlow,
+    /* @__PURE__ */ import_react3.default.createElement(
+      import_react4.ReactFlow,
       {
         nodes: (_a = data.nodes) != null ? _a : [],
         edges: styledEdges,
         nodeTypes,
-        defaultViewport,
+        edgeTypes: customEdgeTypes,
+        defaultViewport: resolvedDefaultViewport,
         fitView,
         onNodeClick,
         onEdgeClick,
+        onMoveEnd: onViewportChange ? ((_, vp) => {
+          onViewportChange(vp);
+        }) : void 0,
         nodesDraggable: interactive ? void 0 : false,
         nodesConnectable: false,
         elementsSelectable: interactive || !!onNodeClick || !!onEdgeClick,
@@ -486,7 +698,23 @@ function FlowRenderer({
         zoomOnPinch: interactive,
         zoomOnDoubleClick: false
       },
-      background && /* @__PURE__ */ import_react2.default.createElement(import_react3.Background, null)
+      background && /* @__PURE__ */ import_react3.default.createElement(import_react4.Background, null),
+      controls && /* @__PURE__ */ import_react3.default.createElement(import_react4.Controls, null),
+      minimap && /* @__PURE__ */ import_react3.default.createElement(
+        import_react4.MiniMap,
+        {
+          nodeColor: minimapNodeColor
+        }
+      ),
+      bounds && /* @__PURE__ */ import_react3.default.createElement(
+        FocusHandler,
+        {
+          bounds,
+          padding: focusPadding != null ? focusPadding : 0.1,
+          animation: focusAnimation != null ? focusAnimation : true
+        }
+      ),
+      children
     )
   ));
 }