@01.software/sdk 0.32.0 → 0.34.0

package/dist/ui/canvas.cjs

@@ -31,8 +31,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/ui/Canvas/index.tsx
 var Canvas_exports = {};
 __export(Canvas_exports, {
-  BUILT_IN_EDGE_TYPES: () => BUILT_IN_EDGE_TYPES,
-  BUILT_IN_NODE_TYPES: () => BUILT_IN_NODE_TYPES,
   CanvasFrame: () => CanvasFrame,
   CanvasRenderer: () => CanvasRenderer,
   clearTemplateCache: () => clearTemplateCache,
@@ -49,9 +47,12 @@ __export(Canvas_exports, {
   prefetchCanvas: () => prefetchCanvas,
   renderFieldValue: () => renderFieldValue,
   sanitizeCSS: () => sanitizeCSS,
+  toEdgeTypeDef: () => toEdgeTypeDef,
+  toNodeTypeDef: () => toNodeTypeDef,
   useCanvas: () => useCanvas,
   useCanvasData: () => useCanvasData,
-  useQuickJS: () => useQuickJS
+  useQuickJS: () => useQuickJS,
+  validateTenantCSS: () => validateTenantCSS
 });
 module.exports = __toCommonJS(Canvas_exports);
 
@@ -63,44 +64,6 @@ function isFrameNode(node) {
   return node.type === "frame";
 }
 
-// src/ui/Canvas/built-in-node-types.ts
-var BUILT_IN_NODE_TYPES = [
-  {
-    slug: "text",
-    name: "Text",
-    color: "#e5e7eb",
-    defaultSize: { width: 200, height: 200 },
-    fields: [{ name: "body", label: "Body", fieldType: "textarea" }]
-  },
-  {
-    slug: "image",
-    name: "Image",
-    color: "#e5e7eb",
-    transparentBackground: true,
-    defaultSize: { width: 200, height: 200 },
-    fields: [
-      { name: "image", label: "Image", fieldType: "image" },
-      { name: "alt", label: "Alt Text", fieldType: "text" },
-      { name: "caption", label: "Caption", fieldType: "text" }
-    ]
-  }
-];
-
-// src/ui/Canvas/built-in-edge-types.ts
-var BUILT_IN_EDGE_TYPES = [
-  {
-    slug: "default",
-    name: "Default",
-    color: "",
-    strokeWidth: 2,
-    animated: false,
-    lineStyle: "default",
-    markerStart: "none",
-    markerEnd: "arrow",
-    fields: []
-  }
-];
-
 // src/ui/Canvas/useCanvas.ts
 var import_react_query = require("@tanstack/react-query");
 var import_react = require("react");
@@ -154,7 +117,7 @@ function edgeTypesQueryOptions(client) {
   };
 }
 
-// src/ui/Canvas/useCanvas.ts
+// src/ui/Canvas/catalog-mappers.ts
 function toNodeTypeDef(doc) {
   return {
     slug: String(doc.slug ?? ""),
@@ -165,7 +128,10 @@ function toNodeTypeDef(doc) {
       height: 200
     },
     fields: Array.isArray(doc.fields) ? doc.fields : [],
-    transparentBackground: Boolean(doc.transparentBackground),
+    editorIntent: doc.editorIntent === "text" || doc.editorIntent === "image" ? doc.editorIntent : void 0,
+    transparentBackground: Boolean(
+      doc.hasTransparentBackground ?? doc.transparentBackground
+    ),
     template: doc.template ?? null,
     customCSS: doc.customCSS ?? null
   };
@@ -176,13 +142,16 @@ function toEdgeTypeDef(doc) {
     name: String(doc.title ?? ""),
     color: String(doc.color ?? ""),
     strokeWidth: doc.strokeWidth ?? 2,
-    animated: doc.animated ?? false,
+    animated: doc.isAnimated ?? doc.animated ?? false,
     lineStyle: String(doc.lineStyle ?? "default"),
     markerStart: String(doc.markerStart ?? "none"),
     markerEnd: String(doc.markerEnd ?? "arrow"),
-    fields: Array.isArray(doc.fields) ? doc.fields : []
+    fields: Array.isArray(doc.fields) ? doc.fields : [],
+    isDefaultEdge: Boolean(doc.isDefaultEdge)
   };
 }
+
+// src/ui/Canvas/useCanvas.ts
 function useCanvas(options) {
   const { client, queryClient, slug, id, enabled = true } = options;
   const hasIdentifier = !!(slug || id);
@@ -208,16 +177,10 @@ function useCanvas(options) {
     queryClient
   );
   const nodeTypeDefs = (0, import_react.useMemo)(() => {
-    const apiDefs = (nodeTypesQuery.data ?? []).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];
+    return (nodeTypesQuery.data ?? []).map(toNodeTypeDef);
   }, [nodeTypesQuery.data]);
   const edgeTypeDefs = (0, import_react.useMemo)(() => {
-    const apiDefs = (edgeTypesQuery.data ?? []).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];
+    return (edgeTypesQuery.data ?? []).map(toEdgeTypeDef);
   }, [edgeTypesQuery.data]);
   const canvasDoc = canvasQuery.data;
   const canvasData = canvasDoc?.canvas;
@@ -249,11 +212,11 @@ var import_react2 = require("react");
 function useCanvasData(options) {
   const { data, nodeTypeDefs: inputNodeDefs, edgeTypeDefs: inputEdgeDefs } = options;
   const nodeTypeDefsMap = (0, import_react2.useMemo)(() => {
-    const allDefs = inputNodeDefs ?? BUILT_IN_NODE_TYPES;
+    const allDefs = inputNodeDefs ?? [];
     return new Map(allDefs.map((d) => [d.slug, d]));
   }, [inputNodeDefs]);
   const edgeTypeDefsMap = (0, import_react2.useMemo)(() => {
-    const allDefs = inputEdgeDefs ?? BUILT_IN_EDGE_TYPES;
+    const allDefs = inputEdgeDefs ?? [];
     return new Map(allDefs.map((d) => [d.slug, d]));
   }, [inputEdgeDefs]);
   const nodes = (0, import_react2.useMemo)(() => data?.nodes ?? [], [data?.nodes]);
@@ -685,9 +648,176 @@ function clearTemplateCache() {
 }
 
 // src/ui/Canvas/node-renderers.tsx
+var import_react6 = __toESM(require("react"), 1);
+
+// src/ui/Image/index.tsx
 var import_react5 = __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?.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) {
+  const type = options?.type ?? "blur";
+  const paletteColor = options?.paletteColor ?? "muted";
+  if (type === "none") return {};
+  const color = image.palette?.[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,
+  alt: altProp
+}) {
+  const [loaded, setLoaded] = (0, import_react5.useState)(false);
+  const firedRef = (0, import_react5.useRef)(false);
+  const isPixelRendering = imageRendering === "pixelated" || imageRendering === "crisp-edges";
+  const placeholder = placeholderProp ?? (isPixelRendering ? "none" : "blur");
+  const loading = priority ? "eager" : loadingProp ?? "lazy";
+  const aspectRatio = !fill && image.width && image.height ? `${image.width} / ${image.height}` : void 0;
+  const srcSet = getImageSrcSet(image);
+  const src = image.url ?? 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_react5.useCallback)(() => {
+    if (firedRef.current) return;
+    firedRef.current = true;
+    setLoaded(true);
+    onLoad?.();
+  }, [onLoad]);
+  const imgRef = (0, import_react5.useCallback)(
+    (node) => {
+      if (node && node.complete && node.naturalWidth > 0) {
+        fireLoad();
+      }
+    },
+    [fireLoad]
+  );
+  const containerStyle = {
+    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 = {
+    display: "block",
+    width: "100%",
+    height: "100%",
+    objectFit,
+    ...imageRendering ? { imageRendering } : {},
+    opacity: loaded ? 1 : 0,
+    transition: "opacity 0.3s ease",
+    ...imgStyle
+  };
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className, style: containerStyle }, hasLqip && /* @__PURE__ */ import_react5.default.createElement(
+    "img",
+    {
+      "aria-hidden": true,
+      alt: "",
+      src: image.lqip,
+      style: {
+        ...overlayBase,
+        display: "block",
+        objectFit,
+        filter: "blur(20px)",
+        transform: "scale(1.1)"
+      }
+    }
+  ), placeholderColor && /* @__PURE__ */ import_react5.default.createElement(
+    "div",
+    {
+      "aria-hidden": true,
+      style: {
+        ...overlayBase,
+        backgroundColor: placeholderColor
+      }
+    }
+  ), /* @__PURE__ */ import_react5.default.createElement(
+    "img",
+    {
+      ref: imgRef,
+      alt: altProp ?? image.alt ?? "",
+      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/Canvas/node-renderers.tsx
 function sanitizeUrl(url) {
   if (!url) return url;
+  if (url !== url.trim()) return void 0;
+  if (url.startsWith("/") && !url.startsWith("//") || url.startsWith("./")) {
+    return url;
+  }
   try {
     const parsed = new URL(url);
     if (parsed.protocol === "http:" || parsed.protocol === "https:") return url;
@@ -696,6 +826,18 @@ function sanitizeUrl(url) {
     return void 0;
   }
 }
+function sanitizeImageData(image, safeUrl) {
+  return {
+    ...image,
+    url: safeUrl,
+    sizes: image.sizes ? Object.fromEntries(
+      Object.entries(image.sizes).map(([name, size]) => [
+        name,
+        size ? { ...size, url: sanitizeUrl(size.url ?? void 0) } : size
+      ])
+    ) : image.sizes
+  };
+}
 function renderFieldValue(key, val, fieldDef) {
   if (val == null || val === "") return null;
   const fieldType = fieldDef?.fieldType;
@@ -703,7 +845,19 @@ function renderFieldValue(key, val, fieldDef) {
     const imgUrl = typeof val === "string" ? val : val?.url;
     const safeUrl = sanitizeUrl(imgUrl);
     if (!safeUrl) return null;
-    return /* @__PURE__ */ import_react5.default.createElement(
+    if (fieldType === "image" && typeof val === "object" && val !== null) {
+      return /* @__PURE__ */ import_react6.default.createElement(
+        Image,
+        {
+          key,
+          image: sanitizeImageData(val, safeUrl),
+          fill: true,
+          objectFit: "contain",
+          style: { flex: 1, minHeight: 0, width: "100%" }
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react6.default.createElement(
       "img",
       {
         key,
@@ -714,7 +868,7 @@ function renderFieldValue(key, val, fieldDef) {
       }
     );
   }
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
       key,
@@ -731,7 +885,7 @@ function renderFieldValue(key, val, fieldDef) {
 }
 function DefaultDynamicNode({ data }) {
   const d = data;
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
       style: {
@@ -744,7 +898,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_react5.default.Component {
+var TemplateErrorBoundary = class extends import_react6.default.Component {
   constructor() {
     super(...arguments);
     this.state = { error: null };
@@ -759,7 +913,7 @@ var TemplateErrorBoundary = class extends import_react5.default.Component {
   }
   render() {
     if (this.state.error) {
-      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 /* @__PURE__ */ import_react6.default.createElement("div", { style: { padding: 8, fontSize: 11, color: "#ef4444" } }, /* @__PURE__ */ import_react6.default.createElement("strong", null, "Render error"), /* @__PURE__ */ import_react6.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;
   }
@@ -774,13 +928,13 @@ function EnhancedDynamicNode({
   if (typeDef.template) {
     const Component = compileTemplate(typeDef.template, typeDef.slug);
     if (Component) {
-      return /* @__PURE__ */ import_react5.default.createElement(
+      return /* @__PURE__ */ import_react6.default.createElement(
         "div",
         {
           className: `flow-node flow-node--${typeDef.slug}${typeDef.transparentBackground ? " flow-node--transparent-bg" : ""}`,
           style: { width: "100%", height: "100%" }
         },
-        /* @__PURE__ */ import_react5.default.createElement(TemplateErrorBoundary, { resetKey: typeDef.template }, /* @__PURE__ */ import_react5.default.createElement(
+        /* @__PURE__ */ import_react6.default.createElement(TemplateErrorBoundary, { resetKey: typeDef.template }, /* @__PURE__ */ import_react6.default.createElement(
           Component,
           {
             fields: data.fields,
@@ -794,7 +948,7 @@ function EnhancedDynamicNode({
       );
     }
   }
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
       className: `flow-node flow-node--${typeDef.slug}`,
@@ -822,12 +976,14 @@ function DefaultFrameNode({ data }) {
     const m = baseColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
     if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`;
     const h6 = baseColor.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
-    if (h6) return `rgba(${parseInt(h6[1], 16)},${parseInt(h6[2], 16)},${parseInt(h6[3], 16)},${opacity})`;
+    if (h6)
+      return `rgba(${parseInt(h6[1], 16)},${parseInt(h6[2], 16)},${parseInt(h6[3], 16)},${opacity})`;
     const h3 = baseColor.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
-    if (h3) return `rgba(${parseInt(h3[1] + h3[1], 16)},${parseInt(h3[2] + h3[2], 16)},${parseInt(h3[3] + h3[3], 16)},${opacity})`;
+    if (h3)
+      return `rgba(${parseInt(h3[1] + h3[1], 16)},${parseInt(h3[2] + h3[2], 16)},${parseInt(h3[3] + h3[3], 16)},${opacity})`;
     return baseColor;
   })();
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement(
     "div",
     {
       style: {
@@ -838,7 +994,7 @@ function DefaultFrameNode({ data }) {
         border: borderStyle === "none" ? "none" : `2px ${borderStyle} rgba(128,128,128,0.3)`
       }
     },
-    /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react6.default.createElement(
       "div",
       {
         style: {
@@ -875,21 +1031,64 @@ function getBooleanField(fields, name) {
 
 // src/ui/Canvas/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 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 TENANT_CSS_BLOCKED_PATTERNS = [
+  { pattern: /<\/style/i, label: "</style" },
+  { pattern: /<script/i, label: "<script" },
+  { pattern: /@import/i, label: "@import" },
+  { pattern: /url\s*\(/i, label: "url(" }
+];
 var Z_INDEX_MAX = 9998;
+function normalizeCSSEscapes(value) {
+  return value.replace(
+    /\\(?:([0-9a-fA-F]{1,6})(?:\r\n|[ \t\r\n\f])?|([^\r\n\f]))/g,
+    (match, hex, escaped) => {
+      if (hex) {
+        const cp = parseInt(hex, 16);
+        if (Number.isNaN(cp) || cp > 1114111) return match;
+        try {
+          return String.fromCodePoint(cp);
+        } catch {
+          return match;
+        }
+      }
+      return escaped ?? match;
+    }
+  );
+}
 function sanitizeCSS(css, scopeClass) {
+  return sanitizeCSSWithStats(css, scopeClass).css;
+}
+function sanitizeCSSWithStats(css, scopeClass) {
   let root;
   try {
     root = import_postcss.default.parse(css);
   } catch {
-    return "";
+    return { css: "", removedRules: 0, removedDecls: 0, removedAtRules: 0 };
   }
+  const stats = {
+    css: "",
+    removedRules: 0,
+    removedDecls: 0,
+    removedAtRules: 0
+  };
   const safeScopeClass = scopeClass ? scopeClass.replace(/[{}()[\];,'"\\<>\s]/g, "") : "";
   const keyframeNameMap = /* @__PURE__ */ new Map();
   if (safeScopeClass) {
@@ -902,7 +1101,13 @@ function sanitizeCSS(css, scopeClass) {
     });
   }
   if (safeScopeClass && keyframeNameMap.size > 0) {
-    const ANIM_KEYWORDS = /* @__PURE__ */ new Set(["none", "initial", "inherit", "unset", "revert"]);
+    const ANIM_KEYWORDS = /* @__PURE__ */ new Set([
+      "none",
+      "initial",
+      "inherit",
+      "unset",
+      "revert"
+    ]);
     const replaceAnimName = (token) => {
       const t = token.trim().replace(/^['"]|['"]$/g, "");
       return ANIM_KEYWORDS.has(t) ? token : keyframeNameMap.get(t) ?? token;
@@ -918,23 +1123,24 @@ function sanitizeCSS(css, scopeClass) {
   }
   root.walkAtRules((node) => {
     if (!ALLOWED_AT_RULES.has(node.name.toLowerCase())) {
+      stats.removedAtRules++;
       node.remove();
     }
   });
   root.walkDecls((node) => {
-    const normalizedValue = node.value.replace(/\/\*[\s\S]*?\*\//g, "");
+    const normalizedValue = normalizeCSSEscapes(
+      node.value.replace(/\/\*[\s\S]*?\*\//g, "")
+    );
     if (BLOCKED_VALUE_PATTERNS.some((p) => p.test(normalizedValue))) {
+      stats.removedDecls++;
       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)) {
+      if (blockedValuePattern.test(normalizedValue)) {
+        stats.removedDecls++;
         node.remove();
         return;
       }
@@ -945,6 +1151,7 @@ function sanitizeCSS(css, scopeClass) {
       } else {
         const val = parseInt(zv, 10);
         if (isNaN(val) || String(val) !== zv || val > Z_INDEX_MAX) {
+          stats.removedDecls++;
           node.remove();
           return;
         }
@@ -952,13 +1159,21 @@ function sanitizeCSS(css, scopeClass) {
     }
   });
   root.walkRules((rule) => {
-    rule.selectors = rule.selectors.filter((s) => !DANGEROUS_SELECTOR.test(s));
-    if (!rule.selectors.length) {
+    const safeSelectors = rule.selectors.filter(
+      (s) => s.trim() && !DANGEROUS_SELECTOR.test(s)
+    );
+    if (!safeSelectors.length) {
+      stats.removedRules++;
       rule.remove();
       return;
     }
+    if (safeSelectors.length !== rule.selectors.length) {
+      stats.removedRules++;
+    }
+    rule.selectors = safeSelectors;
     if (scopeClass) {
       if (!safeScopeClass) {
+        stats.removedRules++;
         rule.remove();
         return;
       }
@@ -969,178 +1184,42 @@ function sanitizeCSS(css, scopeClass) {
       rule.selectors = rule.selectors.map((sel) => `.${safeScopeClass} ${sel}`);
     }
   });
-  return root.toString().replace(/<\/style/gi, "<\\/style");
+  stats.css = root.toString().replace(/<\/style/gi, "<\\/style");
+  return stats;
 }
-
-// src/ui/Canvas/CanvasRenderer.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_react12 = require("@xyflow/react");
-
-// src/ui/Canvas/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?.url && entry.width) {
-        parts.push(`${entry.url} ${entry.width}w`);
-      }
+function validateTenantCSS(css) {
+  const trimmed = css.trim();
+  if (!trimmed) return null;
+  const deescapedCSS = normalizeCSSEscapes(css);
+  for (const { pattern, label } of TENANT_CSS_BLOCKED_PATTERNS) {
+    if (pattern.test(deescapedCSS)) {
+      return `CSS contains blocked pattern: ${label}`;
     }
   }
-  if (image.url && image.width) {
-    parts.push(`${image.url} ${image.width}w`);
+  try {
+    import_postcss.default.parse(css);
+  } catch {
+    return "CSS parse error";
   }
-  return parts.join(", ");
-}
-function getImagePlaceholderStyle(image, options) {
-  const type = options?.type ?? "blur";
-  const paletteColor = options?.paletteColor ?? "muted";
-  if (type === "none") return {};
-  const color = image.palette?.[paletteColor];
-  if (type === "blur") {
-    const lqip = image.lqip;
-    if (lqip) {
-      return {
-        backgroundImage: `url(${lqip})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center"
-      };
-    }
-    if (color) {
-      return { backgroundColor: color };
-    }
-    return {};
+  const sanitized = sanitizeCSSWithStats(
+    css,
+    "flow-node--tenant-css-validation"
+  );
+  if (!sanitized.css.trim()) {
+    return "CSS must contain safe rules";
   }
-  if (color) {
-    return { backgroundColor: color };
+  if (sanitized.removedRules > 0 || sanitized.removedDecls > 0 || sanitized.removedAtRules > 0) {
+    return "CSS contains unsafe rules or selectors";
   }
-  return {};
+  return null;
 }
 
-// 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,
-  alt: altProp
-}) {
-  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 ?? (isPixelRendering ? "none" : "blur");
-  const loading = priority ? "eager" : loadingProp ?? "lazy";
-  const aspectRatio = !fill && image.width && image.height ? `${image.width} / ${image.height}` : void 0;
-  const srcSet = getImageSrcSet(image);
-  const src = image.url ?? 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?.();
-  }, [onLoad]);
-  const imgRef = (0, import_react6.useCallback)(
-    (node) => {
-      if (node && node.complete && node.naturalWidth > 0) {
-        fireLoad();
-      }
-    },
-    [fireLoad]
-  );
-  const containerStyle = {
-    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 = {
-    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: {
-        ...overlayBase,
-        display: "block",
-        objectFit,
-        filter: "blur(20px)",
-        transform: "scale(1.1)"
-      }
-    }
-  ), placeholderColor && /* @__PURE__ */ import_react6.default.createElement(
-    "div",
-    {
-      "aria-hidden": true,
-      style: {
-        ...overlayBase,
-        backgroundColor: placeholderColor
-      }
-    }
-  ), /* @__PURE__ */ import_react6.default.createElement(
-    "img",
-    {
-      ref: imgRef,
-      alt: altProp ?? image.alt ?? "",
-      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/Canvas/CanvasRenderer.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react12 = require("@xyflow/react");
 
 // src/ui/Canvas/node-types-factory.tsx
+var import_react7 = __toESM(require("react"), 1);
 function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrapper, renderNode) {
   const types = {};
   types.dynamic = ((props) => {
@@ -1170,22 +1249,6 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
     let content;
     if (CustomRenderer) {
       content = /* @__PURE__ */ import_react7.default.createElement(CustomRenderer, { ...slotProps });
-    } else if (d.nodeTypeSlug === "image") {
-      const imageVal = d.fields?.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;
     }