@01.software/sdk 0.2.9-dev.260310.cf511cb → 0.2.9-dev.260311.926a6d4

package/dist/components/code-block.js

@@ -0,0 +1,152 @@
+"use client";
+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/components/CodeBlock/index.tsx
+import React, { useEffect, useState } from "react";
+
+// src/components/CodeBlock/highlight.ts
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { codeToHast } from "shiki";
+var LANGUAGE_ALIASES = {
+  js: "javascript",
+  ts: "typescript",
+  sh: "bash",
+  shell: "bash",
+  yml: "yaml",
+  py: "python",
+  rb: "ruby",
+  plaintext: "text"
+};
+function normalizeLanguage(lang) {
+  return LANGUAGE_ALIASES[lang] || lang;
+}
+function highlight(code, lang, theme = "github-dark") {
+  return __async(this, null, function* () {
+    const normalized = normalizeLanguage(lang);
+    try {
+      const hast = yield codeToHast(code, {
+        lang: normalized,
+        theme
+      });
+      return toJsxRuntime(hast, { Fragment, jsx, jsxs });
+    } catch (e) {
+      const hast = yield codeToHast(code, { lang: "text", theme });
+      return toJsxRuntime(hast, { Fragment, jsx, jsxs });
+    }
+  });
+}
+
+// src/components/CodeBlock/index.tsx
+function CodeBlock({
+  code,
+  language = "typescript",
+  theme = "github-dark",
+  className,
+  initial,
+  showLineNumbers = false,
+  showCopyButton = true
+}) {
+  const [nodes, setNodes] = useState(initial);
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    void highlight(code, language, theme).then((el) => {
+      if (!cancelled) setNodes(el);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language, theme]);
+  const handleCopy = () => {
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }, () => {
+    });
+  };
+  return /* @__PURE__ */ React.createElement("div", { className, style: { position: "relative" } }, showCopyButton && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": "Copy code",
+      style: {
+        position: "absolute",
+        top: 8,
+        right: 8,
+        zIndex: 1,
+        padding: "4px 8px",
+        fontSize: 12,
+        lineHeight: 1,
+        border: "1px solid rgba(255,255,255,0.2)",
+        borderRadius: 4,
+        background: "rgba(0,0,0,0.3)",
+        color: "#ccc",
+        cursor: "pointer",
+        opacity: 0.7,
+        transition: "opacity 0.15s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.opacity = "1";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.opacity = "0.7";
+      }
+    },
+    copied ? "Copied!" : "Copy"
+  ), showLineNumbers && nodes ? /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        padding: "1em 0.5em 1em 1em",
+        textAlign: "right",
+        userSelect: "none",
+        color: "rgba(255,255,255,0.3)",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    code.split("\n").map((_, i) => /* @__PURE__ */ React.createElement("div", { key: i }, i + 1))
+  ), /* @__PURE__ */ React.createElement("div", { style: { flex: 1, overflow: "auto" } }, nodes)) : nodes != null ? nodes : /* @__PURE__ */ React.createElement(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        padding: "1em",
+        overflow: "auto",
+        fontFamily: "monospace",
+        fontSize: 13,
+        lineHeight: 1.5
+      }
+    },
+    /* @__PURE__ */ React.createElement("code", null, code)
+  ));
+}
+export {
+  CodeBlock,
+  highlight
+};
+//# sourceMappingURL=code-block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CodeBlock/index.tsx","../../src/components/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      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\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":";;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,SAAS,WAAW,gBAA0B;;;ACDrD,SAAS,gBAAgB;AACzB,SAAS,KAAK,YAAY;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,kBAA2D;AAKpE,IAAM,mBAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AACb;AAEA,SAAS,kBAAkB,MAAsB;AAC/C,SAAO,iBAAiB,IAAI,KAAK;AACnC;AAYA,SAAsB,UACpB,MACA,MACA,QAAsB,eACA;AAAA;AACtB,UAAM,aAAa,kBAAkB,IAAI;AACzC,QAAI;AACF,YAAM,OAAO,MAAM,WAAW,MAAM;AAAA,QAClC,MAAM;AAAA,QACN;AAAA,MACF,CAAC;AACD,aAAO,aAAa,MAAM,EAAE,UAAU,KAAK,KAAK,CAAC;AAAA,IACnD,SAAQ;AAEN,YAAM,OAAO,MAAM,WAAW,MAAM,EAAE,MAAM,QAAQ,MAAM,CAAC;AAC3D,aAAO,aAAa,MAAM,EAAE,UAAU,KAAK,KAAK,CAAC;AAAA,IACnD;AAAA,EACF;AAAA;;;ADCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AACnB,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkC,OAAO;AACnE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,SAAK,UAAU,MAAM,UAAU,KAAK,EAAE,KAAK,CAAC,OAAO;AACjD,UAAI,CAAC,UAAW,UAAS,EAAE;AAAA,IAC7B,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,KAAK,CAAC;AAE1B,QAAM,aAAa,MAAM;AACvB,SAAK,UAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAClD,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC,GAAG,MAAM;AAAA,IAAC,CAAC;AAAA,EACb;AAEA,SACE,oCAAC,SAAI,WAAsB,OAAO,EAAE,UAAU,WAAW,KACtD,kBACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAW;AAAA,MACX,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MACA,cAAc,CAAC,MAAM;AACnB,UAAE,cAAc,MAAM,UAAU;AAAA,MAClC;AAAA,MACA,cAAc,CAAC,MAAM;AACnB,UAAE,cAAc,MAAM,UAAU;AAAA,MAClC;AAAA;AAAA,IAEC,SAAS,YAAY;AAAA,EACxB,GAED,mBAAmB,QAClB,oCAAC,SAAI,OAAO,EAAE,SAAS,OAAO,KAC5B;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA;AAAA,IAEC,KAAK,MAAM,IAAI,EAAE,IAAI,CAAC,GAAG,MACxB,oCAAC,SAAI,KAAK,KAAI,IAAI,CAAE,CACrB;AAAA,EACH,GACA,oCAAC,SAAI,OAAO,EAAE,MAAM,GAAG,UAAU,OAAO,KAAI,KAAM,CACpD,IAEA,wBACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA;AAAA,IAEA,oCAAC,cAAM,IAAK;AAAA,EACd,CAGN;AAEJ;","names":[]}

package/dist/{flow.cjs → components/flow.cjs}

@@ -114,8 +114,10 @@ var BUILT_IN_EDGE_TYPES = [
     name: "Default",
     color: "",
     strokeWidth: 2,
-    animated: true,
+    animated: false,
     lineStyle: "default",
+    markerStart: "none",
+    markerEnd: "arrow",
     fields: []
   }
 ];
@@ -123,52 +125,51 @@ var BUILT_IN_EDGE_TYPES = [
 // src/components/FlowRenderer/useFlow.ts
 var import_react_query = require("@tanstack/react-query");
 var import_react = require("react");
-var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-function isId(value) {
-  return UUID_RE.test(value);
-}
-function apiNodeTypeToNodeTypeDef(doc) {
+function toNodeTypeDef(doc) {
   var _a, _b, _c, _d;
   return {
     slug: String((_a = doc.slug) != null ? _a : ""),
-    name: String((_b = doc.name) != null ? _b : ""),
+    name: String((_b = doc.title) != null ? _b : ""),
     color: String((_c = doc.color) != null ? _c : "#e5e7eb"),
     defaultSize: (_d = doc.defaultSize) != null ? _d : { width: 200, height: 200 },
     fields: Array.isArray(doc.fields) ? doc.fields : [],
     transparentBackground: Boolean(doc.transparentBackground)
   };
 }
-function apiEdgeTypeToEdgeTypeDef(doc) {
-  var _a, _b, _c, _d, _e, _f;
+function toEdgeTypeDef(doc) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   return {
     slug: String((_a = doc.slug) != null ? _a : ""),
     name: String((_b = doc.title) != null ? _b : ""),
     color: String((_c = doc.color) != null ? _c : ""),
     strokeWidth: (_d = doc.strokeWidth) != null ? _d : 2,
-    animated: (_e = doc.animated) != null ? _e : true,
+    animated: (_e = doc.animated) != null ? _e : false,
     lineStyle: String((_f = doc.lineStyle) != null ? _f : "default"),
+    markerStart: String((_g = doc.markerStart) != null ? _g : "none"),
+    markerEnd: String((_h = doc.markerEnd) != null ? _h : "arrow"),
     fields: Array.isArray(doc.fields) ? doc.fields : []
   };
 }
-function useFlow(slugOrId, options) {
-  var _a, _b;
-  const { client, enabled = true } = options;
-  const idDetected = isId(slugOrId);
+function useFlow(options) {
+  var _a, _b, _c;
+  const { client, slug, id, enabled = true } = options;
+  const hasIdentifier = !!(slug || id);
+  const identifier = (_a = id != null ? id : slug) != null ? _a : "";
   const flowQuery = (0, import_react_query.useQuery)({
-    queryKey: ["flows", slugOrId],
+    queryKey: ["flows", identifier],
     queryFn: () => __async(null, null, function* () {
-      if (idDetected) {
-        return client.from("flows").findById(slugOrId);
+      if (id) {
+        return client.from("flows").findById(id);
       }
       const result = yield client.from("flows").find({
-        where: { slug: { equals: slugOrId } },
+        where: { slug: { equals: slug } },
         limit: 1
       });
       const doc = result.docs[0];
-      if (!doc) throw new Error(`Flow not found: ${slugOrId}`);
+      if (!doc) throw new Error(`Flow not found: ${slug}`);
       return doc;
     }),
-    enabled
+    enabled: enabled && hasIdentifier
   }, client.queryClient);
   const nodeTypesQuery = (0, import_react_query.useQuery)({
     queryKey: ["flow-node-types"],
@@ -188,14 +189,14 @@ function useFlow(slugOrId, options) {
   }, client.queryClient);
   const nodeTypeDefs = (0, import_react.useMemo)(() => {
     var _a2;
-    const apiDefs = ((_a2 = nodeTypesQuery.data) != null ? _a2 : []).map(apiNodeTypeToNodeTypeDef);
+    const apiDefs = ((_a2 = nodeTypesQuery.data) != null ? _a2 : []).map(toNodeTypeDef);
     const builtInSlugs = new Set(BUILT_IN_NODE_TYPES.map((t) => t.slug));
     const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug));
     return [...BUILT_IN_NODE_TYPES, ...customDefs];
   }, [nodeTypesQuery.data]);
   const edgeTypeDefs = (0, import_react.useMemo)(() => {
     var _a2;
-    const apiDefs = ((_a2 = edgeTypesQuery.data) != null ? _a2 : []).map(apiEdgeTypeToEdgeTypeDef);
+    const apiDefs = ((_a2 = edgeTypesQuery.data) != null ? _a2 : []).map(toEdgeTypeDef);
     const builtInSlugs = new Set(BUILT_IN_EDGE_TYPES.map((t) => t.slug));
     const customDefs = apiDefs.filter((d) => !builtInSlugs.has(d.slug));
     return [...BUILT_IN_EDGE_TYPES, ...customDefs];
@@ -208,7 +209,7 @@ function useFlow(slugOrId, options) {
     edgeTypeDefs,
     flow,
     isLoading: flowQuery.isLoading || nodeTypesQuery.isLoading || edgeTypesQuery.isLoading,
-    error: (_b = (_a = flowQuery.error) != null ? _a : nodeTypesQuery.error) != null ? _b : edgeTypesQuery.error
+    error: (_c = (_b = flowQuery.error) != null ? _b : nodeTypesQuery.error) != null ? _c : edgeTypesQuery.error
   };
 }
 
@@ -223,6 +224,11 @@ function sanitizeUrl(url) {
     return void 0;
   }
 }
+function toMarkerType(value) {
+  if (value === "arrow") return import_react3.MarkerType.Arrow;
+  if (value === "arrowclosed") return import_react3.MarkerType.ArrowClosed;
+  return void 0;
+}
 function renderFieldValue(key, val, fieldDef) {
   if (val == null || val === "") return null;
   const fieldType = fieldDef == null ? void 0 : fieldDef.fieldType;
@@ -236,87 +242,58 @@ function renderFieldValue(key, val, fieldDef) {
         key,
         src: safeUrl,
         alt: "",
-        style: { width: "100%", marginTop: 8, borderRadius: 4 }
+        draggable: false,
+        style: { flex: 1, minHeight: 0, width: "100%", objectFit: "contain" }
       }
     );
   }
-  if (fieldType === "url") {
-    const safeUrl = sanitizeUrl(String(val));
-    if (!safeUrl) return null;
-    return /* @__PURE__ */ import_react2.default.createElement(
-      "a",
-      {
-        key,
-        href: safeUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        style: { display: "block", marginTop: 4, fontSize: "0.85em", color: "#3b82f6", wordBreak: "break-all" }
-      },
-      String(val)
-    );
-  }
-  if (fieldType === "color") {
-    return /* @__PURE__ */ import_react2.default.createElement("div", { key, style: { display: "flex", alignItems: "center", gap: 6, marginTop: 4 } }, /* @__PURE__ */ import_react2.default.createElement(
-      "span",
-      {
-        style: {
-          display: "inline-block",
-          width: 14,
-          height: 14,
-          borderRadius: 3,
-          backgroundColor: String(val),
-          border: "1px solid rgba(0,0,0,0.1)",
-          flexShrink: 0
-        }
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      key,
+      style: {
+        fontSize: 11,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        overflow: "hidden",
+        flexShrink: 0
       }
-    ), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: "0.85em" } }, String(val)));
-  }
-  if (fieldType === "toggle") {
-    const isOn = val === true || val === "true";
-    return /* @__PURE__ */ import_react2.default.createElement("p", { key, style: { margin: "4px 0 0", fontSize: "0.85em" } }, isOn ? "On" : "Off");
-  }
-  return /* @__PURE__ */ import_react2.default.createElement("p", { key, style: { margin: "4px 0 0", fontSize: "0.85em", whiteSpace: "pre-wrap" } }, String(val));
+    },
+    String(val)
+  );
 }
 function DefaultDynamicNode({ data }) {
   const d = data;
-  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: 12 } }, /* @__PURE__ */ import_react2.default.createElement("strong", null, d.label), d.fields && Object.entries(d.fields).map(([key, val]) => renderFieldValue(key, val)));
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" } }, d.fields && Object.entries(d.fields).filter(([, v]) => v != null && v !== "").map(([key, val]) => renderFieldValue(key, val)));
 }
 function EnhancedDynamicNode({ data, typeDef }) {
-  const fieldMap = new Map(typeDef.fields.map((f) => [f.name, f]));
-  const transparent = typeDef.transparentBackground;
-  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: transparent ? 0 : void 0 } }, !transparent && /* @__PURE__ */ import_react2.default.createElement(
-    "div",
-    {
-      style: {
-        backgroundColor: typeDef.color,
-        padding: "4px 12px",
-        borderRadius: "6px 6px 0 0",
-        fontSize: "0.75em",
-        fontWeight: 600,
-        color: "rgba(0,0,0,0.6)"
-      }
-    },
-    typeDef.name
-  ), /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: transparent ? 0 : 12 } }, /* @__PURE__ */ import_react2.default.createElement("strong", { style: { display: "block", marginBottom: 4 } }, data.label), data.fields && Object.entries(data.fields).map(([key, val]) => {
-    const fieldDef = fieldMap.get(key);
-    return renderFieldValue(key, val, fieldDef);
-  })));
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "100%", display: "flex", flexDirection: "column" } }, typeDef.fields.map((f) => {
+    const val = data.fields[f.name];
+    if (val == null || val === "") return null;
+    return renderFieldValue(f.name, val, f);
+  }));
 }
 function DefaultFrameNode({ data }) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const d = data;
-  const color = (_a = d.color) != null ? _a : "rgba(128,128,128,0.06)";
+  const baseColor = (_a = d.color) != null ? _a : "rgba(128,128,128,0.15)";
   const padding = (_b = d.padding) != null ? _b : 20;
+  const borderStyle = (_c = d.borderStyle) != null ? _c : "dashed";
+  const opacity = (_d = d.opacity) != null ? _d : 0.15;
+  const bgColor = (() => {
+    const m = baseColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`;
+    return baseColor;
+  })();
   return /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
       style: {
-        backgroundColor: color,
+        backgroundColor: bgColor,
         padding,
         width: "100%",
         height: "100%",
-        borderRadius: 8,
-        border: "2px dashed rgba(128,128,128,0.3)"
+        border: borderStyle === "none" ? "none" : `2px ${borderStyle} rgba(128,128,128,0.3)`
       }
     },
     /* @__PURE__ */ import_react2.default.createElement(
@@ -359,40 +336,87 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap) {
   types.frame = DefaultFrameNode;
   return types;
 }
+var EDGE_TYPE_MAP = {
+  step: "step",
+  smoothstep: "smoothstep",
+  bezier: "default",
+  default: "default"
+};
+function applyEdgeStyles(edges, edgeTypeDefsMap) {
+  if (!(edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.size)) return edges;
+  return edges.map((edge) => {
+    var _a;
+    const slug = edge.edgeTypeSlug;
+    if (!slug) return edge;
+    const def = edgeTypeDefsMap.get(slug);
+    if (!def) return edge;
+    const styled = __spreadValues({}, edge);
+    if (!styled.type && def.lineStyle) {
+      styled.type = (_a = EDGE_TYPE_MAP[def.lineStyle]) != null ? _a : "default";
+    }
+    styled.style = __spreadValues(__spreadValues(__spreadValues({}, def.color ? { stroke: def.color } : void 0), def.strokeWidth ? { strokeWidth: def.strokeWidth } : void 0), edge.style);
+    if (styled.animated == null && def.animated) styled.animated = true;
+    if (!styled.markerStart) {
+      const startType = toMarkerType(def.markerStart);
+      if (startType) {
+        styled.markerStart = __spreadValues({ type: startType }, def.color ? { color: def.color } : void 0);
+      }
+    }
+    if (!styled.markerEnd) {
+      const endType = toMarkerType(def.markerEnd);
+      if (endType) {
+        styled.markerEnd = __spreadValues({ type: endType }, def.color ? { color: def.color } : void 0);
+      }
+    }
+    return styled;
+  });
+}
 function FlowRenderer({
   data,
   className,
   style,
   nodeRenderers,
   nodeTypeDefs,
+  edgeTypeDefs,
   background = true,
   interactive = false,
   fitView = true,
   onNodeClick,
   onEdgeClick
 }) {
-  var _a, _b;
+  var _a;
   const nodeTypeDefsMap = import_react2.default.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return void 0;
     return new Map(nodeTypeDefs.map((d) => [d.slug, d]));
   }, [nodeTypeDefs]);
+  const edgeTypeDefsMap = import_react2.default.useMemo(() => {
+    if (!(edgeTypeDefs == null ? void 0 : edgeTypeDefs.length)) return void 0;
+    return new Map(edgeTypeDefs.map((d) => [d.slug, d]));
+  }, [edgeTypeDefs]);
   const nodeTypes = import_react2.default.useMemo(
     () => createNodeTypes(nodeRenderers, nodeTypeDefsMap),
     [nodeRenderers, nodeTypeDefsMap]
   );
+  const styledEdges = import_react2.default.useMemo(
+    () => {
+      var _a2;
+      return applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
+    },
+    [data == null ? void 0 : data.edges, edgeTypeDefsMap]
+  );
   if (!data) return null;
   const defaultViewport = !fitView && data.viewport ? data.viewport : void 0;
   return /* @__PURE__ */ import_react2.default.createElement(import_react3.ReactFlowProvider, null, /* @__PURE__ */ import_react2.default.createElement("div", { className, style: __spreadValues({ width: "100%", height: "100%" }, style) }, /* @__PURE__ */ import_react2.default.createElement(
     import_react3.ReactFlow,
     {
       nodes: (_a = data.nodes) != null ? _a : [],
-      edges: (_b = data.edges) != null ? _b : [],
+      edges: styledEdges,
       nodeTypes,
       defaultViewport,
       fitView,
       onNodeClick,
       onEdgeClick,
-      nodesDraggable: interactive,
+      nodesDraggable: interactive ? void 0 : false,
       nodesConnectable: false,
       elementsSelectable: interactive || !!onNodeClick || !!onEdgeClick,
       panOnDrag: interactive,

package/dist/components/flow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FlowRenderer/index.tsx","../../src/components/FlowRenderer/types.ts","../../src/components/FlowRenderer/built-in-node-types.ts","../../src/components/FlowRenderer/built-in-edge-types.ts","../../src/components/FlowRenderer/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 (fieldType === 'image' || (typeof val === 'object' && val !== null && 'url' in val)) {\n    const imgUrl = 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 style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>\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({ data, typeDef }: { data: DynamicNodeData; typeDef: NodeTypeDef }) {\n  return (\n    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>\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: borderStyle === 'none' ? 'none' : `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 = { type: startType, ...(def.color ? { color: def.color } : undefined) }\n      }\n    }\n    if (!styled.markerEnd) {\n      const endType = toMarkerType(def.markerEnd)\n      if (endType) {\n        styled.markerEnd = { type: endType, ...(def.color ? { color: def.color } : undefined) }\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 className={className} style={{ width: '100%', height: '100%', ...style }}>\n        <ReactFlow\n          nodes={(data.nodes ?? []) as unknown as Parameters<typeof ReactFlow>[0]['nodes']}\n          edges={styledEdges}\n          nodeTypes={nodeTypes}\n          defaultViewport={defaultViewport}\n          fitView={fitView}\n          onNodeClick={onNodeClick as Parameters<typeof ReactFlow>[0]['onNodeClick']}\n          onEdgeClick={onEdgeClick as Parameters<typeof ReactFlow>[0]['onEdgeClick']}\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: 'text' | 'textarea' | 'number' | 'url' | 'color' | 'image' | 'select' | '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(node: FlowNode): node is FlowNode & { data: DynamicNodeData } {\n  return node.type === 'dynamic'\n}\n\nexport function isFrameNode(node: FlowNode): 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']) ?? { width: 200, height: 200 },\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    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  }, client.queryClient)\n\n  // Fetch tenant's custom node types\n  const nodeTypesQuery = useQuery<Record<string, unknown>[]>({\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  }, client.queryClient)\n\n  // Fetch tenant's custom edge types\n  const edgeTypesQuery = useQuery<Record<string, unknown>[]>({\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  }, client.queryClient)\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: flowQuery.isLoading || nodeTypesQuery.isLoading || edgeTypesQuery.isLoading,\n    error: (flowQuery.error as Error | null) ?? (nodeTypesQuery.error as Error | null) ?? (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;;;ACsFA,SAAS,cAAc,MAA8D;AAC1F,SAAO,KAAK,SAAS;AACvB;AAEO,SAAS,YAAY,MAA4D;AACtF,SAAO,KAAK,SAAS;AACvB;;;ACrGO,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,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,IAC1F,QAAQ,MAAM,QAAQ,IAAI,MAAM,IAC3B,IAAI,SACL,CAAC;AAAA,IACL,uBAAuB,QAAQ,IAAI,qBAAqB;AAAA,EAC1D;AACF;AAEA,SAAS,cAAc,KAA2C;AA/DlE;AAgEE,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;AAjFhE;AAkFE,QAAM,EAAE,QAAQ,MAAM,IAAI,UAAU,KAAK,IAAI;AAC7C,QAAM,gBAAgB,CAAC,EAAE,QAAQ;AACjC,QAAM,cAAc,uBAAM,SAAN,YAAe;AAGnC,QAAM,gBAAY,6BAAkC;AAAA,IAClD,UAAU,CAAC,SAAS,UAAU;AAAA,IAC9B,SAAS,MAAY;AACnB,UAAI,IAAI;AACN,eAAO,OAAO,KAAK,OAAO,EAAE,SAAS,EAAE;AAAA,MACzC;AACA,YAAM,SAAS,MAAM,OAAO,KAAK,OAAO,EAAE,KAAK;AAAA,QAC7C,OAAO,EAAE,MAAM,EAAE,QAAQ,KAAK,EAAE;AAAA,QAChC,OAAO;AAAA,MACT,CAAC;AACD,YAAM,MAAM,OAAO,KAAK,CAAC;AACzB,UAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mBAAmB,IAAI,EAAE;AACnD,aAAO;AAAA,IACT;AAAA,IACA,SAAS,WAAW;AAAA,EACtB,GAAG,OAAO,WAAW;AAGrB,QAAM,qBAAiB,6BAAoC;AAAA,IACzD,UAAU,CAAC,iBAAiB;AAAA,IAC5B,SAAS,MAAY;AACnB,YAAM,SAAS,MAAM,OAAO,KAAK,iBAAiB,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC;AACvE,aAAO,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,EACF,GAAG,OAAO,WAAW;AAGrB,QAAM,qBAAiB,6BAAoC;AAAA,IACzD,UAAU,CAAC,iBAAiB;AAAA,IAC5B,SAAS,MAAY;AACnB,YAAM,SAAS,MAAM,OAAO,KAAK,iBAAiB,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC;AACvE,aAAO,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,EACF,GAAG,OAAO,WAAW;AAGrB,QAAM,mBAAe,sBAAuB,MAAM;AA7HpD,QAAAC;AA8HI,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;AArIpD,QAAAA;AAsII,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,WAAW,UAAU,aAAa,eAAe,aAAa,eAAe;AAAA,IAC7E,QAAQ,qBAAU,UAAV,YAAqC,eAAe,UAApD,YAA+E,eAAe;AAAA,EACxG;AACF;;;AJzGA,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,MAAI,cAAc,WAAY,OAAO,QAAQ,YAAY,QAAQ,QAAQ,SAAS,KAAM;AACtF,UAAM,SAAS,OAAO,QAAQ,WAAW,MAAO,2BAA0B;AAC1E,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,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,SAAS,QAAQ,eAAe,SAAS,KACnF,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,CACrD;AAEJ;AAIA,SAAS,oBAAoB,EAAE,MAAM,QAAQ,GAAoD;AAC/F,SACE,8BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,SAAS,QAAQ,eAAe,SAAS,KACnF,QAAQ,OAAO,IAAI,CAAC,MAAM;AACzB,UAAM,MAAM,KAAK,OAAO,EAAE,IAAI;AAC9B,QAAI,OAAO,QAAQ,QAAQ,GAAI,QAAO;AACtC,WAAO,iBAAiB,EAAE,MAAM,KAAK,CAAC;AAAA,EACxC,CAAC,CACH;AAEJ;AAIA,SAAS,iBAAiB,EAAE,KAAK,GAAc;AAzI/C;AA0IE,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,QAAQ,gBAAgB,SAAS,SAAS,OAAO,WAAW;AAAA,MAC9D;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;AAlO7B;AAmOI,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,iBAAE,MAAM,aAAe,IAAI,QAAQ,EAAE,OAAO,IAAI,MAAM,IAAI;AAAA,MACjF;AAAA,IACF;AACA,QAAI,CAAC,OAAO,WAAW;AACrB,YAAM,UAAU,aAAa,IAAI,SAAS;AAC1C,UAAI,SAAS;AACX,eAAO,YAAY,iBAAE,MAAM,WAAa,IAAI,QAAQ,EAAE,OAAO,IAAI,MAAM,IAAI;AAAA,MAC7E;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;AA3TtB;AA4TE,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;AA5UP,UAAAC;AA4UU,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,cAAC,SAAI,WAAsB,OAAO,iBAAE,OAAO,QAAQ,QAAQ,UAAW,UACpE,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ,UAAK,UAAL,YAAc,CAAC;AAAA,MACvB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,cAAc,SAAY;AAAA,MAC1C,kBAAkB;AAAA,MAClB,oBAAoB,eAAe,CAAC,CAAC,eAAe,CAAC,CAAC;AAAA,MACtD,WAAW;AAAA,MACX,cAAc;AAAA,MACd,aAAa;AAAA,MACb,mBAAmB;AAAA;AAAA,IAElB,cAAc,8BAAAA,QAAA,cAAC,8BAAW;AAAA,EAC7B,CACF,CACF;AAEJ;","names":["import_react","_a","React","_a"]}