@01.software/sdk 0.2.9-dev.260314.f493447 → 0.4.0

package/dist/realtime.js

@@ -0,0 +1,239 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/core/query/realtime-hooks.ts
+import { useEffect, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+// src/core/query/realtime.ts
+var INITIAL_RECONNECT_DELAY = 1e3;
+var MAX_RECONNECT_DELAY = 3e4;
+var RECONNECT_BACKOFF_FACTOR = 2;
+var MAX_NO_TOKEN_RETRIES = 5;
+var RealtimeConnection = class {
+  constructor(baseUrl, clientKey, getToken, collections) {
+    this.baseUrl = baseUrl;
+    this.clientKey = clientKey;
+    this.getToken = getToken;
+    this.collections = collections;
+    this.abortController = null;
+    this.reconnectAttempt = 0;
+    this.noTokenAttempts = 0;
+    this.reconnectTimer = null;
+    this.listeners = /* @__PURE__ */ new Set();
+    this._connected = false;
+  }
+  get connected() {
+    return this._connected;
+  }
+  addListener(fn) {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+  connect() {
+    if (this.abortController) return;
+    this.abortController = new AbortController();
+    this.startStream(this.abortController.signal);
+  }
+  disconnect() {
+    this._connected = false;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+    this.reconnectAttempt = 0;
+    this.noTokenAttempts = 0;
+  }
+  startStream(signal) {
+    return __async(this, null, function* () {
+      var _a;
+      const token = this.getToken();
+      if (!token) {
+        this.noTokenAttempts++;
+        if (this.noTokenAttempts >= MAX_NO_TOKEN_RETRIES) {
+          this._connected = false;
+          this.abortController = null;
+          return;
+        }
+        this.scheduleReconnect();
+        return;
+      }
+      this.noTokenAttempts = 0;
+      const params = ((_a = this.collections) == null ? void 0 : _a.length) ? `?collections=${this.collections.join(",")}` : "";
+      const url = `${this.baseUrl}/api/events/stream${params}`;
+      try {
+        const response = yield fetch(url, {
+          headers: {
+            "X-Client-Key": this.clientKey,
+            Authorization: `Bearer ${token}`
+          },
+          signal
+        });
+        if (!response.ok) {
+          if (response.status === 401) {
+            this.scheduleReconnect();
+            return;
+          }
+          throw new Error(`SSE connection failed: ${response.status}`);
+        }
+        if (!response.body) {
+          throw new Error("SSE response has no body");
+        }
+        this._connected = true;
+        this.reconnectAttempt = 0;
+        yield this.readStream(response.body, signal);
+      } catch (e) {
+        if (signal.aborted) return;
+        this._connected = false;
+        this.scheduleReconnect();
+      }
+    });
+  }
+  readStream(body, signal) {
+    return __async(this, null, function* () {
+      var _a;
+      const reader = body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let currentEvent = "";
+      let currentData = "";
+      try {
+        while (true) {
+          const { done, value } = yield reader.read();
+          if (done || signal.aborted) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = (_a = lines.pop()) != null ? _a : "";
+          for (const line of lines) {
+            if (line.startsWith("event: ")) {
+              currentEvent = line.slice(7);
+            } else if (line.startsWith("data: ")) {
+              currentData += (currentData ? "\n" : "") + line.slice(6);
+            } else if (line === "") {
+              if (currentEvent === "collection:change" && currentData) {
+                try {
+                  const event = JSON.parse(currentData);
+                  for (const listener of this.listeners) {
+                    try {
+                      listener(event);
+                    } catch (e) {
+                    }
+                  }
+                } catch (e) {
+                }
+              }
+              currentEvent = "";
+              currentData = "";
+            }
+          }
+        }
+      } catch (e) {
+      } finally {
+        reader.releaseLock();
+        this._connected = false;
+        if (!signal.aborted) {
+          this.scheduleReconnect();
+        }
+      }
+    });
+  }
+  scheduleReconnect() {
+    if (this.reconnectTimer) return;
+    const delay = Math.min(
+      INITIAL_RECONNECT_DELAY * Math.pow(RECONNECT_BACKOFF_FACTOR, this.reconnectAttempt),
+      MAX_RECONNECT_DELAY
+    );
+    this.reconnectAttempt++;
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.abortController = new AbortController();
+      this.startStream(this.abortController.signal);
+    }, delay);
+  }
+};
+
+// src/core/client/types.ts
+function resolveApiUrl() {
+  const envUrl = process.env.SOFTWARE_API_URL || process.env.NEXT_PUBLIC_SOFTWARE_API_URL;
+  if (envUrl) {
+    return envUrl.replace(/\/$/, "");
+  }
+  return "https://api.01.software";
+}
+
+// src/core/query/query-keys.ts
+function collectionKeys(collection) {
+  return {
+    all: [collection],
+    lists: () => [collection, "list"],
+    list: (options) => [collection, "list", options],
+    details: () => [collection, "detail"],
+    detail: (id, options) => [collection, "detail", id, options],
+    infinites: () => [collection, "infinite"],
+    infinite: (options) => [collection, "infinite", options]
+  };
+}
+
+// src/core/query/realtime-hooks.ts
+function useRealtimeQuery(options) {
+  const { clientKey, getToken, collections, enabled = true } = options;
+  const queryClient = useQueryClient();
+  const [connected, setConnected] = useState(false);
+  const [lastEvent, setLastEvent] = useState(null);
+  const connectionRef = useRef(null);
+  useEffect(() => {
+    if (!enabled || !clientKey) return;
+    const baseUrl = resolveApiUrl();
+    const conn = new RealtimeConnection(
+      baseUrl,
+      clientKey,
+      getToken,
+      collections
+    );
+    connectionRef.current = conn;
+    const removeListener = conn.addListener((event) => {
+      setLastEvent(event);
+      const keys = collectionKeys(event.collection);
+      queryClient.invalidateQueries({ queryKey: keys.all });
+    });
+    const pollInterval = setInterval(() => {
+      setConnected(conn.connected);
+    }, 1e3);
+    conn.connect();
+    return () => {
+      conn.disconnect();
+      removeListener();
+      clearInterval(pollInterval);
+      connectionRef.current = null;
+      setConnected(false);
+    };
+  }, [clientKey, enabled, collections == null ? void 0 : collections.join(",")]);
+  return { connected, lastEvent };
+}
+export {
+  RealtimeConnection,
+  useRealtimeQuery
+};
+//# sourceMappingURL=realtime.js.map

package/dist/realtime.js.map

@@ -0,0 +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":[]}

package/dist/ui/code-block.cjs

@@ -103,7 +103,9 @@ function CodeBlock({
 }) {
   const [nodes, setNodes] = (0, import_react2.useState)(initial);
   const [copied, setCopied] = (0, import_react2.useState)(false);
+  const initialCodeRef = (0, import_react2.useRef)(code);
   (0, import_react2.useEffect)(() => {
+    if (initial && code === initialCodeRef.current && nodes === initial) return;
     let cancelled = false;
     void highlight(code, language, theme).then((el) => {
       if (!cancelled) setNodes(el);
@@ -111,7 +113,7 @@ function CodeBlock({
     return () => {
       cancelled = true;
     };
-  }, [code, language, theme]);
+  }, [code, language, theme, initial]);
   const handleCopy = () => {
     void navigator.clipboard.writeText(code).then(
       () => {

package/dist/ui/code-block.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/CodeBlock/index.tsx","../../src/ui/CodeBlock/highlight.ts"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useState, type JSX } from 'react'\nimport { highlight, type BundledTheme } from './highlight'\n\nexport type { BundledTheme }\nexport { highlight }\n\nexport interface CodeBlockProps {\n  /** Code string to highlight */\n  code: string\n  /** Language identifier (e.g. 'typescript', 'js', 'python') */\n  language?: string\n  /** Shiki theme name. Default: 'github-dark' */\n  theme?: BundledTheme\n  /** CSS class for the wrapper */\n  className?: string\n  /** Pre-rendered JSX from server component via `highlight()` */\n  initial?: JSX.Element\n  /** Show line numbers. Default: false */\n  showLineNumbers?: boolean\n  /** Show copy button. Default: true */\n  showCopyButton?: boolean\n}\n\n/**\n * Syntax-highlighted code block using shiki.\n *\n * @example Basic usage\n * ```tsx\n * <CodeBlock code=\"const x = 1\" language=\"typescript\" />\n * ```\n *\n * @example With server pre-rendering (Next.js)\n * ```tsx\n * // Server Component\n * const initial = await highlight(code, 'typescript')\n * return <CodeBlock code={code} language=\"typescript\" initial={initial} />\n * ```\n *\n * @example As RichTextContent block renderer\n * ```tsx\n * <RichTextContent\n *   data={data}\n *   blocks={{\n *     Code: ({ node }) => (\n *       <CodeBlock code={node.fields.code} language={node.fields.language} />\n *     ),\n *   }}\n * />\n * ```\n */\nexport function CodeBlock({\n  code,\n  language = 'typescript',\n  theme = 'github-dark',\n  className,\n  initial,\n  showLineNumbers = false,\n  showCopyButton = true,\n}: CodeBlockProps) {\n  const [nodes, setNodes] = useState<JSX.Element | undefined>(initial)\n  const [copied, setCopied] = useState(false)\n\n  useEffect(() => {\n    let cancelled = false\n    void highlight(code, language, theme).then((el) => {\n      if (!cancelled) setNodes(el)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language, theme])\n\n  const handleCopy = () => {\n    void navigator.clipboard.writeText(code).then(\n      () => {\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n      },\n      () => {},\n    )\n  }\n\n  return (\n    <div className={className} style={{ position: 'relative' }}>\n      {showCopyButton && (\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          aria-label=\"Copy code\"\n          style={{\n            position: 'absolute',\n            top: 8,\n            right: 8,\n            zIndex: 1,\n            padding: '4px 8px',\n            fontSize: 12,\n            lineHeight: 1,\n            border: '1px solid rgba(255,255,255,0.2)',\n            borderRadius: 4,\n            background: 'rgba(0,0,0,0.3)',\n            color: '#ccc',\n            cursor: 'pointer',\n            opacity: 0.7,\n            transition: 'opacity 0.15s',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = '1'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = '0.7'\n          }}\n        >\n          {copied ? 'Copied!' : 'Copy'}\n        </button>\n      )}\n      {showLineNumbers && nodes ? (\n        <div style={{ display: 'flex' }}>\n          <div\n            aria-hidden\n            style={{\n              padding: '1em 0.5em 1em 1em',\n              textAlign: 'right',\n              userSelect: 'none',\n              color: 'rgba(255,255,255,0.3)',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            {code.split('\\n').map((_, i) => (\n              <div key={i}>{i + 1}</div>\n            ))}\n          </div>\n          <div style={{ flex: 1, overflow: 'auto' }}>{nodes}</div>\n        </div>\n      ) : (\n        (nodes ?? (\n          <pre\n            style={{\n              margin: 0,\n              padding: '1em',\n              overflow: 'auto',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            <code>{code}</code>\n          </pre>\n        ))\n      )}\n    </div>\n  )\n}\n","import type { JSX } from 'react'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { codeToHast, type BundledLanguage, type BundledTheme } from 'shiki'\n\nexport type { BundledLanguage, BundledTheme }\n\n/** Normalize language aliases to shiki-compatible language IDs */\nconst LANGUAGE_ALIASES: Record<string, string> = {\n  js: 'javascript',\n  ts: 'typescript',\n  sh: 'bash',\n  shell: 'bash',\n  yml: 'yaml',\n  py: 'python',\n  rb: 'ruby',\n  plaintext: 'text',\n}\n\nfunction normalizeLanguage(lang: string): string {\n  return LANGUAGE_ALIASES[lang] || lang\n}\n\n/**\n * Highlight code to JSX using shiki.\n * Works in both Server and Client components.\n *\n * @example Server Component\n * ```tsx\n * const highlighted = await highlight('const x = 1', 'typescript')\n * return <div>{highlighted}</div>\n * ```\n */\nexport async function highlight(\n  code: string,\n  lang: string,\n  theme: BundledTheme = 'github-dark',\n): Promise<JSX.Element> {\n  const normalized = normalizeLanguage(lang)\n  try {\n    const hast = await codeToHast(code, {\n      lang: normalized as BundledLanguage,\n      theme,\n    })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  } catch {\n    // Fallback to plain text if language is not supported\n    const hast = await codeToHast(code, { lang: 'text', theme })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  }\n}\n"],"mappings":"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","names":["import_react","React"]}
+{"version":3,"sources":["../../src/ui/CodeBlock/index.tsx","../../src/ui/CodeBlock/highlight.ts"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState, type JSX } from 'react'\nimport { highlight, type BundledTheme } from './highlight'\n\nexport type { BundledTheme }\nexport { highlight }\n\nexport interface CodeBlockProps {\n  /** Code string to highlight */\n  code: string\n  /** Language identifier (e.g. 'typescript', 'js', 'python') */\n  language?: string\n  /** Shiki theme name. Default: 'github-dark' */\n  theme?: BundledTheme\n  /** CSS class for the wrapper */\n  className?: string\n  /** Pre-rendered JSX from server component via `highlight()` */\n  initial?: JSX.Element\n  /** Show line numbers. Default: false */\n  showLineNumbers?: boolean\n  /** Show copy button. Default: true */\n  showCopyButton?: boolean\n}\n\n/**\n * Syntax-highlighted code block using shiki.\n *\n * @example Basic usage\n * ```tsx\n * <CodeBlock code=\"const x = 1\" language=\"typescript\" />\n * ```\n *\n * @example With server pre-rendering (Next.js)\n * ```tsx\n * // Server Component\n * const initial = await highlight(code, 'typescript')\n * return <CodeBlock code={code} language=\"typescript\" initial={initial} />\n * ```\n *\n * @example As RichTextContent block renderer\n * ```tsx\n * <RichTextContent\n *   data={data}\n *   blocks={{\n *     Code: ({ node }) => (\n *       <CodeBlock code={node.fields.code} language={node.fields.language} />\n *     ),\n *   }}\n * />\n * ```\n */\nexport function CodeBlock({\n  code,\n  language = 'typescript',\n  theme = 'github-dark',\n  className,\n  initial,\n  showLineNumbers = false,\n  showCopyButton = true,\n}: CodeBlockProps) {\n  const [nodes, setNodes] = useState<JSX.Element | undefined>(initial)\n  const [copied, setCopied] = useState(false)\n  const initialCodeRef = useRef(code)\n\n  useEffect(() => {\n    // Skip re-highlighting if server pre-rendered and code hasn't changed\n    if (initial && code === initialCodeRef.current && nodes === initial) return\n\n    let cancelled = false\n    void highlight(code, language, theme).then((el) => {\n      if (!cancelled) setNodes(el)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language, theme, initial])\n\n  const handleCopy = () => {\n    void navigator.clipboard.writeText(code).then(\n      () => {\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n      },\n      () => {},\n    )\n  }\n\n  return (\n    <div className={className} style={{ position: 'relative' }}>\n      {showCopyButton && (\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          aria-label=\"Copy code\"\n          style={{\n            position: 'absolute',\n            top: 8,\n            right: 8,\n            zIndex: 1,\n            padding: '4px 8px',\n            fontSize: 12,\n            lineHeight: 1,\n            border: '1px solid rgba(255,255,255,0.2)',\n            borderRadius: 4,\n            background: 'rgba(0,0,0,0.3)',\n            color: '#ccc',\n            cursor: 'pointer',\n            opacity: 0.7,\n            transition: 'opacity 0.15s',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = '1'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = '0.7'\n          }}\n        >\n          {copied ? 'Copied!' : 'Copy'}\n        </button>\n      )}\n      {showLineNumbers && nodes ? (\n        <div style={{ display: 'flex' }}>\n          <div\n            aria-hidden\n            style={{\n              padding: '1em 0.5em 1em 1em',\n              textAlign: 'right',\n              userSelect: 'none',\n              color: 'rgba(255,255,255,0.3)',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            {code.split('\\n').map((_, i) => (\n              <div key={i}>{i + 1}</div>\n            ))}\n          </div>\n          <div style={{ flex: 1, overflow: 'auto' }}>{nodes}</div>\n        </div>\n      ) : (\n        (nodes ?? (\n          <pre\n            style={{\n              margin: 0,\n              padding: '1em',\n              overflow: 'auto',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            <code>{code}</code>\n          </pre>\n        ))\n      )}\n    </div>\n  )\n}\n","import type { JSX } from 'react'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { codeToHast, type BundledLanguage, type BundledTheme } from 'shiki'\n\nexport type { BundledLanguage, BundledTheme }\n\n/** Normalize language aliases to shiki-compatible language IDs */\nconst LANGUAGE_ALIASES: Record<string, string> = {\n  js: 'javascript',\n  ts: 'typescript',\n  sh: 'bash',\n  shell: 'bash',\n  yml: 'yaml',\n  py: 'python',\n  rb: 'ruby',\n  plaintext: 'text',\n}\n\nfunction normalizeLanguage(lang: string): string {\n  return LANGUAGE_ALIASES[lang] || lang\n}\n\n/**\n * Highlight code to JSX using shiki.\n * Works in both Server and Client components.\n *\n * @example Server Component\n * ```tsx\n * const highlighted = await highlight('const x = 1', 'typescript')\n * return <div>{highlighted}</div>\n * ```\n */\nexport async function highlight(\n  code: string,\n  lang: string,\n  theme: BundledTheme = 'github-dark',\n): Promise<JSX.Element> {\n  const normalized = normalizeLanguage(lang)\n  try {\n    const hast = await codeToHast(code, {\n      lang: normalized as BundledLanguage,\n      theme,\n    })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  } catch {\n    // Fallback to plain text if language is not supported\n    const hast = await codeToHast(code, { lang: 'text', theme })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  }\n}\n"],"mappings":"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","names":["import_react","React"]}

package/dist/ui/code-block.js

@@ -21,7 +21,7 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/ui/CodeBlock/index.tsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 // src/ui/CodeBlock/highlight.ts
 import { Fragment } from "react";
@@ -69,7 +69,9 @@ function CodeBlock({
 }) {
   const [nodes, setNodes] = useState(initial);
   const [copied, setCopied] = useState(false);
+  const initialCodeRef = useRef(code);
   useEffect(() => {
+    if (initial && code === initialCodeRef.current && nodes === initial) return;
     let cancelled = false;
     void highlight(code, language, theme).then((el) => {
       if (!cancelled) setNodes(el);
@@ -77,7 +79,7 @@ function CodeBlock({
     return () => {
       cancelled = true;
     };
-  }, [code, language, theme]);
+  }, [code, language, theme, initial]);
   const handleCopy = () => {
     void navigator.clipboard.writeText(code).then(
       () => {

package/dist/ui/code-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/CodeBlock/index.tsx","../../src/ui/CodeBlock/highlight.ts"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useState, type JSX } from 'react'\nimport { highlight, type BundledTheme } from './highlight'\n\nexport type { BundledTheme }\nexport { highlight }\n\nexport interface CodeBlockProps {\n  /** Code string to highlight */\n  code: string\n  /** Language identifier (e.g. 'typescript', 'js', 'python') */\n  language?: string\n  /** Shiki theme name. Default: 'github-dark' */\n  theme?: BundledTheme\n  /** CSS class for the wrapper */\n  className?: string\n  /** Pre-rendered JSX from server component via `highlight()` */\n  initial?: JSX.Element\n  /** Show line numbers. Default: false */\n  showLineNumbers?: boolean\n  /** Show copy button. Default: true */\n  showCopyButton?: boolean\n}\n\n/**\n * Syntax-highlighted code block using shiki.\n *\n * @example Basic usage\n * ```tsx\n * <CodeBlock code=\"const x = 1\" language=\"typescript\" />\n * ```\n *\n * @example With server pre-rendering (Next.js)\n * ```tsx\n * // Server Component\n * const initial = await highlight(code, 'typescript')\n * return <CodeBlock code={code} language=\"typescript\" initial={initial} />\n * ```\n *\n * @example As RichTextContent block renderer\n * ```tsx\n * <RichTextContent\n *   data={data}\n *   blocks={{\n *     Code: ({ node }) => (\n *       <CodeBlock code={node.fields.code} language={node.fields.language} />\n *     ),\n *   }}\n * />\n * ```\n */\nexport function CodeBlock({\n  code,\n  language = 'typescript',\n  theme = 'github-dark',\n  className,\n  initial,\n  showLineNumbers = false,\n  showCopyButton = true,\n}: CodeBlockProps) {\n  const [nodes, setNodes] = useState<JSX.Element | undefined>(initial)\n  const [copied, setCopied] = useState(false)\n\n  useEffect(() => {\n    let cancelled = false\n    void highlight(code, language, theme).then((el) => {\n      if (!cancelled) setNodes(el)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language, theme])\n\n  const handleCopy = () => {\n    void navigator.clipboard.writeText(code).then(\n      () => {\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n      },\n      () => {},\n    )\n  }\n\n  return (\n    <div className={className} style={{ position: 'relative' }}>\n      {showCopyButton && (\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          aria-label=\"Copy code\"\n          style={{\n            position: 'absolute',\n            top: 8,\n            right: 8,\n            zIndex: 1,\n            padding: '4px 8px',\n            fontSize: 12,\n            lineHeight: 1,\n            border: '1px solid rgba(255,255,255,0.2)',\n            borderRadius: 4,\n            background: 'rgba(0,0,0,0.3)',\n            color: '#ccc',\n            cursor: 'pointer',\n            opacity: 0.7,\n            transition: 'opacity 0.15s',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = '1'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = '0.7'\n          }}\n        >\n          {copied ? 'Copied!' : 'Copy'}\n        </button>\n      )}\n      {showLineNumbers && nodes ? (\n        <div style={{ display: 'flex' }}>\n          <div\n            aria-hidden\n            style={{\n              padding: '1em 0.5em 1em 1em',\n              textAlign: 'right',\n              userSelect: 'none',\n              color: 'rgba(255,255,255,0.3)',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            {code.split('\\n').map((_, i) => (\n              <div key={i}>{i + 1}</div>\n            ))}\n          </div>\n          <div style={{ flex: 1, overflow: 'auto' }}>{nodes}</div>\n        </div>\n      ) : (\n        (nodes ?? (\n          <pre\n            style={{\n              margin: 0,\n              padding: '1em',\n              overflow: 'auto',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            <code>{code}</code>\n          </pre>\n        ))\n      )}\n    </div>\n  )\n}\n","import type { JSX } from 'react'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { codeToHast, type BundledLanguage, type BundledTheme } from 'shiki'\n\nexport type { BundledLanguage, BundledTheme }\n\n/** Normalize language aliases to shiki-compatible language IDs */\nconst LANGUAGE_ALIASES: Record<string, string> = {\n  js: 'javascript',\n  ts: 'typescript',\n  sh: 'bash',\n  shell: 'bash',\n  yml: 'yaml',\n  py: 'python',\n  rb: 'ruby',\n  plaintext: 'text',\n}\n\nfunction normalizeLanguage(lang: string): string {\n  return LANGUAGE_ALIASES[lang] || lang\n}\n\n/**\n * Highlight code to JSX using shiki.\n * Works in both Server and Client components.\n *\n * @example Server Component\n * ```tsx\n * const highlighted = await highlight('const x = 1', 'typescript')\n * return <div>{highlighted}</div>\n * ```\n */\nexport async function highlight(\n  code: string,\n  lang: string,\n  theme: BundledTheme = 'github-dark',\n): Promise<JSX.Element> {\n  const normalized = normalizeLanguage(lang)\n  try {\n    const hast = await codeToHast(code, {\n      lang: normalized as BundledLanguage,\n      theme,\n    })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  } catch {\n    // Fallback to plain text if language is not supported\n    const hast = await codeToHast(code, { lang: 'text', theme })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/ui/CodeBlock/index.tsx","../../src/ui/CodeBlock/highlight.ts"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState, type JSX } from 'react'\nimport { highlight, type BundledTheme } from './highlight'\n\nexport type { BundledTheme }\nexport { highlight }\n\nexport interface CodeBlockProps {\n  /** Code string to highlight */\n  code: string\n  /** Language identifier (e.g. 'typescript', 'js', 'python') */\n  language?: string\n  /** Shiki theme name. Default: 'github-dark' */\n  theme?: BundledTheme\n  /** CSS class for the wrapper */\n  className?: string\n  /** Pre-rendered JSX from server component via `highlight()` */\n  initial?: JSX.Element\n  /** Show line numbers. Default: false */\n  showLineNumbers?: boolean\n  /** Show copy button. Default: true */\n  showCopyButton?: boolean\n}\n\n/**\n * Syntax-highlighted code block using shiki.\n *\n * @example Basic usage\n * ```tsx\n * <CodeBlock code=\"const x = 1\" language=\"typescript\" />\n * ```\n *\n * @example With server pre-rendering (Next.js)\n * ```tsx\n * // Server Component\n * const initial = await highlight(code, 'typescript')\n * return <CodeBlock code={code} language=\"typescript\" initial={initial} />\n * ```\n *\n * @example As RichTextContent block renderer\n * ```tsx\n * <RichTextContent\n *   data={data}\n *   blocks={{\n *     Code: ({ node }) => (\n *       <CodeBlock code={node.fields.code} language={node.fields.language} />\n *     ),\n *   }}\n * />\n * ```\n */\nexport function CodeBlock({\n  code,\n  language = 'typescript',\n  theme = 'github-dark',\n  className,\n  initial,\n  showLineNumbers = false,\n  showCopyButton = true,\n}: CodeBlockProps) {\n  const [nodes, setNodes] = useState<JSX.Element | undefined>(initial)\n  const [copied, setCopied] = useState(false)\n  const initialCodeRef = useRef(code)\n\n  useEffect(() => {\n    // Skip re-highlighting if server pre-rendered and code hasn't changed\n    if (initial && code === initialCodeRef.current && nodes === initial) return\n\n    let cancelled = false\n    void highlight(code, language, theme).then((el) => {\n      if (!cancelled) setNodes(el)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [code, language, theme, initial])\n\n  const handleCopy = () => {\n    void navigator.clipboard.writeText(code).then(\n      () => {\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n      },\n      () => {},\n    )\n  }\n\n  return (\n    <div className={className} style={{ position: 'relative' }}>\n      {showCopyButton && (\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          aria-label=\"Copy code\"\n          style={{\n            position: 'absolute',\n            top: 8,\n            right: 8,\n            zIndex: 1,\n            padding: '4px 8px',\n            fontSize: 12,\n            lineHeight: 1,\n            border: '1px solid rgba(255,255,255,0.2)',\n            borderRadius: 4,\n            background: 'rgba(0,0,0,0.3)',\n            color: '#ccc',\n            cursor: 'pointer',\n            opacity: 0.7,\n            transition: 'opacity 0.15s',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.opacity = '1'\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.opacity = '0.7'\n          }}\n        >\n          {copied ? 'Copied!' : 'Copy'}\n        </button>\n      )}\n      {showLineNumbers && nodes ? (\n        <div style={{ display: 'flex' }}>\n          <div\n            aria-hidden\n            style={{\n              padding: '1em 0.5em 1em 1em',\n              textAlign: 'right',\n              userSelect: 'none',\n              color: 'rgba(255,255,255,0.3)',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            {code.split('\\n').map((_, i) => (\n              <div key={i}>{i + 1}</div>\n            ))}\n          </div>\n          <div style={{ flex: 1, overflow: 'auto' }}>{nodes}</div>\n        </div>\n      ) : (\n        (nodes ?? (\n          <pre\n            style={{\n              margin: 0,\n              padding: '1em',\n              overflow: 'auto',\n              fontFamily: 'monospace',\n              fontSize: 13,\n              lineHeight: 1.5,\n            }}\n          >\n            <code>{code}</code>\n          </pre>\n        ))\n      )}\n    </div>\n  )\n}\n","import type { JSX } from 'react'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { codeToHast, type BundledLanguage, type BundledTheme } from 'shiki'\n\nexport type { BundledLanguage, BundledTheme }\n\n/** Normalize language aliases to shiki-compatible language IDs */\nconst LANGUAGE_ALIASES: Record<string, string> = {\n  js: 'javascript',\n  ts: 'typescript',\n  sh: 'bash',\n  shell: 'bash',\n  yml: 'yaml',\n  py: 'python',\n  rb: 'ruby',\n  plaintext: 'text',\n}\n\nfunction normalizeLanguage(lang: string): string {\n  return LANGUAGE_ALIASES[lang] || lang\n}\n\n/**\n * Highlight code to JSX using shiki.\n * Works in both Server and Client components.\n *\n * @example Server Component\n * ```tsx\n * const highlighted = await highlight('const x = 1', 'typescript')\n * return <div>{highlighted}</div>\n * ```\n */\nexport async function highlight(\n  code: string,\n  lang: string,\n  theme: BundledTheme = 'github-dark',\n): Promise<JSX.Element> {\n  const normalized = normalizeLanguage(lang)\n  try {\n    const hast = await codeToHast(code, {\n      lang: normalized as BundledLanguage,\n      theme,\n    })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  } catch {\n    // Fallback to plain text if language is not supported\n    const hast = await codeToHast(code, { lang: 'text', theme })\n    return toJsxRuntime(hast, { Fragment, jsx, jsxs }) as JSX.Element\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/ui/flow.cjs

@@ -125,6 +125,21 @@ var BUILT_IN_EDGE_TYPES = [
 // src/ui/Flow/useFlow.ts
 var import_react_query = require("@tanstack/react-query");
 var import_react = require("react");
+
+// src/core/query/query-keys.ts
+function collectionKeys(collection) {
+  return {
+    all: [collection],
+    lists: () => [collection, "list"],
+    list: (options) => [collection, "list", options],
+    details: () => [collection, "detail"],
+    detail: (id, options) => [collection, "detail", id, options],
+    infinites: () => [collection, "infinite"],
+    infinite: (options) => [collection, "infinite", options]
+  };
+}
+
+// src/ui/Flow/useFlow.ts
 function toNodeTypeDef(doc) {
   var _a, _b, _c, _d;
   return {
@@ -160,7 +175,7 @@ function useFlow(options) {
   const identifier = (_a = id != null ? id : slug) != null ? _a : "";
   const flowQuery = (0, import_react_query.useQuery)(
     {
-      queryKey: ["flows", identifier],
+      queryKey: collectionKeys("flows").detail(identifier),
       queryFn: () => __async(null, null, function* () {
         if (id) {
           return client.from("flows").findById(id);
@@ -179,7 +194,7 @@ function useFlow(options) {
   );
   const nodeTypesQuery = (0, import_react_query.useQuery)(
     {
-      queryKey: ["flow-node-types"],
+      queryKey: collectionKeys("flow-node-types").lists(),
       queryFn: () => __async(null, null, function* () {
         const result = yield client.from("flow-node-types").find({ limit: 100 });
         return result.docs;
@@ -190,7 +205,7 @@ function useFlow(options) {
   );
   const edgeTypesQuery = (0, import_react_query.useQuery)(
     {
-      queryKey: ["flow-edge-types"],
+      queryKey: collectionKeys("flow-edge-types").lists(),
       queryFn: () => __async(null, null, function* () {
         const result = yield client.from("flow-edge-types").find({ limit: 100 });
         return result.docs;

package/dist/ui/flow.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/Flow/index.tsx","../../src/ui/Flow/types.ts","../../src/ui/Flow/built-in-node-types.ts","../../src/ui/Flow/built-in-edge-types.ts","../../src/ui/Flow/useFlow.ts"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  ReactFlow,\n  ReactFlowProvider,\n  Background,\n  MarkerType,\n  type NodeTypes,\n  type NodeProps,\n  type Edge,\n} from '@xyflow/react'\nimport type {\n  CanvasData,\n  DynamicNodeData,\n  DynamicNodeSlotProps,\n  EdgeTypeDef,\n  FlowEdge,\n  FlowNode,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n} from './types'\n\nexport type {\n  CanvasData,\n  DynamicNodeSlotProps,\n  FlowNode,\n  FlowEdge,\n  FlowViewport,\n  FlowNodePosition,\n  FlowNodeData,\n  DynamicNodeData,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n  EdgeTypeDef,\n} from './types'\nexport { isDynamicNode, isFrameNode } from './types'\nexport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nexport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\nexport { useFlow } from './useFlow'\nexport type { SDKClient, UseFlowOptions, UseFlowResult } from './useFlow'\n\n// ── Helpers ──\n\nfunction sanitizeUrl(url: string | undefined): string | undefined {\n  if (!url) return url\n  try {\n    const parsed = new URL(url)\n    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return url\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction toMarkerType(value: string): MarkerType | undefined {\n  if (value === 'arrow') return MarkerType.Arrow\n  if (value === 'arrowclosed') return MarkerType.ArrowClosed\n  return undefined\n}\n\n// ── Field renderer (type-aware, matching console style) ──\n\nfunction renderFieldValue(\n  key: string,\n  val: unknown,\n  fieldDef?: NodeTypeFieldDef,\n): React.ReactNode {\n  if (val == null || val === '') return null\n\n  const fieldType = fieldDef?.fieldType\n\n  // Image field — image only, no decoration\n  if (\n    fieldType === 'image' ||\n    (typeof val === 'object' && val !== null && 'url' in val)\n  ) {\n    const imgUrl =\n      typeof val === 'string' ? val : (val as { url?: string })?.url\n    const safeUrl = sanitizeUrl(imgUrl)\n    if (!safeUrl) return null\n    return (\n      <img\n        key={key}\n        src={safeUrl}\n        alt=\"\"\n        draggable={false}\n        style={{ flex: 1, minHeight: 0, width: '100%', objectFit: 'contain' }}\n      />\n    )\n  }\n\n  // All other fields — text only\n  return (\n    <div\n      key={key}\n      style={{\n        fontSize: 11,\n        whiteSpace: 'pre-wrap',\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        flexShrink: 0,\n      }}\n    >\n      {String(val)}\n    </div>\n  )\n}\n\n// ── Default dynamic node renderer (no typeDef) ──\n\nfunction DefaultDynamicNode({ data }: NodeProps) {\n  const d = data as unknown as DynamicNodeData\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {d.fields &&\n        Object.entries(d.fields)\n          .filter(([, v]) => v != null && v !== '')\n          .map(([key, val]) => renderFieldValue(key, val))}\n    </div>\n  )\n}\n\n// ── Enhanced dynamic node renderer (with NodeTypeDef) ──\n\nfunction EnhancedDynamicNode({\n  data,\n  typeDef,\n}: {\n  data: DynamicNodeData\n  typeDef: NodeTypeDef\n}) {\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {typeDef.fields.map((f) => {\n        const val = data.fields[f.name]\n        if (val == null || val === '') return null\n        return renderFieldValue(f.name, val, f)\n      })}\n    </div>\n  )\n}\n\n// ── Default frame node renderer ──\n\nfunction DefaultFrameNode({ data }: NodeProps) {\n  const d = data as unknown as FrameNodeData\n  const baseColor = d.color ?? 'rgba(128,128,128,0.15)'\n  const padding = d.padding ?? 20\n  const borderStyle = d.borderStyle ?? 'dashed'\n  const opacity = d.opacity ?? 0.15\n\n  // Apply opacity to rgba colors\n  const bgColor = (() => {\n    const m = baseColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n    if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`\n    return baseColor\n  })()\n\n  return (\n    <div\n      style={{\n        backgroundColor: bgColor,\n        padding,\n        width: '100%',\n        height: '100%',\n        border:\n          borderStyle === 'none'\n            ? 'none'\n            : `2px ${borderStyle} rgba(128,128,128,0.3)`,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 11,\n          fontWeight: 600,\n          color: 'rgba(128,128,128,0.6)',\n          userSelect: 'none',\n        }}\n      >\n        {d.label}\n      </div>\n    </div>\n  )\n}\n\n// ── Node types builder ──\n\nfunction createNodeTypes(\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>,\n  nodeTypeDefsMap?: Map<string, NodeTypeDef>,\n): NodeTypes {\n  const types: NodeTypes = {} as NodeTypes\n\n  // Dynamic node type\n  types.dynamic = ((props: NodeProps) => {\n    const d = props.data as unknown as DynamicNodeData\n    const typeDef = nodeTypeDefsMap?.get(d.nodeTypeSlug)\n    const CustomRenderer = nodeRenderers?.[d.nodeTypeSlug]\n    if (CustomRenderer) {\n      return (\n        <CustomRenderer\n          id={props.id}\n          nodeTypeSlug={d.nodeTypeSlug}\n          label={d.label}\n          fields={d.fields}\n          nodeTypeDef={typeDef}\n        />\n      )\n    }\n    if (typeDef) {\n      return <EnhancedDynamicNode data={d} typeDef={typeDef} />\n    }\n    return <DefaultDynamicNode {...props} />\n  }) as NodeTypes[string]\n\n  // Frame node type\n  types.frame = DefaultFrameNode as NodeTypes[string]\n\n  return types\n}\n\n// ── Edge style resolver ──\n\nconst EDGE_TYPE_MAP: Record<string, string> = {\n  step: 'step',\n  smoothstep: 'smoothstep',\n  bezier: 'default',\n  default: 'default',\n}\n\nfunction applyEdgeStyles(\n  edges: FlowEdge[],\n  edgeTypeDefsMap?: Map<string, EdgeTypeDef>,\n): Edge[] {\n  if (!edgeTypeDefsMap?.size) return edges as unknown as Edge[]\n\n  return edges.map((edge) => {\n    const slug = edge.edgeTypeSlug\n    if (!slug) return edge as unknown as Edge\n\n    const def = edgeTypeDefsMap.get(slug)\n    if (!def) return edge as unknown as Edge\n\n    const styled: Edge = { ...(edge as unknown as Edge) }\n\n    // Edge type (line style) — canvas value takes precedence\n    if (!styled.type && def.lineStyle) {\n      styled.type = EDGE_TYPE_MAP[def.lineStyle] ?? 'default'\n    }\n\n    // Visual style — canvas style merged with def as fallback\n    styled.style = {\n      ...(def.color ? { stroke: def.color } : undefined),\n      ...(def.strokeWidth ? { strokeWidth: def.strokeWidth } : undefined),\n      ...edge.style,\n    }\n\n    // Animation — canvas value takes precedence\n    if (styled.animated == null && def.animated) styled.animated = true\n\n    // Markers — canvas value takes precedence over def\n    if (!styled.markerStart) {\n      const startType = toMarkerType(def.markerStart)\n      if (startType) {\n        styled.markerStart = {\n          type: startType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n    if (!styled.markerEnd) {\n      const endType = toMarkerType(def.markerEnd)\n      if (endType) {\n        styled.markerEnd = {\n          type: endType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n\n    return styled\n  })\n}\n\n// ── FlowRenderer ──\n\n/**\n * Renders a Flow canvas in read-only mode.\n *\n * Requires `@xyflow/react` peer dependency and its CSS:\n * ```ts\n * import '@xyflow/react/dist/style.css'\n * ```\n */\nexport interface FlowRendererProps {\n  /** Canvas data from Flow document's `canvas` field */\n  data: CanvasData\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: React.CSSProperties\n  /** Custom renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>\n  /** Node type definitions for enhanced rendering (field-type-aware display) */\n  nodeTypeDefs?: NodeTypeDef[]\n  /** Edge type definitions for styled edges (color, stroke, markers, animation) */\n  edgeTypeDefs?: EdgeTypeDef[]\n  /** Show background pattern (default: true) */\n  background?: boolean\n  /** Allow user interaction - pan, zoom (default: false for read-only display) */\n  interactive?: boolean\n  /** Fit view on mount (default: true) */\n  fitView?: boolean\n  /** Called when a node is clicked */\n  onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void\n  /** Called when an edge is clicked */\n  onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void\n}\n\nexport function FlowRenderer({\n  data,\n  className,\n  style,\n  nodeRenderers,\n  nodeTypeDefs,\n  edgeTypeDefs,\n  background = true,\n  interactive = false,\n  fitView = true,\n  onNodeClick,\n  onEdgeClick,\n}: FlowRendererProps) {\n  const nodeTypeDefsMap = React.useMemo(() => {\n    if (!nodeTypeDefs?.length) return undefined\n    return new Map(nodeTypeDefs.map((d) => [d.slug, d]))\n  }, [nodeTypeDefs])\n\n  const edgeTypeDefsMap = React.useMemo(() => {\n    if (!edgeTypeDefs?.length) return undefined\n    return new Map(edgeTypeDefs.map((d) => [d.slug, d]))\n  }, [edgeTypeDefs])\n\n  const nodeTypes = React.useMemo(\n    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),\n    [nodeRenderers, nodeTypeDefsMap],\n  )\n\n  const styledEdges = React.useMemo(\n    () => applyEdgeStyles(data?.edges ?? [], edgeTypeDefsMap),\n    [data?.edges, edgeTypeDefsMap],\n  )\n\n  if (!data) return null\n\n  const defaultViewport = !fitView && data.viewport ? data.viewport : undefined\n\n  return (\n    <ReactFlowProvider>\n      <div\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      >\n        <ReactFlow\n          nodes={\n            (data.nodes ?? []) as unknown as Parameters<\n              typeof ReactFlow\n            >[0]['nodes']\n          }\n          edges={styledEdges}\n          nodeTypes={nodeTypes}\n          defaultViewport={defaultViewport}\n          fitView={fitView}\n          onNodeClick={\n            onNodeClick as Parameters<typeof ReactFlow>[0]['onNodeClick']\n          }\n          onEdgeClick={\n            onEdgeClick as Parameters<typeof ReactFlow>[0]['onEdgeClick']\n          }\n          nodesDraggable={interactive ? undefined : false}\n          nodesConnectable={false}\n          elementsSelectable={interactive || !!onNodeClick || !!onEdgeClick}\n          panOnDrag={interactive}\n          zoomOnScroll={interactive}\n          zoomOnPinch={interactive}\n          zoomOnDoubleClick={false}\n        >\n          {background && <Background />}\n        </ReactFlow>\n      </div>\n    </ReactFlowProvider>\n  )\n}\n","import type React from 'react'\n\n// ── Dynamic node data ──\n\nexport interface DynamicNodeData {\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n}\n\nexport type FlowNodeData = DynamicNodeData & Record<string, unknown>\n\n// ── Canvas types (mirrors @xyflow/react but standalone) ──\n\nexport interface FlowNodePosition {\n  x: number\n  y: number\n}\n\nexport interface FlowNode {\n  id: string\n  type?: string\n  position: FlowNodePosition\n  data: FlowNodeData\n  style?: React.CSSProperties\n  width?: number\n  height?: number\n  measured?: { width?: number; height?: number }\n  draggable?: boolean\n  selectable?: boolean\n  [key: string]: unknown\n}\n\nexport interface FlowEdge {\n  id: string\n  source: string\n  target: string\n  sourceHandle?: string | null\n  targetHandle?: string | null\n  type?: string\n  style?: React.CSSProperties\n  animated?: boolean\n  markerStart?: unknown\n  markerEnd?: unknown\n  edgeTypeSlug?: string\n  fields?: Record<string, unknown>\n  [key: string]: unknown\n}\n\nexport interface FlowViewport {\n  x: number\n  y: number\n  zoom: number\n}\n\nexport interface CanvasData {\n  nodes: FlowNode[]\n  edges: FlowEdge[]\n  viewport: FlowViewport\n}\n\n// ── Node type definitions (mirrors console's NodeTypeDef) ──\n\nexport interface NodeTypeFieldDef {\n  name: string\n  label: string\n  fieldType:\n    | 'text'\n    | 'textarea'\n    | 'number'\n    | 'url'\n    | 'color'\n    | 'image'\n    | 'select'\n    | 'toggle'\n  options?: { label: string; value: string }[]\n  defaultValue?: string\n  required?: boolean\n}\n\nexport interface NodeTypeDef {\n  slug: string\n  name: string\n  color: string\n  defaultSize: { width: number; height: number }\n  fields: NodeTypeFieldDef[]\n  transparentBackground?: boolean\n}\n\n// ── Edge type definitions (mirrors console's EdgeTypeDef) ──\n\nexport interface EdgeTypeDef {\n  slug: string\n  name: string\n  color: string\n  strokeWidth: number\n  animated: boolean\n  lineStyle: string\n  markerStart: string\n  markerEnd: string\n  fields: NodeTypeFieldDef[]\n}\n\n// ── Type guards ──\n\nexport function isDynamicNode(\n  node: FlowNode,\n): node is FlowNode & { data: DynamicNodeData } {\n  return node.type === 'dynamic'\n}\n\nexport function isFrameNode(\n  node: FlowNode,\n): node is FlowNode & { data: FrameNodeData } {\n  return node.type === 'frame'\n}\n\n// ── Component slot props ──\n\nexport interface DynamicNodeSlotProps {\n  id: string\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n  nodeTypeDef?: NodeTypeDef\n}\n\n// ── Frame node data ──\n\nexport interface FrameNodeData {\n  label: string\n  color?: string\n  padding?: number\n  borderStyle?: 'dashed' | 'solid' | 'none'\n  opacity?: number\n}\n","import type { NodeTypeDef } from './types'\n\nexport const BUILT_IN_NODE_TYPES: NodeTypeDef[] = [\n  {\n    slug: 'text',\n    name: 'Text',\n    color: '#e5e7eb',\n    defaultSize: { width: 200, height: 200 },\n    fields: [{ name: 'body', label: 'Body', fieldType: 'textarea' }],\n  },\n  {\n    slug: 'image',\n    name: 'Image',\n    color: '#e5e7eb',\n    transparentBackground: true,\n    defaultSize: { width: 200, height: 200 },\n    fields: [\n      { name: 'image', label: 'Image', fieldType: 'image' },\n      { name: 'alt', label: 'Alt Text', fieldType: 'text' },\n      { name: 'caption', label: 'Caption', fieldType: 'text' },\n    ],\n  },\n]\n","import type { EdgeTypeDef } from './types'\n\nexport const BUILT_IN_EDGE_TYPES: EdgeTypeDef[] = [\n  {\n    slug: 'default',\n    name: 'Default',\n    color: '',\n    strokeWidth: 2,\n    animated: false,\n    lineStyle: 'default',\n    markerStart: 'none',\n    markerEnd: 'arrow',\n    fields: [],\n  },\n]\n","'use client'\n\nimport { useQuery, type QueryClient } from '@tanstack/react-query'\nimport { useMemo } from 'react'\nimport type { CanvasData, NodeTypeDef, EdgeTypeDef } from './types'\nimport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nimport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\n\n// ── Client interface ──\n// Structurally compatible with both BrowserClient and ServerClient.\n// Lists only the collections useFlow actually queries so the generic\n// `from<T extends PublicCollection>` on the real clients satisfies this.\n\ntype FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFn = (...args: any[]) => any\n\nexport interface SDKClient {\n  from(collection: FlowCollection): {\n    find: AnyFn\n    findById: AnyFn\n  }\n  queryClient: QueryClient\n}\n\n// ── Options & Result ──\n\nexport interface UseFlowOptions {\n  /** SDK client instance (BrowserClient or ServerClient) */\n  client: SDKClient\n  /** Flow slug (URL-friendly identifier) */\n  slug?: string\n  /** Flow document ID (UUID) */\n  id?: string\n  /** Enable/disable data fetching (default: true) */\n  enabled?: boolean\n}\n\nexport interface UseFlowResult {\n  data: CanvasData | undefined\n  nodeTypeDefs: NodeTypeDef[]\n  edgeTypeDefs: EdgeTypeDef[]\n  flow: Record<string, unknown> | undefined\n  isLoading: boolean\n  error: Error | null\n}\n\n// ── Helpers ──\n\nfunction toNodeTypeDef(doc: Record<string, unknown>): NodeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? '#e5e7eb'),\n    defaultSize: (doc.defaultSize as NodeTypeDef['defaultSize']) ?? {\n      width: 200,\n      height: 200,\n    },\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as NodeTypeDef['fields'])\n      : [],\n    transparentBackground: Boolean(doc.transparentBackground),\n  }\n}\n\nfunction toEdgeTypeDef(doc: Record<string, unknown>): EdgeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? ''),\n    strokeWidth: (doc.strokeWidth as number) ?? 2,\n    animated: (doc.animated as boolean) ?? false,\n    lineStyle: String(doc.lineStyle ?? 'default'),\n    markerStart: String(doc.markerStart ?? 'none'),\n    markerEnd: String(doc.markerEnd ?? 'arrow'),\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as EdgeTypeDef['fields'])\n      : [],\n  }\n}\n\n// ── Hook ──\n\nexport function useFlow(options: UseFlowOptions): UseFlowResult {\n  const { client, slug, id, enabled = true } = options\n  const hasIdentifier = !!(slug || id)\n  const identifier = id ?? slug ?? ''\n\n  // Fetch flow document\n  const flowQuery = useQuery<Record<string, unknown>>(\n    {\n      queryKey: ['flows', identifier],\n      queryFn: async () => {\n        if (id) {\n          return client.from('flows').findById(id)\n        }\n        const result = await client.from('flows').find({\n          where: { slug: { equals: slug } },\n          limit: 1,\n        })\n        const doc = result.docs[0]\n        if (!doc) throw new Error(`Flow not found: ${slug}`)\n        return doc\n      },\n      enabled: enabled && hasIdentifier,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom node types\n  const nodeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: ['flow-node-types'],\n      queryFn: async () => {\n        const result = await client.from('flow-node-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom edge types\n  const edgeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: ['flow-edge-types'],\n      queryFn: async () => {\n        const result = await client.from('flow-edge-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Merge built-in + API node types\n  const nodeTypeDefs = useMemo<NodeTypeDef[]>(() => {\n    const apiDefs = (nodeTypesQuery.data ?? []).map(toNodeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_NODE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_NODE_TYPES, ...customDefs]\n  }, [nodeTypesQuery.data])\n\n  // Merge built-in + API edge types\n  const edgeTypeDefs = useMemo<EdgeTypeDef[]>(() => {\n    const apiDefs = (edgeTypesQuery.data ?? []).map(toEdgeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_EDGE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_EDGE_TYPES, ...customDefs]\n  }, [edgeTypesQuery.data])\n\n  const flow = flowQuery.data\n  const canvas = flow?.canvas as CanvasData | undefined\n\n  return {\n    data: canvas,\n    nodeTypeDefs,\n    edgeTypeDefs,\n    flow,\n    isLoading:\n      flowQuery.isLoading ||\n      nodeTypesQuery.isLoading ||\n      edgeTypesQuery.isLoading,\n    error:\n      (flowQuery.error as Error | null) ??\n      (nodeTypesQuery.error as Error | null) ??\n      (edgeTypesQuery.error as Error | null),\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAAkB;AAClB,IAAAA,gBAQO;;;AC8FA,SAAS,cACd,MAC8C;AAC9C,SAAO,KAAK,SAAS;AACvB;AAEO,SAAS,YACd,MAC4C;AAC5C,SAAO,KAAK,SAAS;AACvB;;;ACjHO,IAAM,sBAAqC;AAAA,EAChD;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,IACvC,QAAQ,CAAC,EAAE,MAAM,QAAQ,OAAO,QAAQ,WAAW,WAAW,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,uBAAuB;AAAA,IACvB,aAAa,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,IACvC,QAAQ;AAAA,MACN,EAAE,MAAM,SAAS,OAAO,SAAS,WAAW,QAAQ;AAAA,MACpD,EAAE,MAAM,OAAO,OAAO,YAAY,WAAW,OAAO;AAAA,MACpD,EAAE,MAAM,WAAW,OAAO,WAAW,WAAW,OAAO;AAAA,IACzD;AAAA,EACF;AACF;;;ACpBO,IAAM,sBAAqC;AAAA,EAChD;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,WAAW;AAAA,IACX,QAAQ,CAAC;AAAA,EACX;AACF;;;ACZA,yBAA2C;AAC3C,mBAAwB;AA+CxB,SAAS,cAAc,KAA2C;AAlDlE;AAmDE,SAAO;AAAA,IACL,MAAM,QAAO,SAAI,SAAJ,YAAY,EAAE;AAAA,IAC3B,MAAM,QAAO,SAAI,UAAJ,YAAa,EAAE;AAAA,IAC5B,OAAO,QAAO,SAAI,UAAJ,YAAa,SAAS;AAAA,IACpC,cAAc,SAAI,gBAAJ,YAAkD;AAAA,MAC9D,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ,MAAM,QAAQ,IAAI,MAAM,IAC3B,IAAI,SACL,CAAC;AAAA,IACL,uBAAuB,QAAQ,IAAI,qBAAqB;AAAA,EAC1D;AACF;AAEA,SAAS,cAAc,KAA2C;AAlElE;AAmEE,SAAO;AAAA,IACL,MAAM,QAAO,SAAI,SAAJ,YAAY,EAAE;AAAA,IAC3B,MAAM,QAAO,SAAI,UAAJ,YAAa,EAAE;AAAA,IAC5B,OAAO,QAAO,SAAI,UAAJ,YAAa,EAAE;AAAA,IAC7B,cAAc,SAAI,gBAAJ,YAA8B;AAAA,IAC5C,WAAW,SAAI,aAAJ,YAA4B;AAAA,IACvC,WAAW,QAAO,SAAI,cAAJ,YAAiB,SAAS;AAAA,IAC5C,aAAa,QAAO,SAAI,gBAAJ,YAAmB,MAAM;AAAA,IAC7C,WAAW,QAAO,SAAI,cAAJ,YAAiB,OAAO;AAAA,IAC1C,QAAQ,MAAM,QAAQ,IAAI,MAAM,IAC3B,IAAI,SACL,CAAC;AAAA,EACP;AACF;AAIO,SAAS,QAAQ,SAAwC;AApFhE;AAqFE,QAAM,EAAE,QAAQ,MAAM,IAAI,UAAU,KAAK,IAAI;AAC7C,QAAM,gBAAgB,CAAC,EAAE,QAAQ;AACjC,QAAM,cAAa,uBAAM,SAAN,YAAc;AAGjC,QAAM,gBAAY;AAAA,IAChB;AAAA,MACE,UAAU,CAAC,SAAS,UAAU;AAAA,MAC9B,SAAS,MAAY;AACnB,YAAI,IAAI;AACN,iBAAO,OAAO,KAAK,OAAO,EAAE,SAAS,EAAE;AAAA,QACzC;AACA,cAAM,SAAS,MAAM,OAAO,KAAK,OAAO,EAAE,KAAK;AAAA,UAC7C,OAAO,EAAE,MAAM,EAAE,QAAQ,KAAK,EAAE;AAAA,UAChC,OAAO;AAAA,QACT,CAAC;AACD,cAAM,MAAM,OAAO,KAAK,CAAC;AACzB,YAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mBAAmB,IAAI,EAAE;AACnD,eAAO;AAAA,MACT;AAAA,MACA,SAAS,WAAW;AAAA,IACtB;AAAA,IACA,OAAO;AAAA,EACT;AAGA,QAAM,qBAAiB;AAAA,IACrB;AAAA,MACE,UAAU,CAAC,iBAAiB;AAAA,MAC5B,SAAS,MAAY;AACnB,cAAM,SAAS,MAAM,OAAO,KAAK,iBAAiB,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC;AACvE,eAAO,OAAO;AAAA,MAChB;AAAA,MACA;AAAA,IACF;AAAA,IACA,OAAO;AAAA,EACT;AAGA,QAAM,qBAAiB;AAAA,IACrB;AAAA,MACE,UAAU,CAAC,iBAAiB;AAAA,MAC5B,SAAS,MAAY;AACnB,cAAM,SAAS,MAAM,OAAO,KAAK,iBAAiB,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC;AACvE,eAAO,OAAO;AAAA,MAChB;AAAA,MACA;AAAA,IACF;AAAA,IACA,OAAO;AAAA,EACT;AAGA,QAAM,mBAAe,sBAAuB,MAAM;AAzIpD,QAAAC;AA0II,UAAM,YAAWA,MAAA,eAAe,SAAf,OAAAA,MAAuB,CAAC,GAAG,IAAI,aAAa;AAC7D,UAAM,eAAe,IAAI,IAAI,oBAAoB,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACnE,UAAM,aAAa,QAAQ,OAAO,CAAC,MAAM,CAAC,aAAa,IAAI,EAAE,IAAI,CAAC;AAClE,WAAO,CAAC,GAAG,qBAAqB,GAAG,UAAU;AAAA,EAC/C,GAAG,CAAC,eAAe,IAAI,CAAC;AAGxB,QAAM,mBAAe,sBAAuB,MAAM;AAjJpD,QAAAA;AAkJI,UAAM,YAAWA,MAAA,eAAe,SAAf,OAAAA,MAAuB,CAAC,GAAG,IAAI,aAAa;AAC7D,UAAM,eAAe,IAAI,IAAI,oBAAoB,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACnE,UAAM,aAAa,QAAQ,OAAO,CAAC,MAAM,CAAC,aAAa,IAAI,EAAE,IAAI,CAAC;AAClE,WAAO,CAAC,GAAG,qBAAqB,GAAG,UAAU;AAAA,EAC/C,GAAG,CAAC,eAAe,IAAI,CAAC;AAExB,QAAM,OAAO,UAAU;AACvB,QAAM,SAAS,6BAAM;AAErB,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,WACE,UAAU,aACV,eAAe,aACf,eAAe;AAAA,IACjB,QACG,qBAAU,UAAV,YACA,eAAe,UADf,YAEA,eAAe;AAAA,EACpB;AACF;;;AJ3HA,SAAS,YAAY,KAA6C;AAChE,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI;AACF,UAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,QAAI,OAAO,aAAa,WAAW,OAAO,aAAa,SAAU,QAAO;AACxE,WAAO;AAAA,EACT,SAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,aAAa,OAAuC;AAC3D,MAAI,UAAU,QAAS,QAAO,yBAAW;AACzC,MAAI,UAAU,cAAe,QAAO,yBAAW;AAC/C,SAAO;AACT;AAIA,SAAS,iBACP,KACA,KACA,UACiB;AACjB,MAAI,OAAO,QAAQ,QAAQ,GAAI,QAAO;AAEtC,QAAM,YAAY,qCAAU;AAG5B,MACE,cAAc,WACb,OAAO,QAAQ,YAAY,QAAQ,QAAQ,SAAS,KACrD;AACA,UAAM,SACJ,OAAO,QAAQ,WAAW,MAAO,2BAA0B;AAC7D,UAAM,UAAU,YAAY,MAAM;AAClC,QAAI,CAAC,QAAS,QAAO;AACrB,WACE,8BAAAC,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,KAAI;AAAA,QACJ,WAAW;AAAA,QACX,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,QAAQ,WAAW,UAAU;AAAA;AAAA,IACtE;AAAA,EAEJ;AAGA,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA;AAAA,IAEC,OAAO,GAAG;AAAA,EACb;AAEJ;AAIA,SAAS,mBAAmB,EAAE,KAAK,GAAc;AAC/C,QAAM,IAAI;AACV,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA;AAAA,IAEC,EAAE,UACD,OAAO,QAAQ,EAAE,MAAM,EACpB,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,KAAK,QAAQ,MAAM,EAAE,EACvC,IAAI,CAAC,CAAC,KAAK,GAAG,MAAM,iBAAiB,KAAK,GAAG,CAAC;AAAA,EACrD;AAEJ;AAIA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AACF,GAGG;AACD,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,MACjB;AAAA;AAAA,IAEC,QAAQ,OAAO,IAAI,CAAC,MAAM;AACzB,YAAM,MAAM,KAAK,OAAO,EAAE,IAAI;AAC9B,UAAI,OAAO,QAAQ,QAAQ,GAAI,QAAO;AACtC,aAAO,iBAAiB,EAAE,MAAM,KAAK,CAAC;AAAA,IACxC,CAAC;AAAA,EACH;AAEJ;AAIA,SAAS,iBAAiB,EAAE,KAAK,GAAc;AAjK/C;AAkKE,QAAM,IAAI;AACV,QAAM,aAAY,OAAE,UAAF,YAAW;AAC7B,QAAM,WAAU,OAAE,YAAF,YAAa;AAC7B,QAAM,eAAc,OAAE,gBAAF,YAAiB;AACrC,QAAM,WAAU,OAAE,YAAF,YAAa;AAG7B,QAAM,WAAW,MAAM;AACrB,UAAM,IAAI,UAAU,MAAM,gCAAgC;AAC1D,QAAI,EAAG,QAAO,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,OAAO;AACrD,WAAO;AAAA,EACT,GAAG;AAEH,SACE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QACE,gBAAgB,SACZ,SACA,OAAO,WAAW;AAAA,MAC1B;AAAA;AAAA,IAEA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,YAAY;AAAA,QACd;AAAA;AAAA,MAEC,EAAE;AAAA,IACL;AAAA,EACF;AAEJ;AAIA,SAAS,gBACP,eACA,iBACW;AACX,QAAM,QAAmB,CAAC;AAG1B,QAAM,WAAW,CAAC,UAAqB;AACrC,UAAM,IAAI,MAAM;AAChB,UAAM,UAAU,mDAAiB,IAAI,EAAE;AACvC,UAAM,iBAAiB,+CAAgB,EAAE;AACzC,QAAI,gBAAgB;AAClB,aACE,8BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,MAAM;AAAA,UACV,cAAc,EAAE;AAAA,UAChB,OAAO,EAAE;AAAA,UACT,QAAQ,EAAE;AAAA,UACV,aAAa;AAAA;AAAA,MACf;AAAA,IAEJ;AACA,QAAI,SAAS;AACX,aAAO,8BAAAA,QAAA,cAAC,uBAAoB,MAAM,GAAG,SAAkB;AAAA,IACzD;AACA,WAAO,8BAAAA,QAAA,cAAC,uCAAuB,MAAO;AAAA,EACxC;AAGA,QAAM,QAAQ;AAEd,SAAO;AACT;AAIA,IAAM,gBAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,SAAS,gBACP,OACA,iBACQ;AACR,MAAI,EAAC,mDAAiB,MAAM,QAAO;AAEnC,SAAO,MAAM,IAAI,CAAC,SAAS;AA7P7B;AA8PI,UAAM,OAAO,KAAK;AAClB,QAAI,CAAC,KAAM,QAAO;AAElB,UAAM,MAAM,gBAAgB,IAAI,IAAI;AACpC,QAAI,CAAC,IAAK,QAAO;AAEjB,UAAM,SAAe,mBAAM;AAG3B,QAAI,CAAC,OAAO,QAAQ,IAAI,WAAW;AACjC,aAAO,QAAO,mBAAc,IAAI,SAAS,MAA3B,YAAgC;AAAA,IAChD;AAGA,WAAO,QAAQ,iDACT,IAAI,QAAQ,EAAE,QAAQ,IAAI,MAAM,IAAI,SACpC,IAAI,cAAc,EAAE,aAAa,IAAI,YAAY,IAAI,SACtD,KAAK;AAIV,QAAI,OAAO,YAAY,QAAQ,IAAI,SAAU,QAAO,WAAW;AAG/D,QAAI,CAAC,OAAO,aAAa;AACvB,YAAM,YAAY,aAAa,IAAI,WAAW;AAC9C,UAAI,WAAW;AACb,eAAO,cAAc;AAAA,UACnB,MAAM;AAAA,WACF,IAAI,QAAQ,EAAE,OAAO,IAAI,MAAM,IAAI;AAAA,MAE3C;AAAA,IACF;AACA,QAAI,CAAC,OAAO,WAAW;AACrB,YAAM,UAAU,aAAa,IAAI,SAAS;AAC1C,UAAI,SAAS;AACX,eAAO,YAAY;AAAA,UACjB,MAAM;AAAA,WACF,IAAI,QAAQ,EAAE,OAAO,IAAI,MAAM,IAAI;AAAA,MAE3C;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AACH;AAqCO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAAsB;AA5VtB;AA6VE,QAAM,kBAAkB,cAAAA,QAAM,QAAQ,MAAM;AAC1C,QAAI,EAAC,6CAAc,QAAQ,QAAO;AAClC,WAAO,IAAI,IAAI,aAAa,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAAA,EACrD,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,kBAAkB,cAAAA,QAAM,QAAQ,MAAM;AAC1C,QAAI,EAAC,6CAAc,QAAQ,QAAO;AAClC,WAAO,IAAI,IAAI,aAAa,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAAA,EACrD,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,YAAY,cAAAA,QAAM;AAAA,IACtB,MAAM,gBAAgB,eAAe,eAAe;AAAA,IACpD,CAAC,eAAe,eAAe;AAAA,EACjC;AAEA,QAAM,cAAc,cAAAA,QAAM;AAAA,IACxB,MAAG;AA7WP,UAAAC;AA6WU,8BAAgBA,MAAA,6BAAM,UAAN,OAAAA,MAAe,CAAC,GAAG,eAAe;AAAA;AAAA,IACxD,CAAC,6BAAM,OAAO,eAAe;AAAA,EAC/B;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,kBAAkB,CAAC,WAAW,KAAK,WAAW,KAAK,WAAW;AAEpE,SACE,8BAAAD,QAAA,cAAC,uCACC,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,iBAAE,OAAO,QAAQ,QAAQ,UAAW;AAAA;AAAA,IAE3C,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,QACG,UAAK,UAAL,YAAc,CAAC;AAAA,QAIlB,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAGA;AAAA,QAGA,gBAAgB,cAAc,SAAY;AAAA,QAC1C,kBAAkB;AAAA,QAClB,oBAAoB,eAAe,CAAC,CAAC,eAAe,CAAC,CAAC;AAAA,QACtD,WAAW;AAAA,QACX,cAAc;AAAA,QACd,aAAa;AAAA,QACb,mBAAmB;AAAA;AAAA,MAElB,cAAc,8BAAAA,QAAA,cAAC,8BAAW;AAAA,IAC7B;AAAA,EACF,CACF;AAEJ;","names":["import_react","_a","React","_a"]}
+{"version":3,"sources":["../../src/ui/Flow/index.tsx","../../src/ui/Flow/types.ts","../../src/ui/Flow/built-in-node-types.ts","../../src/ui/Flow/built-in-edge-types.ts","../../src/ui/Flow/useFlow.ts","../../src/core/query/query-keys.ts"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport {\n  ReactFlow,\n  ReactFlowProvider,\n  Background,\n  MarkerType,\n  type NodeTypes,\n  type NodeProps,\n  type Edge,\n} from '@xyflow/react'\nimport type {\n  CanvasData,\n  DynamicNodeData,\n  DynamicNodeSlotProps,\n  EdgeTypeDef,\n  FlowEdge,\n  FlowNode,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n} from './types'\n\nexport type {\n  CanvasData,\n  DynamicNodeSlotProps,\n  FlowNode,\n  FlowEdge,\n  FlowViewport,\n  FlowNodePosition,\n  FlowNodeData,\n  DynamicNodeData,\n  FrameNodeData,\n  NodeTypeDef,\n  NodeTypeFieldDef,\n  EdgeTypeDef,\n} from './types'\nexport { isDynamicNode, isFrameNode } from './types'\nexport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nexport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\nexport { useFlow } from './useFlow'\nexport type { SDKClient, UseFlowOptions, UseFlowResult } from './useFlow'\n\n// ── Helpers ──\n\nfunction sanitizeUrl(url: string | undefined): string | undefined {\n  if (!url) return url\n  try {\n    const parsed = new URL(url)\n    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return url\n    return undefined\n  } catch {\n    return undefined\n  }\n}\n\nfunction toMarkerType(value: string): MarkerType | undefined {\n  if (value === 'arrow') return MarkerType.Arrow\n  if (value === 'arrowclosed') return MarkerType.ArrowClosed\n  return undefined\n}\n\n// ── Field renderer (type-aware, matching console style) ──\n\nfunction renderFieldValue(\n  key: string,\n  val: unknown,\n  fieldDef?: NodeTypeFieldDef,\n): React.ReactNode {\n  if (val == null || val === '') return null\n\n  const fieldType = fieldDef?.fieldType\n\n  // Image field — image only, no decoration\n  if (\n    fieldType === 'image' ||\n    (typeof val === 'object' && val !== null && 'url' in val)\n  ) {\n    const imgUrl =\n      typeof val === 'string' ? val : (val as { url?: string })?.url\n    const safeUrl = sanitizeUrl(imgUrl)\n    if (!safeUrl) return null\n    return (\n      <img\n        key={key}\n        src={safeUrl}\n        alt=\"\"\n        draggable={false}\n        style={{ flex: 1, minHeight: 0, width: '100%', objectFit: 'contain' }}\n      />\n    )\n  }\n\n  // All other fields — text only\n  return (\n    <div\n      key={key}\n      style={{\n        fontSize: 11,\n        whiteSpace: 'pre-wrap',\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        flexShrink: 0,\n      }}\n    >\n      {String(val)}\n    </div>\n  )\n}\n\n// ── Default dynamic node renderer (no typeDef) ──\n\nfunction DefaultDynamicNode({ data }: NodeProps) {\n  const d = data as unknown as DynamicNodeData\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {d.fields &&\n        Object.entries(d.fields)\n          .filter(([, v]) => v != null && v !== '')\n          .map(([key, val]) => renderFieldValue(key, val))}\n    </div>\n  )\n}\n\n// ── Enhanced dynamic node renderer (with NodeTypeDef) ──\n\nfunction EnhancedDynamicNode({\n  data,\n  typeDef,\n}: {\n  data: DynamicNodeData\n  typeDef: NodeTypeDef\n}) {\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      {typeDef.fields.map((f) => {\n        const val = data.fields[f.name]\n        if (val == null || val === '') return null\n        return renderFieldValue(f.name, val, f)\n      })}\n    </div>\n  )\n}\n\n// ── Default frame node renderer ──\n\nfunction DefaultFrameNode({ data }: NodeProps) {\n  const d = data as unknown as FrameNodeData\n  const baseColor = d.color ?? 'rgba(128,128,128,0.15)'\n  const padding = d.padding ?? 20\n  const borderStyle = d.borderStyle ?? 'dashed'\n  const opacity = d.opacity ?? 0.15\n\n  // Apply opacity to rgba colors\n  const bgColor = (() => {\n    const m = baseColor.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/)\n    if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`\n    return baseColor\n  })()\n\n  return (\n    <div\n      style={{\n        backgroundColor: bgColor,\n        padding,\n        width: '100%',\n        height: '100%',\n        border:\n          borderStyle === 'none'\n            ? 'none'\n            : `2px ${borderStyle} rgba(128,128,128,0.3)`,\n      }}\n    >\n      <div\n        style={{\n          fontSize: 11,\n          fontWeight: 600,\n          color: 'rgba(128,128,128,0.6)',\n          userSelect: 'none',\n        }}\n      >\n        {d.label}\n      </div>\n    </div>\n  )\n}\n\n// ── Node types builder ──\n\nfunction createNodeTypes(\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>,\n  nodeTypeDefsMap?: Map<string, NodeTypeDef>,\n): NodeTypes {\n  const types: NodeTypes = {} as NodeTypes\n\n  // Dynamic node type\n  types.dynamic = ((props: NodeProps) => {\n    const d = props.data as unknown as DynamicNodeData\n    const typeDef = nodeTypeDefsMap?.get(d.nodeTypeSlug)\n    const CustomRenderer = nodeRenderers?.[d.nodeTypeSlug]\n    if (CustomRenderer) {\n      return (\n        <CustomRenderer\n          id={props.id}\n          nodeTypeSlug={d.nodeTypeSlug}\n          label={d.label}\n          fields={d.fields}\n          nodeTypeDef={typeDef}\n        />\n      )\n    }\n    if (typeDef) {\n      return <EnhancedDynamicNode data={d} typeDef={typeDef} />\n    }\n    return <DefaultDynamicNode {...props} />\n  }) as NodeTypes[string]\n\n  // Frame node type\n  types.frame = DefaultFrameNode as NodeTypes[string]\n\n  return types\n}\n\n// ── Edge style resolver ──\n\nconst EDGE_TYPE_MAP: Record<string, string> = {\n  step: 'step',\n  smoothstep: 'smoothstep',\n  bezier: 'default',\n  default: 'default',\n}\n\nfunction applyEdgeStyles(\n  edges: FlowEdge[],\n  edgeTypeDefsMap?: Map<string, EdgeTypeDef>,\n): Edge[] {\n  if (!edgeTypeDefsMap?.size) return edges as unknown as Edge[]\n\n  return edges.map((edge) => {\n    const slug = edge.edgeTypeSlug\n    if (!slug) return edge as unknown as Edge\n\n    const def = edgeTypeDefsMap.get(slug)\n    if (!def) return edge as unknown as Edge\n\n    const styled: Edge = { ...(edge as unknown as Edge) }\n\n    // Edge type (line style) — canvas value takes precedence\n    if (!styled.type && def.lineStyle) {\n      styled.type = EDGE_TYPE_MAP[def.lineStyle] ?? 'default'\n    }\n\n    // Visual style — canvas style merged with def as fallback\n    styled.style = {\n      ...(def.color ? { stroke: def.color } : undefined),\n      ...(def.strokeWidth ? { strokeWidth: def.strokeWidth } : undefined),\n      ...edge.style,\n    }\n\n    // Animation — canvas value takes precedence\n    if (styled.animated == null && def.animated) styled.animated = true\n\n    // Markers — canvas value takes precedence over def\n    if (!styled.markerStart) {\n      const startType = toMarkerType(def.markerStart)\n      if (startType) {\n        styled.markerStart = {\n          type: startType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n    if (!styled.markerEnd) {\n      const endType = toMarkerType(def.markerEnd)\n      if (endType) {\n        styled.markerEnd = {\n          type: endType,\n          ...(def.color ? { color: def.color } : undefined),\n        }\n      }\n    }\n\n    return styled\n  })\n}\n\n// ── FlowRenderer ──\n\n/**\n * Renders a Flow canvas in read-only mode.\n *\n * Requires `@xyflow/react` peer dependency and its CSS:\n * ```ts\n * import '@xyflow/react/dist/style.css'\n * ```\n */\nexport interface FlowRendererProps {\n  /** Canvas data from Flow document's `canvas` field */\n  data: CanvasData\n  /** Container className */\n  className?: string\n  /** Container style */\n  style?: React.CSSProperties\n  /** Custom renderers by node type slug (e.g., `{ 'product-card': MyProductCard }`) */\n  nodeRenderers?: Record<string, React.ComponentType<DynamicNodeSlotProps>>\n  /** Node type definitions for enhanced rendering (field-type-aware display) */\n  nodeTypeDefs?: NodeTypeDef[]\n  /** Edge type definitions for styled edges (color, stroke, markers, animation) */\n  edgeTypeDefs?: EdgeTypeDef[]\n  /** Show background pattern (default: true) */\n  background?: boolean\n  /** Allow user interaction - pan, zoom (default: false for read-only display) */\n  interactive?: boolean\n  /** Fit view on mount (default: true) */\n  fitView?: boolean\n  /** Called when a node is clicked */\n  onNodeClick?: (event: React.MouseEvent, node: FlowNode) => void\n  /** Called when an edge is clicked */\n  onEdgeClick?: (event: React.MouseEvent, edge: FlowEdge) => void\n}\n\nexport function FlowRenderer({\n  data,\n  className,\n  style,\n  nodeRenderers,\n  nodeTypeDefs,\n  edgeTypeDefs,\n  background = true,\n  interactive = false,\n  fitView = true,\n  onNodeClick,\n  onEdgeClick,\n}: FlowRendererProps) {\n  const nodeTypeDefsMap = React.useMemo(() => {\n    if (!nodeTypeDefs?.length) return undefined\n    return new Map(nodeTypeDefs.map((d) => [d.slug, d]))\n  }, [nodeTypeDefs])\n\n  const edgeTypeDefsMap = React.useMemo(() => {\n    if (!edgeTypeDefs?.length) return undefined\n    return new Map(edgeTypeDefs.map((d) => [d.slug, d]))\n  }, [edgeTypeDefs])\n\n  const nodeTypes = React.useMemo(\n    () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),\n    [nodeRenderers, nodeTypeDefsMap],\n  )\n\n  const styledEdges = React.useMemo(\n    () => applyEdgeStyles(data?.edges ?? [], edgeTypeDefsMap),\n    [data?.edges, edgeTypeDefsMap],\n  )\n\n  if (!data) return null\n\n  const defaultViewport = !fitView && data.viewport ? data.viewport : undefined\n\n  return (\n    <ReactFlowProvider>\n      <div\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      >\n        <ReactFlow\n          nodes={\n            (data.nodes ?? []) as unknown as Parameters<\n              typeof ReactFlow\n            >[0]['nodes']\n          }\n          edges={styledEdges}\n          nodeTypes={nodeTypes}\n          defaultViewport={defaultViewport}\n          fitView={fitView}\n          onNodeClick={\n            onNodeClick as Parameters<typeof ReactFlow>[0]['onNodeClick']\n          }\n          onEdgeClick={\n            onEdgeClick as Parameters<typeof ReactFlow>[0]['onEdgeClick']\n          }\n          nodesDraggable={interactive ? undefined : false}\n          nodesConnectable={false}\n          elementsSelectable={interactive || !!onNodeClick || !!onEdgeClick}\n          panOnDrag={interactive}\n          zoomOnScroll={interactive}\n          zoomOnPinch={interactive}\n          zoomOnDoubleClick={false}\n        >\n          {background && <Background />}\n        </ReactFlow>\n      </div>\n    </ReactFlowProvider>\n  )\n}\n","import type React from 'react'\n\n// ── Dynamic node data ──\n\nexport interface DynamicNodeData {\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n}\n\nexport type FlowNodeData = DynamicNodeData & Record<string, unknown>\n\n// ── Canvas types (mirrors @xyflow/react but standalone) ──\n\nexport interface FlowNodePosition {\n  x: number\n  y: number\n}\n\nexport interface FlowNode {\n  id: string\n  type?: string\n  position: FlowNodePosition\n  data: FlowNodeData\n  style?: React.CSSProperties\n  width?: number\n  height?: number\n  measured?: { width?: number; height?: number }\n  draggable?: boolean\n  selectable?: boolean\n  [key: string]: unknown\n}\n\nexport interface FlowEdge {\n  id: string\n  source: string\n  target: string\n  sourceHandle?: string | null\n  targetHandle?: string | null\n  type?: string\n  style?: React.CSSProperties\n  animated?: boolean\n  markerStart?: unknown\n  markerEnd?: unknown\n  edgeTypeSlug?: string\n  fields?: Record<string, unknown>\n  [key: string]: unknown\n}\n\nexport interface FlowViewport {\n  x: number\n  y: number\n  zoom: number\n}\n\nexport interface CanvasData {\n  nodes: FlowNode[]\n  edges: FlowEdge[]\n  viewport: FlowViewport\n}\n\n// ── Node type definitions (mirrors console's NodeTypeDef) ──\n\nexport interface NodeTypeFieldDef {\n  name: string\n  label: string\n  fieldType:\n    | 'text'\n    | 'textarea'\n    | 'number'\n    | 'url'\n    | 'color'\n    | 'image'\n    | 'select'\n    | 'toggle'\n  options?: { label: string; value: string }[]\n  defaultValue?: string\n  required?: boolean\n}\n\nexport interface NodeTypeDef {\n  slug: string\n  name: string\n  color: string\n  defaultSize: { width: number; height: number }\n  fields: NodeTypeFieldDef[]\n  transparentBackground?: boolean\n}\n\n// ── Edge type definitions (mirrors console's EdgeTypeDef) ──\n\nexport interface EdgeTypeDef {\n  slug: string\n  name: string\n  color: string\n  strokeWidth: number\n  animated: boolean\n  lineStyle: string\n  markerStart: string\n  markerEnd: string\n  fields: NodeTypeFieldDef[]\n}\n\n// ── Type guards ──\n\nexport function isDynamicNode(\n  node: FlowNode,\n): node is FlowNode & { data: DynamicNodeData } {\n  return node.type === 'dynamic'\n}\n\nexport function isFrameNode(\n  node: FlowNode,\n): node is FlowNode & { data: FrameNodeData } {\n  return node.type === 'frame'\n}\n\n// ── Component slot props ──\n\nexport interface DynamicNodeSlotProps {\n  id: string\n  nodeTypeSlug: string\n  label: string\n  fields: Record<string, unknown>\n  nodeTypeDef?: NodeTypeDef\n}\n\n// ── Frame node data ──\n\nexport interface FrameNodeData {\n  label: string\n  color?: string\n  padding?: number\n  borderStyle?: 'dashed' | 'solid' | 'none'\n  opacity?: number\n}\n","import type { NodeTypeDef } from './types'\n\nexport const BUILT_IN_NODE_TYPES: NodeTypeDef[] = [\n  {\n    slug: 'text',\n    name: 'Text',\n    color: '#e5e7eb',\n    defaultSize: { width: 200, height: 200 },\n    fields: [{ name: 'body', label: 'Body', fieldType: 'textarea' }],\n  },\n  {\n    slug: 'image',\n    name: 'Image',\n    color: '#e5e7eb',\n    transparentBackground: true,\n    defaultSize: { width: 200, height: 200 },\n    fields: [\n      { name: 'image', label: 'Image', fieldType: 'image' },\n      { name: 'alt', label: 'Alt Text', fieldType: 'text' },\n      { name: 'caption', label: 'Caption', fieldType: 'text' },\n    ],\n  },\n]\n","import type { EdgeTypeDef } from './types'\n\nexport const BUILT_IN_EDGE_TYPES: EdgeTypeDef[] = [\n  {\n    slug: 'default',\n    name: 'Default',\n    color: '',\n    strokeWidth: 2,\n    animated: false,\n    lineStyle: 'default',\n    markerStart: 'none',\n    markerEnd: 'arrow',\n    fields: [],\n  },\n]\n","'use client'\n\nimport { useQuery, type QueryClient } from '@tanstack/react-query'\nimport { useMemo } from 'react'\nimport type { CanvasData, NodeTypeDef, EdgeTypeDef } from './types'\nimport { BUILT_IN_NODE_TYPES } from './built-in-node-types'\nimport { BUILT_IN_EDGE_TYPES } from './built-in-edge-types'\nimport { collectionKeys } from '../../core/query/query-keys'\n\n// ── Client interface ──\n// Structurally compatible with both BrowserClient and ServerClient.\n// Lists only the collections useFlow actually queries so the generic\n// `from<T extends PublicCollection>` on the real clients satisfies this.\n\ntype FlowCollection = 'flows' | 'flow-node-types' | 'flow-edge-types'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFn = (...args: any[]) => any\n\nexport interface SDKClient {\n  from(collection: FlowCollection): {\n    find: AnyFn\n    findById: AnyFn\n  }\n  queryClient: QueryClient\n}\n\n// ── Options & Result ──\n\nexport interface UseFlowOptions {\n  /** SDK client instance (BrowserClient or ServerClient) */\n  client: SDKClient\n  /** Flow slug (URL-friendly identifier) */\n  slug?: string\n  /** Flow document ID (UUID) */\n  id?: string\n  /** Enable/disable data fetching (default: true) */\n  enabled?: boolean\n}\n\nexport interface UseFlowResult {\n  data: CanvasData | undefined\n  nodeTypeDefs: NodeTypeDef[]\n  edgeTypeDefs: EdgeTypeDef[]\n  flow: Record<string, unknown> | undefined\n  isLoading: boolean\n  error: Error | null\n}\n\n// ── Helpers ──\n\nfunction toNodeTypeDef(doc: Record<string, unknown>): NodeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? '#e5e7eb'),\n    defaultSize: (doc.defaultSize as NodeTypeDef['defaultSize']) ?? {\n      width: 200,\n      height: 200,\n    },\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as NodeTypeDef['fields'])\n      : [],\n    transparentBackground: Boolean(doc.transparentBackground),\n  }\n}\n\nfunction toEdgeTypeDef(doc: Record<string, unknown>): EdgeTypeDef {\n  return {\n    slug: String(doc.slug ?? ''),\n    name: String(doc.title ?? ''),\n    color: String(doc.color ?? ''),\n    strokeWidth: (doc.strokeWidth as number) ?? 2,\n    animated: (doc.animated as boolean) ?? false,\n    lineStyle: String(doc.lineStyle ?? 'default'),\n    markerStart: String(doc.markerStart ?? 'none'),\n    markerEnd: String(doc.markerEnd ?? 'arrow'),\n    fields: Array.isArray(doc.fields)\n      ? (doc.fields as EdgeTypeDef['fields'])\n      : [],\n  }\n}\n\n// ── Hook ──\n\nexport function useFlow(options: UseFlowOptions): UseFlowResult {\n  const { client, slug, id, enabled = true } = options\n  const hasIdentifier = !!(slug || id)\n  const identifier = id ?? slug ?? ''\n\n  // Fetch flow document\n  const flowQuery = useQuery<Record<string, unknown>>(\n    {\n      queryKey: collectionKeys('flows').detail(identifier),\n      queryFn: async () => {\n        if (id) {\n          return client.from('flows').findById(id)\n        }\n        const result = await client.from('flows').find({\n          where: { slug: { equals: slug } },\n          limit: 1,\n        })\n        const doc = result.docs[0]\n        if (!doc) throw new Error(`Flow not found: ${slug}`)\n        return doc\n      },\n      enabled: enabled && hasIdentifier,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom node types\n  const nodeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: collectionKeys('flow-node-types').lists(),\n      queryFn: async () => {\n        const result = await client.from('flow-node-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Fetch tenant's custom edge types\n  const edgeTypesQuery = useQuery<Record<string, unknown>[]>(\n    {\n      queryKey: collectionKeys('flow-edge-types').lists(),\n      queryFn: async () => {\n        const result = await client.from('flow-edge-types').find({ limit: 100 })\n        return result.docs\n      },\n      enabled,\n    },\n    client.queryClient,\n  )\n\n  // Merge built-in + API node types\n  const nodeTypeDefs = useMemo<NodeTypeDef[]>(() => {\n    const apiDefs = (nodeTypesQuery.data ?? []).map(toNodeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_NODE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_NODE_TYPES, ...customDefs]\n  }, [nodeTypesQuery.data])\n\n  // Merge built-in + API edge types\n  const edgeTypeDefs = useMemo<EdgeTypeDef[]>(() => {\n    const apiDefs = (edgeTypesQuery.data ?? []).map(toEdgeTypeDef)\n    const builtInSlugs = new Set(BUILT_IN_EDGE_TYPES.map((t) => t.slug))\n    const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug))\n    return [...BUILT_IN_EDGE_TYPES, ...customDefs]\n  }, [edgeTypesQuery.data])\n\n  const flow = flowQuery.data\n  const canvas = flow?.canvas as CanvasData | undefined\n\n  return {\n    data: canvas,\n    nodeTypeDefs,\n    edgeTypeDefs,\n    flow,\n    isLoading:\n      flowQuery.isLoading ||\n      nodeTypesQuery.isLoading ||\n      edgeTypesQuery.isLoading,\n    error:\n      (flowQuery.error as Error | null) ??\n      (nodeTypesQuery.error as Error | null) ??\n      (edgeTypesQuery.error as Error | null),\n  }\n}\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":["import_react","_a","React","_a"]}