@01.software/sdk 0.5.1 → 0.5.3

package/dist/ui/flow.js

@@ -18,6 +18,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 __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -102,6 +114,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;
@@ -134,49 +183,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 = 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 = 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 = 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 = useMemo(() => {
@@ -201,44 +226,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))
     ]);
   });
 }
@@ -297,15 +299,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);
+        }
       }
     }
   }
@@ -380,16 +395,75 @@ function getFrameData(data, frameId) {
 // src/ui/Flow/template-compiler.ts
 import React from "react";
 import { transform } from "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
+import { useSyncExternalStore } from "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((module) => {
+    _state = { status: "ready", module };
+    _notify();
+  }).catch(() => {
+    _state = { status: "failed", module: null };
+  });
+}
+function useQuickJS() {
+  return 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*\./,
@@ -409,79 +483,212 @@ 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|absolute/i.test(v)) 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 React.createElement(
+      React.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 React.createElement(
+      React.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 React.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 renderer2 = rendererCache.get(cacheKey);
+    rendererCache.delete(cacheKey);
+    rendererCache.set(cacheKey, renderer2);
+    return makeReactFC(renderer2, qjs);
+  }
+  let jsCode;
   try {
-    const { code: jsCode } = transform(code, {
+    const result = 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(React);
-    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);
+  if (rendererCache.size >= MAX_CACHE_SIZE) {
+    const oldest = rendererCache.keys().next().value;
+    if (oldest) rendererCache.delete(oldest);
+  }
+  rendererCache.set(cacheKey, renderer);
+  return makeReactFC(renderer, qjs);
 }
 function clearTemplateCache() {
-  componentCache.clear();
+  rendererCache.clear();
 }
 
-// src/ui/Flow/FlowRenderer.tsx
-import React5 from "react";
-import {
-  ReactFlow,
-  ReactFlowProvider,
-  Background,
-  Controls,
-  MiniMap
-} from "@xyflow/react";
-
-// src/ui/Flow/node-types-factory.tsx
-import React3 from "react";
-
 // src/ui/Flow/node-renderers.tsx
 import React2 from "react";
 function sanitizeUrl(url) {
@@ -557,7 +764,7 @@ var TemplateErrorBoundary = class extends React2.Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ React2.createElement("div", { style: { padding: 8, fontSize: 11, color: "#ef4444" } }, /* @__PURE__ */ React2.createElement("strong", null, "Render error"), /* @__PURE__ */ React2.createElement("pre", { style: { fontSize: 10, whiteSpace: "pre-wrap" } }, this.state.error.message));
+      return /* @__PURE__ */ React2.createElement("div", { style: { padding: 8, fontSize: 11, color: "#ef4444" } }, /* @__PURE__ */ React2.createElement("strong", null, "Render error"), /* @__PURE__ */ React2.createElement("pre", { style: { fontSize: 10, whiteSpace: "pre-wrap" } }, process.env.NODE_ENV === "development" ? this.state.error.message : "Template render failed"));
     }
     return this.props.children;
   }
@@ -568,6 +775,7 @@ function EnhancedDynamicNode({
   width,
   height
 }) {
+  useQuickJS();
   if (typeDef.template) {
     const Component = compileTemplate(typeDef.template, typeDef.slug);
     if (Component) {
@@ -594,6 +802,7 @@ function EnhancedDynamicNode({
   return /* @__PURE__ */ React2.createElement(
     "div",
     {
+      className: `flow-node flow-node--${typeDef.slug}`,
       style: {
         width: "100%",
         height: "100%",
@@ -646,14 +855,248 @@ 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
+import postcss from "postcss";
+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/;
+function sanitizeCSS(css, scopeClass) {
+  let root;
+  try {
+    root = postcss.parse(css);
+  } catch (e) {
+    return "";
+  }
+  root.walkAtRules((node) => {
+    if (!ALLOWED_AT_RULES.has(node.name.toLowerCase())) {
+      node.remove();
+    }
+  });
+  root.walkDecls((node) => {
+    if (BLOCKED_VALUE_PATTERNS.some((p) => p.test(node.value))) {
+      node.remove();
+    }
+  });
+  root.walkRules((rule) => {
+    rule.selectors = rule.selectors.filter((s) => !DANGEROUS_SELECTOR.test(s));
+    if (!rule.selectors.length) {
+      rule.remove();
+      return;
+    }
+    if (scopeClass) {
+      const safeScopeClass = scopeClass.replace(/[{}()[\];,'"\\<>]/g, "");
+      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
+import React6 from "react";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap
+} from "@xyflow/react";
+
+// src/ui/Flow/node-types-factory.tsx
+import React4 from "react";
+
+// src/ui/Image/index.tsx
+import React3, { useCallback, useRef, useState } from "react";
+
+// 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] = useState(false);
+  const firedRef = 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 = useCallback(() => {
+    if (firedRef.current) return;
+    firedRef.current = true;
+    setLoaded(true);
+    onLoad == null ? void 0 : onLoad();
+  }, [onLoad]);
+  const imgRef = 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__ */ React3.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ React3.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__ */ React3.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      style: __spreadProps(__spreadValues({}, overlayBase), {
+        backgroundColor: placeholderColor
+      })
+    }
+  ), /* @__PURE__ */ React3.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__ */ React3.createElement(
+    const defaultRender = typeDef ? /* @__PURE__ */ React4.createElement(
       EnhancedDynamicNode,
       {
         data: d,
@@ -661,7 +1104,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         width: props.width,
         height: props.height
       }
-    ) : /* @__PURE__ */ React3.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    ) : /* @__PURE__ */ React4.createElement(DefaultDynamicNode, __spreadValues({}, props));
     const slotProps = {
       id: props.id,
       nodeTypeSlug: d.nodeTypeSlug,
@@ -673,14 +1116,35 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
       height: props.height,
       defaultRender
     };
-    let content = CustomRenderer ? /* @__PURE__ */ React3.createElement(CustomRenderer, __spreadValues({}, slotProps)) : defaultRender;
+    let content;
+    if (CustomRenderer) {
+      content = /* @__PURE__ */ React4.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__ */ React4.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__ */ React3.createElement(
+      content = /* @__PURE__ */ React4.createElement(
         Wrapper,
         {
           id: props.id,
@@ -697,7 +1161,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
   types.frame = frameRenderer ? ((props) => {
     const d = props.data;
     const Renderer = frameRenderer;
-    return /* @__PURE__ */ React3.createElement(
+    return /* @__PURE__ */ React4.createElement(
       Renderer,
       {
         id: props.id,
@@ -721,7 +1185,7 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
     types[slug] = ((props) => {
       var _a;
       const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
-      return /* @__PURE__ */ React3.createElement(
+      return /* @__PURE__ */ React4.createElement(
         Renderer,
         {
           id: props.id,
@@ -787,7 +1251,7 @@ function applyEdgeStyles(edges, edgeTypeDefsMap) {
 }
 
 // src/ui/Flow/focus-handler.tsx
-import React4 from "react";
+import React5 from "react";
 import { useReactFlow, useStoreApi } from "@xyflow/react";
 function clampViewport(vp, cw, ch, extent) {
   const left = -vp.x / vp.zoom;
@@ -816,14 +1280,14 @@ function FocusHandler({
 }) {
   const { setViewport } = useReactFlow();
   const store = useStoreApi();
-  const containerRef = React4.useRef(null);
+  const containerRef = React5.useRef(null);
   const boundsKey = `${bounds.x},${bounds.y},${bounds.width},${bounds.height}`;
-  const boundsRef = React4.useRef(bounds);
+  const boundsRef = React5.useRef(bounds);
   boundsRef.current = bounds;
-  const [containerSize, setContainerSize] = React4.useState({ w: 0, h: 0 });
-  const prevBoundsKeyRef = React4.useRef(null);
-  const prevSizeRef = React4.useRef({ w: 0, h: 0 });
-  React4.useEffect(() => {
+  const [containerSize, setContainerSize] = React5.useState({ w: 0, h: 0 });
+  const prevBoundsKeyRef = React5.useRef(null);
+  const prevSizeRef = React5.useRef({ w: 0, h: 0 });
+  React5.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
@@ -835,7 +1299,7 @@ function FocusHandler({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (containerSize.w === 0 || containerSize.h === 0) return;
     const prevKey = prevBoundsKeyRef.current;
     const prevSize = prevSizeRef.current;
@@ -902,7 +1366,7 @@ function FocusHandler({
     store,
     onInitialFit
   ]);
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     "div",
     {
       ref: containerRef,
@@ -917,6 +1381,7 @@ function FocusHandler({
 }
 
 // src/ui/Flow/FlowRenderer.tsx
+var NullFrameRenderer = () => null;
 function FlowRenderer({
   data,
   className,
@@ -934,6 +1399,7 @@ function FlowRenderer({
   onNodeMouseLeave,
   onEdgeClick,
   frameRenderer,
+  hideFrames = false,
   edgeRenderers,
   nodeWrapper,
   controls,
@@ -954,33 +1420,34 @@ function FlowRenderer({
   maxZoom: maxZoomProp
 }) {
   var _a, _b;
-  const nodeTypeDefsMap = React5.useMemo(() => {
+  const resolvedFrameRenderer = hideFrames ? NullFrameRenderer : frameRenderer;
+  const nodeTypeDefsMap = React6.useMemo(() => {
     if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return void 0;
     return new Map(nodeTypeDefs.map((d) => [d.slug, d]));
   }, [nodeTypeDefs]);
-  const edgeTypeDefsMap = React5.useMemo(() => {
+  const edgeTypeDefsMap = React6.useMemo(() => {
     if (!(edgeTypeDefs == null ? void 0 : edgeTypeDefs.length)) return void 0;
     return new Map(edgeTypeDefs.map((d) => [d.slug, d]));
   }, [edgeTypeDefs]);
-  const nodeTypes = React5.useMemo(
+  const nodeTypes = React6.useMemo(
     () => createNodeTypes(
       nodeRenderers,
       nodeTypeDefsMap,
-      frameRenderer,
+      resolvedFrameRenderer,
       nodeWrapper,
       renderNode
     ),
-    [nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode]
+    [nodeRenderers, nodeTypeDefsMap, resolvedFrameRenderer, nodeWrapper, renderNode]
   );
-  const customEdgeTypes = React5.useMemo(
+  const customEdgeTypes = React6.useMemo(
     () => createEdgeTypes(edgeRenderers, edgeTypeDefsMap),
     [edgeRenderers, edgeTypeDefsMap]
   );
-  const mergedCSS = React5.useMemo(() => {
+  const mergedCSS = React6.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 = React5.useMemo(() => {
+  const styledEdges = React6.useMemo(() => {
     var _a2;
     let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
     if (edgeRenderers) {
@@ -994,7 +1461,7 @@ function FlowRenderer({
     }
     return edges;
   }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
-  const translateExtent = React5.useMemo(() => {
+  const translateExtent = React6.useMemo(() => {
     if (translateExtentProp) return translateExtentProp;
     const es = clampBounds != null ? clampBounds : bounds;
     if (!es) return void 0;
@@ -1005,16 +1472,16 @@ function FlowRenderer({
     ];
   }, [translateExtentProp, clampBounds, bounds, focusPadding]);
   const boundsKey = bounds ? `${bounds.x},${bounds.y},${bounds.width},${bounds.height}` : "";
-  const extentReadyRef = React5.useRef(false);
-  const expandedExtentRef = React5.useRef(void 0);
-  const prevBoundsKeyRef = React5.useRef(boundsKey);
+  const extentReadyRef = React6.useRef(false);
+  const expandedExtentRef = React6.useRef(void 0);
+  const prevBoundsKeyRef = React6.useRef(boundsKey);
   if (prevBoundsKeyRef.current !== boundsKey) {
     prevBoundsKeyRef.current = boundsKey;
     extentReadyRef.current = false;
     expandedExtentRef.current = void 0;
   }
-  const [, rerender] = React5.useReducer((x) => x + 1, 0);
-  const handleInitialFit = React5.useCallback(
+  const [, rerender] = React6.useReducer((x) => x + 1, 0);
+  const handleInitialFit = React6.useCallback(
     (expandedExtent) => {
       extentReadyRef.current = true;
       expandedExtentRef.current = expandedExtent;
@@ -1025,7 +1492,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__ */ React5.createElement(ReactFlowProvider, null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(ReactFlowProvider, null, /* @__PURE__ */ React6.createElement(
     "div",
     {
       className,
@@ -1035,7 +1502,7 @@ function FlowRenderer({
         background: "transparent"
       }, style)
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       ReactFlow,
       {
         nodes: (_b = data.nodes) != null ? _b : [],
@@ -1065,16 +1532,16 @@ function FlowRenderer({
         maxZoom: maxZoomProp,
         proOptions: { hideAttribution: true }
       },
-      mergedCSS && /* @__PURE__ */ React5.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
-      background && /* @__PURE__ */ React5.createElement(Background, null),
-      controls && /* @__PURE__ */ React5.createElement(Controls, null),
-      minimap && /* @__PURE__ */ React5.createElement(
+      mergedCSS && /* @__PURE__ */ React6.createElement("style", { dangerouslySetInnerHTML: { __html: mergedCSS } }),
+      background && /* @__PURE__ */ React6.createElement(Background, null),
+      controls && /* @__PURE__ */ React6.createElement(Controls, null),
+      minimap && /* @__PURE__ */ React6.createElement(
         MiniMap,
         {
           nodeColor: minimapNodeColor
         }
       ),
-      bounds && /* @__PURE__ */ React5.createElement(
+      bounds && /* @__PURE__ */ React6.createElement(
         FocusHandler,
         {
           bounds,
@@ -1092,18 +1559,89 @@ function FlowRenderer({
     )
   ));
 }
+
+// src/ui/Flow/FlowFrame.tsx
+import React7, { useMemo as useMemo3, useEffect, useRef as useRef2 } from "react";
+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 = useMemo3(
+    () => data ? getFrameData(data, frameId) : void 0,
+    [data, frameId]
+  );
+  const onDataReadyRef = useRef2(onDataReady);
+  onDataReadyRef.current = onDataReady;
+  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__ */ React7.createElement(React7.Fragment, null, loading);
+  if (error) return renderError ? /* @__PURE__ */ React7.createElement(React7.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__ */ React7.createElement(
+    FlowRenderer,
+    __spreadProps(__spreadValues({}, rendererProps), {
+      data: frameData.data,
+      nodeTypeDefs,
+      edgeTypeDefs,
+      bounds: frameData.fitBounds,
+      clampBounds: frameData.clampBounds,
+      hideFrames: true
+    })
+  );
+}
 export {
   BUILT_IN_EDGE_TYPES,
   BUILT_IN_NODE_TYPES,
+  FlowFrame,
   FlowRenderer,
   clearTemplateCache,
   compileTemplate,
+  getBooleanField,
   getFrameData,
   getFrames,
+  getImageField,
   getNodeBounds,
+  getNumberField,
+  getTextField,
   isDynamicNode,
   isFrameNode,
   prefetchFlow,
+  renderFieldValue,
+  sanitizeCSS,
   useFlow,
   useFlowData
 };