@01.software/sdk 0.5.2 → 0.5.4

package/dist/ui/flow.cjs

@@ -23,6 +23,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -70,15 +82,22 @@ var Flow_exports = {};
 __export(Flow_exports, {
   BUILT_IN_EDGE_TYPES: () => BUILT_IN_EDGE_TYPES,
   BUILT_IN_NODE_TYPES: () => BUILT_IN_NODE_TYPES,
+  FlowFrame: () => FlowFrame,
   FlowRenderer: () => FlowRenderer,
   clearTemplateCache: () => clearTemplateCache,
   compileTemplate: () => compileTemplate,
+  getBooleanField: () => getBooleanField,
   getFrameData: () => getFrameData,
   getFrames: () => getFrames,
+  getImageField: () => getImageField,
   getNodeBounds: () => getNodeBounds,
+  getNumberField: () => getNumberField,
+  getTextField: () => getTextField,
   isDynamicNode: () => isDynamicNode,
   isFrameNode: () => isFrameNode,
   prefetchFlow: () => prefetchFlow,
+  renderFieldValue: () => renderFieldValue,
+  sanitizeCSS: () => sanitizeCSS,
   useFlow: () => useFlow,
   useFlowData: () => useFlowData
 });
@@ -147,6 +166,43 @@ function collectionKeys(collection) {
   };
 }
 
+// src/ui/Flow/query-options.ts
+function flowQueryOptions(client, slug, id) {
+  var _a;
+  const identifier = (_a = id != null ? id : slug) != null ? _a : "";
+  return {
+    queryKey: collectionKeys("flows").detail(identifier),
+    queryFn: () => __async(null, null, function* () {
+      if (id) return client.from("flows").findById(id);
+      const result = yield client.from("flows").find({
+        where: { slug: { equals: slug } },
+        limit: 1
+      });
+      const doc = result.docs[0];
+      if (!doc) throw new Error(`Flow not found: ${slug}`);
+      return doc;
+    })
+  };
+}
+function nodeTypesQueryOptions(client) {
+  return {
+    queryKey: collectionKeys("flow-node-types").lists(),
+    queryFn: () => __async(null, null, function* () {
+      const result = yield client.from("flow-node-types").find({ limit: 0 });
+      return result.docs;
+    })
+  };
+}
+function edgeTypesQueryOptions(client) {
+  return {
+    queryKey: collectionKeys("flow-edge-types").lists(),
+    queryFn: () => __async(null, null, function* () {
+      const result = yield client.from("flow-edge-types").find({ limit: 0 });
+      return result.docs;
+    })
+  };
+}
+
 // src/ui/Flow/useFlow.ts
 function toNodeTypeDef(doc) {
   var _a, _b, _c, _d, _e, _f;
@@ -179,49 +235,25 @@ function toEdgeTypeDef(doc) {
   };
 }
 function useFlow(options) {
-  var _a, _b, _c;
+  var _a, _b;
   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: collectionKeys("flows").detail(identifier),
-      queryFn: () => __async(null, null, function* () {
-        if (id) {
-          return client.from("flows").findById(id);
-        }
-        const result = yield client.from("flows").find({
-          where: { slug: { equals: slug } },
-          limit: 1
-        });
-        const doc = result.docs[0];
-        if (!doc) throw new Error(`Flow not found: ${slug}`);
-        return doc;
-      }),
+    __spreadProps(__spreadValues({}, flowQueryOptions(client, slug, id)), {
       enabled: enabled && hasIdentifier
-    },
+    }),
     client.queryClient
   );
   const nodeTypesQuery = (0, import_react_query.useQuery)(
-    {
-      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;
-      }),
+    __spreadProps(__spreadValues({}, nodeTypesQueryOptions(client)), {
       enabled
-    },
+    }),
     client.queryClient
   );
   const edgeTypesQuery = (0, import_react_query.useQuery)(
-    {
-      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;
-      }),
+    __spreadProps(__spreadValues({}, edgeTypesQueryOptions(client)), {
       enabled
-    },
+    }),
     client.queryClient
   );
   const nodeTypeDefs = (0, import_react.useMemo)(() => {
@@ -246,44 +278,21 @@ function useFlow(options) {
     edgeTypeDefs,
     flow,
     isLoading: flowQuery.isLoading || nodeTypesQuery.isLoading || edgeTypesQuery.isLoading,
-    error: (_c = (_b = flowQuery.error) != null ? _b : nodeTypesQuery.error) != null ? _c : edgeTypesQuery.error
+    error: (_b = (_a = flowQuery.error) != null ? _a : nodeTypesQuery.error) != null ? _b : edgeTypesQuery.error
   };
 }
 
 // src/ui/Flow/prefetchFlow.ts
 function prefetchFlow(options) {
   return __async(this, null, function* () {
-    var _a;
     const { client, slug, id } = options;
-    const identifier = (_a = id != null ? id : slug) != null ? _a : "";
+    if (!slug && !id) {
+      throw new Error("prefetchFlow requires either slug or id");
+    }
     yield Promise.all([
-      client.queryClient.prefetchQuery({
-        queryKey: collectionKeys("flows").detail(identifier),
-        queryFn: () => __async(null, null, function* () {
-          if (id) return client.from("flows").findById(id);
-          const result = yield client.from("flows").find({
-            where: { slug: { equals: slug } },
-            limit: 1
-          });
-          const doc = result.docs[0];
-          if (!doc) throw new Error(`Flow not found: ${slug}`);
-          return doc;
-        })
-      }),
-      client.queryClient.prefetchQuery({
-        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;
-        })
-      }),
-      client.queryClient.prefetchQuery({
-        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;
-        })
-      })
+      client.queryClient.prefetchQuery(flowQueryOptions(client, slug, id)),
+      client.queryClient.prefetchQuery(nodeTypesQueryOptions(client)),
+      client.queryClient.prefetchQuery(edgeTypesQueryOptions(client))
     ]);
   });
 }
@@ -342,15 +351,28 @@ function getAbsolutePosition(node, nodeMap) {
   return { x, y };
 }
 function collectDescendants(nodes, rootId) {
+  const childrenMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    if (n.parentId) {
+      let siblings = childrenMap.get(n.parentId);
+      if (!siblings) {
+        siblings = [];
+        childrenMap.set(n.parentId, siblings);
+      }
+      siblings.push(n.id);
+    }
+  }
   const result = /* @__PURE__ */ new Set([rootId]);
   const queue = [rootId];
   let i = 0;
   while (i < queue.length) {
-    const current = queue[i++];
-    for (const n of nodes) {
-      if (n.parentId === current && !result.has(n.id)) {
-        result.add(n.id);
-        queue.push(n.id);
+    const children = childrenMap.get(queue[i++]);
+    if (children) {
+      for (const childId of children) {
+        if (!result.has(childId)) {
+          result.add(childId);
+          queue.push(childId);
+        }
       }
     }
   }
@@ -423,18 +445,78 @@ function getFrameData(data, frameId) {
 }
 
 // src/ui/Flow/template-compiler.ts
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 var import_sucrase = require("sucrase");
-var MAX_CACHE_SIZE = 100;
-var componentCache = /* @__PURE__ */ new Map();
-function hashCode(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const char = str.charCodeAt(i);
-    hash = (hash << 5) - hash + char | 0;
-  }
-  return hash.toString(36);
+
+// src/ui/Flow/quickjs-loader.ts
+var import_react3 = require("react");
+var _state = { status: "idle", module: null };
+var _listeners = /* @__PURE__ */ new Set();
+function _notify() {
+  _listeners.forEach((fn) => fn());
+}
+function subscribeQuickJS(cb) {
+  _listeners.add(cb);
+  return () => _listeners.delete(cb);
+}
+function getQuickJSSnapshot() {
+  return _state.module;
 }
+function ensureQuickJSLoaded() {
+  if (_state.status !== "idle") return;
+  _state = { status: "loading", module: null };
+  import("quickjs-emscripten").then(
+    (mod) => mod.getQuickJS()
+  ).then((module2) => {
+    _state = { status: "ready", module: module2 };
+    _notify();
+  }).catch(() => {
+    _state = { status: "failed", module: null };
+    _notify();
+  });
+}
+function useQuickJS() {
+  return (0, import_react3.useSyncExternalStore)(subscribeQuickJS, getQuickJSSnapshot, () => null);
+}
+
+// src/ui/Flow/template-compiler.ts
+var MAX_CACHE_SIZE = 100;
+var MAX_MATERIALIZE_DEPTH = 20;
+var ALLOWED_ELEMENTS = /* @__PURE__ */ new Set([
+  "div",
+  "span",
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "strong",
+  "em",
+  "b",
+  "i",
+  "br",
+  "img",
+  "figure",
+  "section",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "pre",
+  "code",
+  "svg",
+  "path",
+  "g",
+  "circle",
+  "rect"
+]);
 var BLOCKED_PATTERNS = [
   /\bdocument\s*\./,
   /\bwindow\s*\./,
@@ -454,75 +536,219 @@ var BLOCKED_PATTERNS = [
   /\bsetTimeout\s*\(/,
   /\bsetInterval\s*\(/,
   /\bsetImmediate\s*\(/,
-  /\brequire\s*\(/
+  /\brequire\s*\(/,
+  /\bself\b/,
+  /\bconstructor\s*\.\s*constructor/,
+  /\bReflect\b/,
+  /\bProxy\b/,
+  /\b__proto__\b/
 ];
+var VM_SETUP = `
+var React = {
+  createElement: function(type, props) {
+    var args = Array.prototype.slice.call(arguments, 2);
+    return { $$t: 'el', type: String(type), props: props || {}, ch: args };
+  },
+  Fragment: '__frag__'
+};
+var exports = {};
+var module = { exports: exports };
+var window = undefined;
+var document = undefined;
+var globalThis = undefined;
+var self = undefined;
+var setTimeout = undefined;
+var setInterval = undefined;
+var setImmediate = undefined;
+var fetch = undefined;
+var XMLHttpRequest = undefined;
+var navigator = undefined;
+var location = undefined;
+var localStorage = undefined;
+var sessionStorage = undefined;
+var cookie = undefined;
+var postMessage = undefined;
+`;
+var rendererCache = /* @__PURE__ */ new Map();
+function hashCode(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char | 0;
+  }
+  return hash.toString(36);
+}
 function validateTemplateCode(code) {
   return !BLOCKED_PATTERNS.some((pattern) => pattern.test(code));
 }
-function compileTemplate(code, slug) {
-  const cacheKey = `${slug}:${hashCode(code)}`;
-  if (componentCache.has(cacheKey)) {
-    const cached = componentCache.get(cacheKey);
-    componentCache.delete(cacheKey);
-    componentCache.set(cacheKey, cached);
-    return cached;
+var SAFE_DATA_URI_PREFIXES = [
+  "data:image/png;",
+  "data:image/jpeg;",
+  "data:image/gif;",
+  "data:image/webp;",
+  "data:image/avif;"
+];
+function isSafeUrl(value) {
+  if (typeof value !== "string") return false;
+  if (value.startsWith("/") || value.startsWith("./") || value.startsWith("../")) return true;
+  if (SAFE_DATA_URI_PREFIXES.some((p) => value.startsWith(p))) return true;
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch (e) {
+    return false;
   }
-  if (!validateTemplateCode(code)) {
-    console.warn(`[flow] Template "${slug}" contains blocked patterns`);
-    return null;
+}
+var BLOCKED_STYLE_PROPS = /* @__PURE__ */ new Set([
+  "backgroundImage",
+  "background",
+  "listStyleImage",
+  "content",
+  "borderImage",
+  "borderImageSource",
+  "maskImage",
+  "mask",
+  "filter",
+  "cursor"
+]);
+function sanitizeStyle(style) {
+  if (!style || typeof style !== "object" || Array.isArray(style)) return {};
+  const safe = {};
+  for (const [k, v] of Object.entries(style)) {
+    if (BLOCKED_STYLE_PROPS.has(k)) continue;
+    if (typeof v === "string" && /url\s*\(/i.test(v)) continue;
+    if (k === "position" && typeof v === "string" && /fixed|sticky/i.test(v)) continue;
+    if (k === "zIndex") {
+      const n = typeof v === "number" ? v : parseInt(String(v), 10);
+      if (isNaN(n) || n > 9998) continue;
+    }
+    safe[k] = v;
+  }
+  return safe;
+}
+function materialize(node, depth = 0) {
+  var _a;
+  if (depth > MAX_MATERIALIZE_DEPTH) return null;
+  if (node == null) return null;
+  if (typeof node === "string" || typeof node === "number") return node;
+  if (Array.isArray(node)) {
+    return import_react4.default.createElement(
+      import_react4.default.Fragment,
+      null,
+      ...node.map((c) => materialize(c, depth + 1))
+    );
   }
+  if (typeof node !== "object") return null;
+  const d = node;
+  if (d.$$t === "frag") {
+    const ch = Array.isArray(d.ch) ? d.ch : [];
+    return import_react4.default.createElement(
+      import_react4.default.Fragment,
+      null,
+      ...ch.map((c) => materialize(c, depth + 1))
+    );
+  }
+  if (d.$$t === "el") {
+    const type = String((_a = d.type) != null ? _a : "");
+    const props = d.props && typeof d.props === "object" ? d.props : {};
+    const ch = Array.isArray(d.ch) ? d.ch : [];
+    if (!ALLOWED_ELEMENTS.has(type.toLowerCase())) return null;
+    const safeProps = {};
+    for (const [k, v] of Object.entries(props)) {
+      if (k.startsWith("on")) continue;
+      if (k === "dangerouslySetInnerHTML" || k === "ref") continue;
+      if ((k === "src" || k === "href") && !isSafeUrl(v)) continue;
+      if (k === "style") {
+        safeProps[k] = sanitizeStyle(v);
+        continue;
+      }
+      safeProps[k] = v;
+    }
+    const children = ch.map((c) => materialize(c, depth + 1));
+    return import_react4.default.createElement(type, safeProps, ...children);
+  }
+  return null;
+}
+function evalInContext(vm, code) {
+  const result = vm.evalCode(code);
+  if (result.error) {
+    result.error.dispose();
+    return { ok: false };
+  }
+  return { ok: true, handle: result.value };
+}
+var MAX_VM_CYCLES = 2e5;
+function makeRenderer(jsCode) {
+  return function runInQuickJS(qjs, props) {
+    const vm = qjs.newContext();
+    let cycles = 0;
+    vm.runtime.setInterruptHandler(() => {
+      cycles++;
+      return cycles > MAX_VM_CYCLES;
+    });
+    try {
+      const setupResult = evalInContext(vm, VM_SETUP + jsCode);
+      if (!setupResult.ok) return null;
+      setupResult.handle.dispose();
+      const propsJson = JSON.stringify(props);
+      const callCode = `(function(){var __c=module.exports.default||module.exports;return JSON.stringify(__c(${propsJson}));})();`;
+      const callResult = evalInContext(vm, callCode);
+      if (!callResult.ok) return null;
+      const raw = vm.dump(callResult.handle);
+      callResult.handle.dispose();
+      return materialize(JSON.parse(String(raw)));
+    } catch (e) {
+      return null;
+    } finally {
+      vm.dispose();
+    }
+  };
+}
+function makeReactFC(renderer, qjs) {
+  return function QuickJSTemplateComponent(props) {
+    var _a;
+    return (_a = renderer(qjs, props)) != null ? _a : null;
+  };
+}
+function compileTemplate(code, slug) {
+  ensureQuickJSLoaded();
+  if (!validateTemplateCode(code)) return null;
+  const qjs = getQuickJSSnapshot();
+  if (!qjs) return null;
+  const cacheKey = `${slug}:${code.length}:${hashCode(code)}`;
+  if (rendererCache.has(cacheKey)) {
+    const entry = rendererCache.get(cacheKey);
+    rendererCache.delete(cacheKey);
+    rendererCache.set(cacheKey, entry);
+    return entry.fc;
+  }
+  let jsCode;
   try {
-    const { code: jsCode } = (0, import_sucrase.transform)(code, {
+    const result = (0, import_sucrase.transform)(code, {
       transforms: ["typescript", "jsx", "imports"],
       jsxRuntime: "classic",
       jsxPragma: "React.createElement",
       jsxFragmentPragma: "React.Fragment"
     });
-    const factory = new Function(
-      "React",
-      `
-      var window = undefined;
-      var document = undefined;
-      var globalThis = undefined;
-      var setTimeout = undefined;
-      var setInterval = undefined;
-      var setImmediate = undefined;
-      var fetch = undefined;
-      var XMLHttpRequest = undefined;
-      var navigator = undefined;
-      var location = undefined;
-      var exports = {};
-      var module = { exports: exports };
-      ${jsCode}
-      return module.exports.default || module.exports;
-    `
-    );
-    const Component = factory(import_react3.default);
-    if (typeof Component !== "function") return null;
-    if (componentCache.size >= MAX_CACHE_SIZE) {
-      const oldestKey = componentCache.keys().next().value;
-      if (oldestKey) componentCache.delete(oldestKey);
-    }
-    componentCache.set(cacheKey, Component);
-    return Component;
+    jsCode = result.code;
   } catch (e) {
-    console.warn(`[flow] Failed to compile template for "${slug}":`, e);
     return null;
   }
+  const renderer = makeRenderer(jsCode);
+  const fc = makeReactFC(renderer, qjs);
+  if (rendererCache.size >= MAX_CACHE_SIZE) {
+    const oldest = rendererCache.keys().next().value;
+    if (oldest) rendererCache.delete(oldest);
+  }
+  rendererCache.set(cacheKey, { renderer, fc });
+  return fc;
 }
 function clearTemplateCache() {
-  componentCache.clear();
+  rendererCache.clear();
 }
 
-// src/ui/Flow/FlowRenderer.tsx
-var import_react9 = __toESM(require("react"), 1);
-var import_react10 = require("@xyflow/react");
-
-// src/ui/Flow/node-types-factory.tsx
-var import_react5 = __toESM(require("react"), 1);
-
 // src/ui/Flow/node-renderers.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 function sanitizeUrl(url) {
   if (!url) return url;
   try {
@@ -540,7 +766,7 @@ function renderFieldValue(key, val, fieldDef) {
     const imgUrl = typeof val === "string" ? val : val == null ? void 0 : val.url;
     const safeUrl = sanitizeUrl(imgUrl);
     if (!safeUrl) return null;
-    return /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react5.default.createElement(
       "img",
       {
         key,
@@ -551,7 +777,7 @@ function renderFieldValue(key, val, fieldDef) {
       }
     );
   }
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       key,
@@ -568,7 +794,7 @@ function renderFieldValue(key, val, fieldDef) {
 }
 function DefaultDynamicNode({ data }) {
   const d = data;
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -581,7 +807,7 @@ function DefaultDynamicNode({ data }) {
     d.fields && Object.entries(d.fields).filter(([, v]) => v != null && v !== "").map(([key, val]) => renderFieldValue(key, val))
   );
 }
-var TemplateErrorBoundary = class extends import_react4.default.Component {
+var TemplateErrorBoundary = class extends import_react5.default.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -596,7 +822,7 @@ var TemplateErrorBoundary = class extends import_react4.default.Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ import_react4.default.createElement("div", { style: { padding: 8, fontSize: 11, color: "#ef4444" } }, /* @__PURE__ */ import_react4.default.createElement("strong", null, "Render error"), /* @__PURE__ */ import_react4.default.createElement("pre", { style: { fontSize: 10, whiteSpace: "pre-wrap" } }, this.state.error.message));
+      return /* @__PURE__ */ import_react5.default.createElement("div", { style: { padding: 8, fontSize: 11, color: "#ef4444" } }, /* @__PURE__ */ import_react5.default.createElement("strong", null, "Render error"), /* @__PURE__ */ import_react5.default.createElement("pre", { style: { fontSize: 10, whiteSpace: "pre-wrap" } }, process.env.NODE_ENV === "development" ? this.state.error.message : "Template render failed"));
     }
     return this.props.children;
   }
@@ -607,16 +833,17 @@ function EnhancedDynamicNode({
   width,
   height
 }) {
+  useQuickJS();
   if (typeDef.template) {
     const Component = compileTemplate(typeDef.template, typeDef.slug);
     if (Component) {
-      return /* @__PURE__ */ import_react4.default.createElement(
+      return /* @__PURE__ */ import_react5.default.createElement(
         "div",
         {
           className: `flow-node flow-node--${typeDef.slug}${typeDef.transparentBackground ? " flow-node--transparent-bg" : ""}`,
           style: { width: "100%", height: "100%" }
         },
-        /* @__PURE__ */ import_react4.default.createElement(TemplateErrorBoundary, { resetKey: typeDef.template }, /* @__PURE__ */ import_react4.default.createElement(
+        /* @__PURE__ */ import_react5.default.createElement(TemplateErrorBoundary, { resetKey: typeDef.template }, /* @__PURE__ */ import_react5.default.createElement(
           Component,
           {
             fields: data.fields,
@@ -630,9 +857,10 @@ function EnhancedDynamicNode({
       );
     }
   }
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
+      className: `flow-node flow-node--${typeDef.slug}`,
       style: {
         width: "100%",
         height: "100%",
@@ -659,7 +887,7 @@ function DefaultFrameNode({ data }) {
     if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`;
     return baseColor;
   })();
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       style: {
@@ -670,7 +898,7 @@ function DefaultFrameNode({ data }) {
         border: borderStyle === "none" ? "none" : `2px ${borderStyle} rgba(128,128,128,0.3)`
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(
+    /* @__PURE__ */ import_react5.default.createElement(
       "div",
       {
         style: {
@@ -685,14 +913,298 @@ function DefaultFrameNode({ data }) {
   );
 }
 
+// src/ui/Flow/field-helpers.ts
+function getImageField(fields, name) {
+  const val = fields == null ? void 0 : fields[name];
+  if (val && typeof val === "object" && val !== null && "url" in val)
+    return val;
+  return void 0;
+}
+function getTextField(fields, name) {
+  const val = fields == null ? void 0 : fields[name];
+  return typeof val === "string" ? val : void 0;
+}
+function getNumberField(fields, name) {
+  const val = fields == null ? void 0 : fields[name];
+  return typeof val === "number" ? val : void 0;
+}
+function getBooleanField(fields, name) {
+  const val = fields == null ? void 0 : fields[name];
+  return typeof val === "boolean" ? val : void 0;
+}
+
+// src/ui/Flow/css-sanitizer.ts
+var import_postcss = __toESM(require("postcss"), 1);
+var ALLOWED_AT_RULES = /* @__PURE__ */ new Set(["keyframes", "media", "supports", "container", "layer"]);
+var BLOCKED_VALUE_PATTERNS = [/url\s*\(/i, /expression\s*\(/i, /paint\s*\(/i, /-moz-binding/i];
+var DANGEROUS_SELECTOR = /(?:^|[\s,])(?::root|html|body)\b/;
+var BLOCKED_PROPERTY_VALUES = {
+  // absolute is allowed — contained by nearest positioned ancestor (node wrapper)
+  position: /fixed|sticky/i
+};
+var Z_INDEX_MAX = 9998;
+function sanitizeCSS(css, scopeClass) {
+  let root;
+  try {
+    root = import_postcss.default.parse(css);
+  } catch (e) {
+    return "";
+  }
+  const safeScopeClass = scopeClass ? scopeClass.replace(/[{}()[\];,'"\\<>\s]/g, "") : "";
+  const keyframeNameMap = /* @__PURE__ */ new Map();
+  if (safeScopeClass) {
+    root.walkAtRules(/^keyframes$/i, (node) => {
+      const rawName = node.params.trim().replace(/^['"]|['"]$/g, "");
+      const originalName = rawName;
+      const scopedName = `${safeScopeClass}__${rawName.replace(/\s+/g, "_")}`;
+      keyframeNameMap.set(originalName, scopedName);
+      node.params = scopedName;
+    });
+  }
+  if (safeScopeClass && keyframeNameMap.size > 0) {
+    const ANIM_KEYWORDS = /* @__PURE__ */ new Set(["none", "initial", "inherit", "unset", "revert"]);
+    const replaceAnimName = (token) => {
+      var _a;
+      const t = token.trim().replace(/^['"]|['"]$/g, "");
+      return ANIM_KEYWORDS.has(t) ? token : (_a = keyframeNameMap.get(t)) != null ? _a : token;
+    };
+    root.walkDecls(/^animation-name$/i, (node) => {
+      node.value = node.value.split(",").map(replaceAnimName).join(", ");
+    });
+    root.walkDecls(/^animation$/i, (node) => {
+      node.value = node.value.split(",").map(
+        (anim) => anim.split(/(\s+)/).map((token) => /\s/.test(token) ? token : replaceAnimName(token)).join("")
+      ).join(",");
+    });
+  }
+  root.walkAtRules((node) => {
+    if (!ALLOWED_AT_RULES.has(node.name.toLowerCase())) {
+      node.remove();
+    }
+  });
+  root.walkDecls((node) => {
+    const normalizedValue = node.value.replace(/\/\*[\s\S]*?\*\//g, "");
+    if (BLOCKED_VALUE_PATTERNS.some((p) => p.test(normalizedValue))) {
+      node.remove();
+      return;
+    }
+    const propLower = node.prop.toLowerCase();
+    const blockedValuePattern = BLOCKED_PROPERTY_VALUES[propLower];
+    if (blockedValuePattern) {
+      const deescaped = normalizedValue.replace(
+        /\\([0-9a-fA-F]{1,6})\s?/g,
+        (_, hex) => String.fromCodePoint(parseInt(hex, 16))
+      );
+      if (blockedValuePattern.test(deescaped)) {
+        node.remove();
+        return;
+      }
+    }
+    if (propLower === "z-index") {
+      const zv = node.value.trim();
+      if (zv === "auto" || zv === "initial" || zv === "inherit" || zv === "unset" || zv === "revert") {
+      } else {
+        const val = parseInt(zv, 10);
+        if (isNaN(val) || String(val) !== zv || val > Z_INDEX_MAX) {
+          node.remove();
+          return;
+        }
+      }
+    }
+  });
+  root.walkRules((rule) => {
+    rule.selectors = rule.selectors.filter((s) => !DANGEROUS_SELECTOR.test(s));
+    if (!rule.selectors.length) {
+      rule.remove();
+      return;
+    }
+    if (scopeClass) {
+      if (!safeScopeClass) {
+        rule.remove();
+        return;
+      }
+      const parent = rule.parent;
+      if ((parent == null ? void 0 : parent.type) === "atrule" && parent.name.toLowerCase() === "keyframes") {
+        return;
+      }
+      rule.selectors = rule.selectors.map((sel) => `.${safeScopeClass} ${sel}`);
+    }
+  });
+  return root.toString().replace(/<\/style/gi, "<\\/style");
+}
+
+// src/ui/Flow/FlowRenderer.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react12 = require("@xyflow/react");
+
+// src/ui/Flow/node-types-factory.tsx
+var import_react7 = __toESM(require("react"), 1);
+
+// src/ui/Image/index.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/utils/image.ts
+var IMAGE_SIZES = [384, 768, 1536];
+function getImageSrcSet(image) {
+  const parts = [];
+  const sizes = image.sizes;
+  if (sizes) {
+    for (const size of IMAGE_SIZES) {
+      const entry = sizes[String(size)];
+      if ((entry == null ? void 0 : entry.url) && entry.width) {
+        parts.push(`${entry.url} ${entry.width}w`);
+      }
+    }
+  }
+  if (image.url && image.width) {
+    parts.push(`${image.url} ${image.width}w`);
+  }
+  return parts.join(", ");
+}
+function getImagePlaceholderStyle(image, options) {
+  var _a, _b, _c;
+  const type = (_a = options == null ? void 0 : options.type) != null ? _a : "blur";
+  const paletteColor = (_b = options == null ? void 0 : options.paletteColor) != null ? _b : "muted";
+  if (type === "none") return {};
+  const color = (_c = image.palette) == null ? void 0 : _c[paletteColor];
+  if (type === "blur") {
+    const lqip = image.lqip;
+    if (lqip) {
+      return {
+        backgroundImage: `url(${lqip})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      };
+    }
+    if (color) {
+      return { backgroundColor: color };
+    }
+    return {};
+  }
+  if (color) {
+    return { backgroundColor: color };
+  }
+  return {};
+}
+
+// src/ui/Image/index.tsx
+function Image({
+  image,
+  width,
+  dpr = 1,
+  placeholder: placeholderProp,
+  className,
+  style,
+  imgClassName,
+  imgStyle,
+  sizes,
+  loading: loadingProp,
+  onLoad,
+  objectFit = "cover",
+  priority = false,
+  fill = false,
+  imageRendering
+}) {
+  var _a, _b;
+  const [loaded, setLoaded] = (0, import_react6.useState)(false);
+  const firedRef = (0, import_react6.useRef)(false);
+  const isPixelRendering = imageRendering === "pixelated" || imageRendering === "crisp-edges";
+  const placeholder = placeholderProp != null ? placeholderProp : isPixelRendering ? "none" : "blur";
+  const loading = priority ? "eager" : loadingProp != null ? loadingProp : "lazy";
+  const aspectRatio = !fill && image.width && image.height ? `${image.width} / ${image.height}` : void 0;
+  const srcSet = getImageSrcSet(image);
+  const src = (_a = image.url) != null ? _a : void 0;
+  const hasLqip = placeholder === "blur" && !!image.lqip;
+  const placeholderStyle = getImagePlaceholderStyle(image, {
+    type: placeholder
+  });
+  const placeholderColor = !hasLqip && "backgroundColor" in placeholderStyle ? placeholderStyle.backgroundColor : void 0;
+  const fireLoad = (0, import_react6.useCallback)(() => {
+    if (firedRef.current) return;
+    firedRef.current = true;
+    setLoaded(true);
+    onLoad == null ? void 0 : onLoad();
+  }, [onLoad]);
+  const imgRef = (0, import_react6.useCallback)(
+    (node) => {
+      if (node && node.complete && node.naturalWidth > 0) {
+        fireLoad();
+      }
+    },
+    [fireLoad]
+  );
+  const containerStyle = __spreadValues(__spreadValues(__spreadValues({
+    position: "relative",
+    overflow: "hidden"
+  }, fill ? { width: "100%", height: "100%" } : {}), aspectRatio ? { aspectRatio } : {}), style);
+  const overlayBase = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    opacity: loaded ? 0 : 1,
+    transition: "opacity 0.3s ease",
+    pointerEvents: "none"
+  };
+  const mainImgStyle = __spreadValues(__spreadProps(__spreadValues({
+    display: "block",
+    width: "100%",
+    height: "100%",
+    objectFit
+  }, imageRendering ? { imageRendering } : {}), {
+    opacity: loaded ? 1 : 0,
+    transition: "opacity 0.3s ease"
+  }), imgStyle);
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ import_react6.default.createElement(
+    "img",
+    {
+      "aria-hidden": true,
+      alt: "",
+      src: image.lqip,
+      style: __spreadProps(__spreadValues({}, overlayBase), {
+        display: "block",
+        objectFit,
+        filter: "blur(20px)",
+        transform: "scale(1.1)"
+      })
+    }
+  ), placeholderColor && /* @__PURE__ */ import_react6.default.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      style: __spreadProps(__spreadValues({}, overlayBase), {
+        backgroundColor: placeholderColor
+      })
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(
+    "img",
+    {
+      ref: imgRef,
+      alt: (_b = image.alt) != null ? _b : "",
+      src,
+      srcSet: srcSet || void 0,
+      sizes,
+      width: width ? width * dpr : void 0,
+      loading,
+      decoding: "async",
+      fetchPriority: priority ? "high" : void 0,
+      onLoad: fireLoad,
+      className: imgClassName,
+      style: mainImgStyle
+    }
+  ));
+}
+
 // src/ui/Flow/node-types-factory.tsx
 function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode) {
   const types = {};
   types.dynamic = ((props) => {
+    var _a;
     const d = props.data;
     const typeDef = nodeTypeDefsMap == null ? void 0 : nodeTypeDefsMap.get(d.nodeTypeSlug);
     const CustomRenderer = nodeRenderers == null ? void 0 : nodeRenderers[d.nodeTypeSlug];
-    const defaultRender = typeDef ? /* @__PURE__ */ import_react5.default.createElement(
+    const defaultRender = typeDef ? /* @__PURE__ */ import_react7.default.createElement(
       EnhancedDynamicNode,
       {
         data: d,
@@ -700,7 +1212,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         width: props.width,
         height: props.height
       }
-    ) : /* @__PURE__ */ import_react5.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    ) : /* @__PURE__ */ import_react7.default.createElement(DefaultDynamicNode, __spreadValues({}, props));
     const slotProps = {
       id: props.id,
       nodeTypeSlug: d.nodeTypeSlug,
@@ -712,14 +1224,35 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
       height: props.height,
       defaultRender
     };
-    let content = CustomRenderer ? /* @__PURE__ */ import_react5.default.createElement(CustomRenderer, __spreadValues({}, slotProps)) : defaultRender;
+    let content;
+    if (CustomRenderer) {
+      content = /* @__PURE__ */ import_react7.default.createElement(CustomRenderer, __spreadValues({}, slotProps));
+    } else if (d.nodeTypeSlug === "image") {
+      const imageVal = (_a = d.fields) == null ? void 0 : _a.image;
+      if (imageVal && typeof imageVal === "object" && "url" in imageVal) {
+        content = /* @__PURE__ */ import_react7.default.createElement(
+          Image,
+          {
+            image: imageVal,
+            width: props.width,
+            fill: true,
+            priority: true,
+            objectFit: "contain"
+          }
+        );
+      } else {
+        content = defaultRender;
+      }
+    } else {
+      content = defaultRender;
+    }
     if (renderNode) {
       const result = renderNode(slotProps, content);
       if (result !== null) content = result;
     }
     if (nodeWrapper) {
       const Wrapper = nodeWrapper;
-      content = /* @__PURE__ */ import_react5.default.createElement(
+      content = /* @__PURE__ */ import_react7.default.createElement(
         Wrapper,
         {
           id: props.id,
@@ -736,7 +1269,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
   types.frame = frameRenderer ? ((props) => {
     const d = props.data;
     const Renderer = frameRenderer;
-    return /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react7.default.createElement(
       Renderer,
       {
         id: props.id,
@@ -760,7 +1293,7 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
     types[slug] = ((props) => {
       var _a;
       const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
-      return /* @__PURE__ */ import_react5.default.createElement(
+      return /* @__PURE__ */ import_react7.default.createElement(
         Renderer,
         {
           id: props.id,
@@ -779,10 +1312,10 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
 }
 
 // src/ui/Flow/edge-styles.ts
-var import_react6 = require("@xyflow/react");
+var import_react8 = require("@xyflow/react");
 function toMarkerType(value) {
-  if (value === "arrow") return import_react6.MarkerType.Arrow;
-  if (value === "arrowclosed") return import_react6.MarkerType.ArrowClosed;
+  if (value === "arrow") return import_react8.MarkerType.Arrow;
+  if (value === "arrowclosed") return import_react8.MarkerType.ArrowClosed;
   return void 0;
 }
 var EDGE_TYPE_MAP = {
@@ -826,8 +1359,8 @@ function applyEdgeStyles(edges, edgeTypeDefsMap) {
 }
 
 // src/ui/Flow/focus-handler.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_react8 = require("@xyflow/react");
+var import_react9 = __toESM(require("react"), 1);
+var import_react10 = require("@xyflow/react");
 function clampViewport(vp, cw, ch, extent) {
   const left = -vp.x / vp.zoom;
   const right = (cw - vp.x) / vp.zoom;
@@ -853,16 +1386,16 @@ function FocusHandler({
   minZoomProp,
   onInitialFit
 }) {
-  const { setViewport } = (0, import_react8.useReactFlow)();
-  const store = (0, import_react8.useStoreApi)();
-  const containerRef = import_react7.default.useRef(null);
+  const { setViewport } = (0, import_react10.useReactFlow)();
+  const store = (0, import_react10.useStoreApi)();
+  const containerRef = import_react9.default.useRef(null);
   const boundsKey = `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`;
-  const boundsRef = import_react7.default.useRef(bounds);
+  const boundsRef = import_react9.default.useRef(bounds);
   boundsRef.current = bounds;
-  const [containerSize, setContainerSize] = import_react7.default.useState({ w: 0, h: 0 });
-  const prevBoundsKeyRef = import_react7.default.useRef(null);
-  const prevSizeRef = import_react7.default.useRef({ w: 0, h: 0 });
-  import_react7.default.useEffect(() => {
+  const [containerSize, setContainerSize] = import_react9.default.useState({ w: 0, h: 0 });
+  const prevBoundsKeyRef = import_react9.default.useRef(null);
+  const prevSizeRef = import_react9.default.useRef({ w: 0, h: 0 });
+  import_react9.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -874,7 +1407,7 @@ function FocusHandler({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  import_react7.default.useEffect(() => {
+  import_react9.default.useEffect(() => {
     if (containerSize.w === 0 || containerSize.h === 0) return;
     const prevKey = prevBoundsKeyRef.current;
     const prevSize = prevSizeRef.current;
@@ -941,7 +1474,7 @@ function FocusHandler({
     store,
     onInitialFit
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
       ref: containerRef,
@@ -956,6 +1489,7 @@ function FocusHandler({
 }
 
 // src/ui/Flow/FlowRenderer.tsx
+var NullFrameRenderer = () => null;
 function FlowRenderer({
   data,
   className,
@@ -973,6 +1507,7 @@ function FlowRenderer({
   onNodeMouseLeave,
   onEdgeClick,
   frameRenderer,
+  hideFrames = false,
   edgeRenderers,
   nodeWrapper,
   controls,
@@ -993,33 +1528,34 @@ function FlowRenderer({
   maxZoom: maxZoomProp
 }) {
   var _a, _b;
-  const nodeTypeDefsMap = import_react9.default.useMemo(() => {
+  const resolvedFrameRenderer = hideFrames ? NullFrameRenderer : frameRenderer;
+  const nodeTypeDefsMap = import_react11.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_react9.default.useMemo(() => {
+  const edgeTypeDefsMap = import_react11.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_react9.default.useMemo(
+  const nodeTypes = import_react11.default.useMemo(
     () => createNodeTypes(
       nodeRenderers,
       nodeTypeDefsMap,
-      frameRenderer,
+      resolvedFrameRenderer,
       nodeWrapper,
       renderNode
     ),
-    [nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode]
+    [nodeRenderers, nodeTypeDefsMap, resolvedFrameRenderer, nodeWrapper, renderNode]
   );
-  const customEdgeTypes = import_react9.default.useMemo(
+  const customEdgeTypes = import_react11.default.useMemo(
     () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
     [edgeRenderers, edgeTypeDefsMap]
   );
-  const mergedCSS = import_react9.default.useMemo(() => {
+  const mergedCSS = import_react11.default.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return "";
-    return nodeTypeDefs.filter((d) => d.customCSS).map((d) => d.customCSS).join("\n");
+    return nodeTypeDefs.filter((d) => d.customCSS).map((d) => sanitizeCSS(d.customCSS, `flow-node--${d.slug}`)).join("\n");
   }, [nodeTypeDefs]);
-  const styledEdges = import_react9.default.useMemo(() => {
+  const styledEdges = import_react11.default.useMemo(() => {
     var _a2;
     let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
     if (edgeRenderers) {
@@ -1033,7 +1569,7 @@ function FlowRenderer({
     }
     return edges;
   }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
-  const translateExtent = import_react9.default.useMemo(() => {
+  const translateExtent = import_react11.default.useMemo(() => {
     if (translateExtentProp) return translateExtentProp;
     const es = clampBounds != null ? clampBounds : bounds;
     if (!es) return void 0;
@@ -1044,16 +1580,16 @@ function FlowRenderer({
     ];
   }, [translateExtentProp, clampBounds, bounds, focusPadding]);
   const boundsKey = bounds ? `${bounds.x},${bounds.y},${bounds.width},${bounds.height}` : "";
-  const extentReadyRef = import_react9.default.useRef(false);
-  const expandedExtentRef = import_react9.default.useRef(void 0);
-  const prevBoundsKeyRef = import_react9.default.useRef(boundsKey);
+  const extentReadyRef = import_react11.default.useRef(false);
+  const expandedExtentRef = import_react11.default.useRef(void 0);
+  const prevBoundsKeyRef = import_react11.default.useRef(boundsKey);
   if (prevBoundsKeyRef.current !== boundsKey) {
     prevBoundsKeyRef.current = boundsKey;
     extentReadyRef.current = false;
     expandedExtentRef.current = void 0;
   }
-  const [, rerender] = import_react9.default.useReducer((x) => x + 1, 0);
-  const handleInitialFit = import_react9.default.useCallback(
+  const [, rerender] = import_react11.default.useReducer((x) => x + 1, 0);
+  const handleInitialFit = import_react11.default.useCallback(
     (expandedExtent) => {
       extentReadyRef.current = true;
       expandedExtentRef.current = expandedExtent;
@@ -1064,7 +1600,7 @@ function FlowRenderer({
   const activeExtent = !bounds || extentReadyRef.current ? (_a = expandedExtentRef.current) != null ? _a : translateExtent : void 0;
   if (!data) return null;
   const resolvedDefaultViewport = defaultViewportProp != null ? defaultViewportProp : !fitView && data.viewport ? data.viewport : void 0;
-  return /* @__PURE__ */ import_react9.default.createElement(import_react10.ReactFlowProvider, null, /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement(import_react12.ReactFlowProvider, null, /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
       className,
@@ -1074,8 +1610,8 @@ function FlowRenderer({
         background: "transparent"
       }, style)
     },
-    /* @__PURE__ */ import_react9.default.createElement(
-      import_react10.ReactFlow,
+    /* @__PURE__ */ import_react11.default.createElement(
+      import_react12.ReactFlow,
       {
         nodes: (_b = data.nodes) != null ? _b : [],
         edges: styledEdges,
@@ -1104,16 +1640,16 @@ function FlowRenderer({
         maxZoom: maxZoomProp,
         proOptions: { hideAttribution: true }
       },
-      mergedCSS && /* @__PURE__ */ import_react9.default.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
-      background && /* @__PURE__ */ import_react9.default.createElement(import_react10.Background, null),
-      controls && /* @__PURE__ */ import_react9.default.createElement(import_react10.Controls, null),
-      minimap && /* @__PURE__ */ import_react9.default.createElement(
-        import_react10.MiniMap,
+      mergedCSS && /* @__PURE__ */ import_react11.default.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
+      background && /* @__PURE__ */ import_react11.default.createElement(import_react12.Background, null),
+      controls && /* @__PURE__ */ import_react11.default.createElement(import_react12.Controls, null),
+      minimap && /* @__PURE__ */ import_react11.default.createElement(
+        import_react12.MiniMap,
         {
           nodeColor: minimapNodeColor
         }
       ),
-      bounds && /* @__PURE__ */ import_react9.default.createElement(
+      bounds && /* @__PURE__ */ import_react11.default.createElement(
         FocusHandler,
         {
           bounds,
@@ -1131,4 +1667,68 @@ function FlowRenderer({
     )
   ));
 }
+
+// src/ui/Flow/FlowFrame.tsx
+var import_react13 = __toESM(require("react"), 1);
+function FlowFrame(_a) {
+  var _b = _a, {
+    client,
+    slug,
+    id,
+    frameId,
+    loading = null,
+    error: renderError,
+    onDataReady
+  } = _b, rendererProps = __objRest(_b, [
+    "client",
+    "slug",
+    "id",
+    "frameId",
+    "loading",
+    "error",
+    "onDataReady"
+  ]);
+  const { data, nodeTypeDefs, edgeTypeDefs, flow, isLoading, error } = useFlow({
+    client,
+    slug,
+    id
+  });
+  const frameData = (0, import_react13.useMemo)(
+    () => data ? getFrameData(data, frameId) : void 0,
+    [data, frameId]
+  );
+  const onDataReadyRef = (0, import_react13.useRef)(onDataReady);
+  onDataReadyRef.current = onDataReady;
+  (0, import_react13.useEffect)(() => {
+    var _a2;
+    if (frameData && flow) {
+      (_a2 = onDataReadyRef.current) == null ? void 0 : _a2.call(onDataReadyRef, frameData, flow);
+    }
+  }, [frameData, flow]);
+  if (process.env.NODE_ENV !== "production" && !slug && !id) {
+    console.warn('[FlowFrame] Either "slug" or "id" must be provided.');
+  }
+  if (isLoading) return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, loading);
+  if (error) return renderError ? /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, renderError(error)) : null;
+  if (!frameData) {
+    if (process.env.NODE_ENV !== "production" && data) {
+      const frames = data.nodes.filter(isFrameNode).map((n) => n.id);
+      console.warn(
+        `[FlowFrame] Frame "${frameId}" not found. Available frames: ${frames.join(", ") || "(none)"}`
+      );
+    }
+    return null;
+  }
+  return /* @__PURE__ */ import_react13.default.createElement(
+    FlowRenderer,
+    __spreadProps(__spreadValues({}, rendererProps), {
+      data: frameData.data,
+      nodeTypeDefs,
+      edgeTypeDefs,
+      bounds: frameData.fitBounds,
+      clampBounds: frameData.clampBounds,
+      hideFrames: true
+    })
+  );
+}
 //# sourceMappingURL=flow.cjs.map