@01.software/sdk 0.5.3 → 0.5.5

package/dist/ui/flow.js

@@ -1,55 +1,4 @@
 "use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  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) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // src/ui/Flow/types.ts
 function isDynamicNode(node) {
@@ -116,133 +65,128 @@ 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 : "";
+  const identifier = id ?? slug ?? "";
   return {
     queryKey: collectionKeys("flows").detail(identifier),
-    queryFn: () => __async(null, null, function* () {
+    queryFn: async () => {
       if (id) return client.from("flows").findById(id);
-      const result = yield client.from("flows").find({
+      const result = await 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 });
+    queryFn: async () => {
+      const result = await 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 });
+    queryFn: async () => {
+      const result = await 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;
   return {
-    slug: String((_a = doc.slug) != null ? _a : ""),
-    name: String((_b = doc.title) != null ? _b : ""),
-    color: String((_c = doc.color) != null ? _c : "#e5e7eb"),
-    defaultSize: (_d = doc.defaultSize) != null ? _d : {
+    slug: String(doc.slug ?? ""),
+    name: String(doc.title ?? ""),
+    color: String(doc.color ?? "#e5e7eb"),
+    defaultSize: doc.defaultSize ?? {
       width: 200,
       height: 200
     },
     fields: Array.isArray(doc.fields) ? doc.fields : [],
     transparentBackground: Boolean(doc.transparentBackground),
-    template: (_e = doc.template) != null ? _e : null,
-    customCSS: (_f = doc.customCSS) != null ? _f : null
+    template: doc.template ?? null,
+    customCSS: doc.customCSS ?? null
   };
 }
 function toEdgeTypeDef(doc) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
   return {
-    slug: String((_a = doc.slug) != null ? _a : ""),
-    name: String((_b = doc.title) != null ? _b : ""),
-    color: String((_c = doc.color) != null ? _c : ""),
-    strokeWidth: (_d = doc.strokeWidth) != null ? _d : 2,
-    animated: (_e = doc.animated) != null ? _e : false,
-    lineStyle: String((_f = doc.lineStyle) != null ? _f : "default"),
-    markerStart: String((_g = doc.markerStart) != null ? _g : "none"),
-    markerEnd: String((_h = doc.markerEnd) != null ? _h : "arrow"),
+    slug: String(doc.slug ?? ""),
+    name: String(doc.title ?? ""),
+    color: String(doc.color ?? ""),
+    strokeWidth: doc.strokeWidth ?? 2,
+    animated: 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 : []
   };
 }
 function useFlow(options) {
-  var _a, _b;
   const { client, slug, id, enabled = true } = options;
   const hasIdentifier = !!(slug || id);
   const flowQuery = useQuery(
-    __spreadProps(__spreadValues({}, flowQueryOptions(client, slug, id)), {
+    {
+      ...flowQueryOptions(client, slug, id),
       enabled: enabled && hasIdentifier
-    }),
+    },
     client.queryClient
   );
   const nodeTypesQuery = useQuery(
-    __spreadProps(__spreadValues({}, nodeTypesQueryOptions(client)), {
+    {
+      ...nodeTypesQueryOptions(client),
       enabled
-    }),
+    },
     client.queryClient
   );
   const edgeTypesQuery = useQuery(
-    __spreadProps(__spreadValues({}, edgeTypesQueryOptions(client)), {
+    {
+      ...edgeTypesQueryOptions(client),
       enabled
-    }),
+    },
     client.queryClient
   );
   const nodeTypeDefs = useMemo(() => {
-    var _a2;
-    const apiDefs = ((_a2 = nodeTypesQuery.data) != null ? _a2 : []).map(toNodeTypeDef);
+    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];
   }, [nodeTypesQuery.data]);
   const edgeTypeDefs = useMemo(() => {
-    var _a2;
-    const apiDefs = ((_a2 = edgeTypesQuery.data) != null ? _a2 : []).map(toEdgeTypeDef);
+    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];
   }, [edgeTypesQuery.data]);
   const flow = flowQuery.data;
-  const canvas = flow == null ? void 0 : flow.canvas;
+  const canvas = flow?.canvas;
   return {
     data: canvas,
     nodeTypeDefs,
     edgeTypeDefs,
     flow,
     isLoading: flowQuery.isLoading || nodeTypesQuery.isLoading || edgeTypesQuery.isLoading,
-    error: (_b = (_a = flowQuery.error) != null ? _a : nodeTypesQuery.error) != null ? _b : edgeTypesQuery.error
+    error: flowQuery.error ?? nodeTypesQuery.error ?? edgeTypesQuery.error
   };
 }
 
 // src/ui/Flow/prefetchFlow.ts
-function prefetchFlow(options) {
-  return __async(this, null, function* () {
-    const { client, slug, id } = options;
-    if (!slug && !id) {
-      throw new Error("prefetchFlow requires either slug or id");
-    }
-    yield Promise.all([
-      client.queryClient.prefetchQuery(flowQueryOptions(client, slug, id)),
-      client.queryClient.prefetchQuery(nodeTypesQueryOptions(client)),
-      client.queryClient.prefetchQuery(edgeTypesQueryOptions(client))
-    ]);
-  });
+async function prefetchFlow(options) {
+  const { client, slug, id } = options;
+  if (!slug && !id) {
+    throw new Error("prefetchFlow requires either slug or id");
+  }
+  await Promise.all([
+    client.queryClient.prefetchQuery(flowQueryOptions(client, slug, id)),
+    client.queryClient.prefetchQuery(nodeTypesQueryOptions(client)),
+    client.queryClient.prefetchQuery(edgeTypesQueryOptions(client))
+  ]);
 }
 
 // src/ui/Flow/useFlowData.ts
@@ -250,21 +194,15 @@ import { useMemo as useMemo2 } from "react";
 function useFlowData(options) {
   const { data, nodeTypeDefs: inputNodeDefs, edgeTypeDefs: inputEdgeDefs } = options;
   const nodeTypeDefsMap = useMemo2(() => {
-    const allDefs = inputNodeDefs != null ? inputNodeDefs : BUILT_IN_NODE_TYPES;
+    const allDefs = inputNodeDefs ?? BUILT_IN_NODE_TYPES;
     return new Map(allDefs.map((d) => [d.slug, d]));
   }, [inputNodeDefs]);
   const edgeTypeDefsMap = useMemo2(() => {
-    const allDefs = inputEdgeDefs != null ? inputEdgeDefs : BUILT_IN_EDGE_TYPES;
+    const allDefs = inputEdgeDefs ?? BUILT_IN_EDGE_TYPES;
     return new Map(allDefs.map((d) => [d.slug, d]));
   }, [inputEdgeDefs]);
-  const nodes = useMemo2(() => {
-    var _a;
-    return (_a = data == null ? void 0 : data.nodes) != null ? _a : [];
-  }, [data == null ? void 0 : data.nodes]);
-  const edges = useMemo2(() => {
-    var _a;
-    return (_a = data == null ? void 0 : data.edges) != null ? _a : [];
-  }, [data == null ? void 0 : data.edges]);
+  const nodes = useMemo2(() => data?.nodes ?? [], [data?.nodes]);
+  const edges = useMemo2(() => data?.edges ?? [], [data?.edges]);
   return {
     nodes,
     edges,
@@ -275,10 +213,9 @@ function useFlowData(options) {
 
 // src/ui/Flow/utils.ts
 function getNodeSize(node) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   return {
-    width: (_e = (_d = (_c = (_a = node.style) == null ? void 0 : _a.width) != null ? _c : (_b = node.measured) == null ? void 0 : _b.width) != null ? _d : node.width) != null ? _e : 200,
-    height: (_j = (_i = (_h = (_f = node.style) == null ? void 0 : _f.height) != null ? _h : (_g = node.measured) == null ? void 0 : _g.height) != null ? _i : node.height) != null ? _j : 200
+    width: node.style?.width ?? node.measured?.width ?? node.width ?? 200,
+    height: node.style?.height ?? node.measured?.height ?? node.height ?? 200
   };
 }
 function getAbsolutePosition(node, nodeMap) {
@@ -350,13 +287,12 @@ function getFrames(nodes) {
   if (frames.length === 0) return [];
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   return frames.map((f) => {
-    var _a;
     const data = f.data;
     const abs = getAbsolutePosition(f, nodeMap);
     const { width: w, height: h } = getNodeSize(f);
     return {
       id: f.id,
-      label: (_a = data.label) != null ? _a : "",
+      label: data.label ?? "",
       bounds: { x: abs.x, y: abs.y, width: w, height: h }
     };
   }).sort((a, b) => a.bounds.y - b.bounds.y || a.bounds.x - b.bounds.x);
@@ -365,13 +301,13 @@ function getFrameData(data, frameId) {
   const frame = data.nodes.find((n) => n.id === frameId);
   if (!frame || frame.type !== "frame") return void 0;
   const descendantIds = collectDescendants(data.nodes, frameId);
-  const childNodes = data.nodes.filter((n) => descendantIds.has(n.id)).map((n) => __spreadProps(__spreadValues({}, n), { draggable: false }));
+  const childNodes = data.nodes.filter((n) => descendantIds.has(n.id)).map((n) => ({ ...n, draggable: false }));
   const childEdges = data.edges.filter(
     (e) => descendantIds.has(e.source) && descendantIds.has(e.target)
   );
   const frameBounds = getNodeBounds(data.nodes, [frameId]);
   const { width: w, height: h } = getNodeSize(frame);
-  const clampBounds = frameBounds != null ? frameBounds : {
+  const clampBounds = frameBounds ?? {
     x: frame.position.x,
     y: frame.position.y,
     width: w,
@@ -379,7 +315,7 @@ function getFrameData(data, frameId) {
   };
   const contentNodeIds = childNodes.filter((n) => n.id !== frameId).map((n) => n.id);
   const contentBounds = contentNodeIds.length > 0 ? getNodeBounds(data.nodes, contentNodeIds) : void 0;
-  const fitBounds = contentBounds != null ? contentBounds : clampBounds;
+  const fitBounds = contentBounds ?? clampBounds;
   return {
     data: {
       nodes: childNodes,
@@ -420,6 +356,7 @@ function ensureQuickJSLoaded() {
     _notify();
   }).catch(() => {
     _state = { status: "failed", module: null };
+    _notify();
   });
 }
 function useQuickJS() {
@@ -429,6 +366,13 @@ function useQuickJS() {
 // src/ui/Flow/template-compiler.ts
 var MAX_CACHE_SIZE = 100;
 var MAX_MATERIALIZE_DEPTH = 20;
+var IFRAME_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  "srcdoc",
+  "allow",
+  "allowpaymentrequest",
+  "name",
+  "sandbox"
+]);
 var ALLOWED_ELEMENTS = /* @__PURE__ */ new Set([
   "div",
   "span",
@@ -462,7 +406,8 @@ var ALLOWED_ELEMENTS = /* @__PURE__ */ new Set([
   "path",
   "g",
   "circle",
-  "rect"
+  "rect",
+  "iframe"
 ]);
 var BLOCKED_PATTERNS = [
   /\bdocument\s*\./,
@@ -542,7 +487,7 @@ function isSafeUrl(value) {
   try {
     const url = new URL(value);
     return url.protocol === "http:" || url.protocol === "https:";
-  } catch (e) {
+  } catch {
     return false;
   }
 }
@@ -564,13 +509,16 @@ function sanitizeStyle(style) {
   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;
+    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;
@@ -592,7 +540,7 @@ function materialize(node, depth = 0) {
     );
   }
   if (d.$$t === "el") {
-    const type = String((_a = d.type) != null ? _a : "");
+    const type = String(d.type ?? "");
     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;
@@ -600,6 +548,7 @@ function materialize(node, depth = 0) {
     for (const [k, v] of Object.entries(props)) {
       if (k.startsWith("on")) continue;
       if (k === "dangerouslySetInnerHTML" || k === "ref") continue;
+      if (type === "iframe" && IFRAME_BLOCKED_PROPS.has(k)) continue;
       if ((k === "src" || k === "href") && !isSafeUrl(v)) continue;
       if (k === "style") {
         safeProps[k] = sanitizeStyle(v);
@@ -607,6 +556,9 @@ function materialize(node, depth = 0) {
       }
       safeProps[k] = v;
     }
+    if (type === "iframe") {
+      safeProps["sandbox"] = "allow-scripts allow-same-origin";
+    }
     const children = ch.map((c) => materialize(c, depth + 1));
     return React.createElement(type, safeProps, ...children);
   }
@@ -640,7 +592,7 @@ function makeRenderer(jsCode) {
       const raw = vm.dump(callResult.handle);
       callResult.handle.dispose();
       return materialize(JSON.parse(String(raw)));
-    } catch (e) {
+    } catch {
       return null;
     } finally {
       vm.dispose();
@@ -649,8 +601,7 @@ function makeRenderer(jsCode) {
 }
 function makeReactFC(renderer, qjs) {
   return function QuickJSTemplateComponent(props) {
-    var _a;
-    return (_a = renderer(qjs, props)) != null ? _a : null;
+    return renderer(qjs, props) ?? null;
   };
 }
 function compileTemplate(code, slug) {
@@ -660,10 +611,10 @@ function compileTemplate(code, slug) {
   if (!qjs) return null;
   const cacheKey = `${slug}:${code.length}:${hashCode(code)}`;
   if (rendererCache.has(cacheKey)) {
-    const renderer2 = rendererCache.get(cacheKey);
+    const entry = rendererCache.get(cacheKey);
     rendererCache.delete(cacheKey);
-    rendererCache.set(cacheKey, renderer2);
-    return makeReactFC(renderer2, qjs);
+    rendererCache.set(cacheKey, entry);
+    return entry.fc;
   }
   let jsCode;
   try {
@@ -674,16 +625,17 @@ function compileTemplate(code, slug) {
       jsxFragmentPragma: "React.Fragment"
     });
     jsCode = result.code;
-  } catch (e) {
+  } catch {
     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);
-  return makeReactFC(renderer, qjs);
+  rendererCache.set(cacheKey, { renderer, fc });
+  return fc;
 }
 function clearTemplateCache() {
   rendererCache.clear();
@@ -697,15 +649,15 @@ function sanitizeUrl(url) {
     const parsed = new URL(url);
     if (parsed.protocol === "http:" || parsed.protocol === "https:") return url;
     return void 0;
-  } catch (e) {
+  } catch {
     return void 0;
   }
 }
 function renderFieldValue(key, val, fieldDef) {
   if (val == null || val === "") return null;
-  const fieldType = fieldDef == null ? void 0 : fieldDef.fieldType;
+  const fieldType = fieldDef?.fieldType;
   if (fieldType === "image" || typeof val === "object" && val !== null && "url" in val) {
-    const imgUrl = typeof val === "string" ? val : val == null ? void 0 : val.url;
+    const imgUrl = typeof val === "string" ? val : val?.url;
     const safeUrl = sanitizeUrl(imgUrl);
     if (!safeUrl) return null;
     return /* @__PURE__ */ React2.createElement(
@@ -818,12 +770,11 @@ function EnhancedDynamicNode({
   );
 }
 function DefaultFrameNode({ data }) {
-  var _a, _b, _c, _d;
   const d = data;
-  const baseColor = (_a = d.color) != null ? _a : "rgb(128,128,128)";
-  const padding = (_b = d.padding) != null ? _b : 20;
-  const borderStyle = (_c = d.borderStyle) != null ? _c : "dashed";
-  const opacity = (_d = d.opacity) != null ? _d : 0.15;
+  const baseColor = d.color ?? "rgb(128,128,128)";
+  const padding = d.padding ?? 20;
+  const borderStyle = d.borderStyle ?? "dashed";
+  const opacity = d.opacity ?? 0.15;
   const bgColor = (() => {
     const m = baseColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
     if (m) return `rgba(${m[1]},${m[2]},${m[3]},${opacity})`;
@@ -857,21 +808,21 @@ function DefaultFrameNode({ data }) {
 
 // src/ui/Flow/field-helpers.ts
 function getImageField(fields, name) {
-  const val = fields == null ? void 0 : fields[name];
+  const val = 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];
+  const val = fields?.[name];
   return typeof val === "string" ? val : void 0;
 }
 function getNumberField(fields, name) {
-  const val = fields == null ? void 0 : fields[name];
+  const val = fields?.[name];
   return typeof val === "number" ? val : void 0;
 }
 function getBooleanField(fields, name) {
-  const val = fields == null ? void 0 : fields[name];
+  const val = fields?.[name];
   return typeof val === "boolean" ? val : void 0;
 }
 
@@ -880,21 +831,77 @@ 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/;
+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 = postcss.parse(css);
-  } catch (e) {
+  } catch {
     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) => {
+      const t = token.trim().replace(/^['"]|['"]$/g, "");
+      return ANIM_KEYWORDS.has(t) ? token : keyframeNameMap.get(t) ?? 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) => {
-    if (BLOCKED_VALUE_PATTERNS.some((p) => p.test(node.value))) {
+    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) => {
@@ -904,13 +911,12 @@ function sanitizeCSS(css, scopeClass) {
       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") {
+      if (parent?.type === "atrule" && parent.name.toLowerCase() === "keyframes") {
         return;
       }
       rule.selectors = rule.selectors.map((sel) => `.${safeScopeClass} ${sel}`);
@@ -943,7 +949,7 @@ function getImageSrcSet(image) {
   if (sizes) {
     for (const size of IMAGE_SIZES) {
       const entry = sizes[String(size)];
-      if ((entry == null ? void 0 : entry.url) && entry.width) {
+      if (entry?.url && entry.width) {
         parts.push(`${entry.url} ${entry.width}w`);
       }
     }
@@ -954,11 +960,10 @@ function getImageSrcSet(image) {
   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";
+  const type = options?.type ?? "blur";
+  const paletteColor = options?.paletteColor ?? "muted";
   if (type === "none") return {};
-  const color = (_c = image.palette) == null ? void 0 : _c[paletteColor];
+  const color = image.palette?.[paletteColor];
   if (type === "blur") {
     const lqip = image.lqip;
     if (lqip) {
@@ -997,15 +1002,14 @@ function Image({
   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 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 = (_a = image.url) != null ? _a : void 0;
+  const src = image.url ?? void 0;
   const hasLqip = placeholder === "blur" && !!image.lqip;
   const placeholderStyle = getImagePlaceholderStyle(image, {
     type: placeholder
@@ -1015,7 +1019,7 @@ function Image({
     if (firedRef.current) return;
     firedRef.current = true;
     setLoaded(true);
-    onLoad == null ? void 0 : onLoad();
+    onLoad?.();
   }, [onLoad]);
   const imgRef = useCallback(
     (node) => {
@@ -1025,10 +1029,13 @@ function Image({
     },
     [fireLoad]
   );
-  const containerStyle = __spreadValues(__spreadValues(__spreadValues({
+  const containerStyle = {
     position: "relative",
-    overflow: "hidden"
-  }, fill ? { width: "100%", height: "100%" } : {}), aspectRatio ? { aspectRatio } : {}), style);
+    overflow: "hidden",
+    ...fill ? { width: "100%", height: "100%" } : {},
+    ...aspectRatio ? { aspectRatio } : {},
+    ...style
+  };
   const overlayBase = {
     position: "absolute",
     top: 0,
@@ -1039,41 +1046,44 @@ function Image({
     transition: "opacity 0.3s ease",
     pointerEvents: "none"
   };
-  const mainImgStyle = __spreadValues(__spreadProps(__spreadValues({
+  const mainImgStyle = {
     display: "block",
     width: "100%",
     height: "100%",
-    objectFit
-  }, imageRendering ? { imageRendering } : {}), {
+    objectFit,
+    ...imageRendering ? { imageRendering } : {},
     opacity: loaded ? 1 : 0,
-    transition: "opacity 0.3s ease"
-  }), imgStyle);
+    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), {
+      style: {
+        ...overlayBase,
         display: "block",
         objectFit,
         filter: "blur(20px)",
         transform: "scale(1.1)"
-      })
+      }
     }
   ), placeholderColor && /* @__PURE__ */ React3.createElement(
     "div",
     {
       "aria-hidden": true,
-      style: __spreadProps(__spreadValues({}, overlayBase), {
+      style: {
+        ...overlayBase,
         backgroundColor: placeholderColor
-      })
+      }
     }
   ), /* @__PURE__ */ React3.createElement(
     "img",
     {
       ref: imgRef,
-      alt: (_b = image.alt) != null ? _b : "",
+      alt: image.alt ?? "",
       src,
       srcSet: srcSet || void 0,
       sizes,
@@ -1092,10 +1102,9 @@ function Image({
 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 typeDef = nodeTypeDefsMap?.get(d.nodeTypeSlug);
+    const CustomRenderer = nodeRenderers?.[d.nodeTypeSlug];
     const defaultRender = typeDef ? /* @__PURE__ */ React4.createElement(
       EnhancedDynamicNode,
       {
@@ -1104,7 +1113,7 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
         width: props.width,
         height: props.height
       }
-    ) : /* @__PURE__ */ React4.createElement(DefaultDynamicNode, __spreadValues({}, props));
+    ) : /* @__PURE__ */ React4.createElement(DefaultDynamicNode, { ...props });
     const slotProps = {
       id: props.id,
       nodeTypeSlug: d.nodeTypeSlug,
@@ -1118,9 +1127,9 @@ function createNodeTypes(nodeRenderers, nodeTypeDefsMap, frameRenderer, nodeWrap
     };
     let content;
     if (CustomRenderer) {
-      content = /* @__PURE__ */ React4.createElement(CustomRenderer, __spreadValues({}, slotProps));
+      content = /* @__PURE__ */ React4.createElement(CustomRenderer, { ...slotProps });
     } else if (d.nodeTypeSlug === "image") {
-      const imageVal = (_a = d.fields) == null ? void 0 : _a.image;
+      const imageVal = d.fields?.image;
       if (imageVal && typeof imageVal === "object" && "url" in imageVal) {
         content = /* @__PURE__ */ React4.createElement(
           Image,
@@ -1183,8 +1192,7 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
   const types = {};
   for (const [slug, Renderer] of Object.entries(edgeRenderers)) {
     types[slug] = ((props) => {
-      var _a;
-      const def = edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.get(slug);
+      const def = edgeTypeDefsMap?.get(slug);
       return /* @__PURE__ */ React4.createElement(
         Renderer,
         {
@@ -1193,7 +1201,7 @@ function createEdgeTypes(edgeRenderers, edgeTypeDefsMap) {
           source: props.source,
           target: props.target,
           label: props.label,
-          fields: (_a = props.data) == null ? void 0 : _a.fields,
+          fields: props.data?.fields,
           edgeTypeDef: def,
           style: props.style
         }
@@ -1217,33 +1225,38 @@ var EDGE_TYPE_MAP = {
   default: "default"
 };
 function applyEdgeStyles(edges, edgeTypeDefsMap) {
-  if (!(edgeTypeDefsMap == null ? void 0 : edgeTypeDefsMap.size)) return edges;
+  if (!edgeTypeDefsMap?.size) return edges;
   return edges.map((edge) => {
-    var _a;
     const slug = edge.edgeTypeSlug;
     if (!slug) return edge;
     const def = edgeTypeDefsMap.get(slug);
     if (!def) return edge;
-    const styled = __spreadValues({}, edge);
+    const styled = { ...edge };
     if (!styled.type && def.lineStyle) {
-      styled.type = (_a = EDGE_TYPE_MAP[def.lineStyle]) != null ? _a : "default";
+      styled.type = EDGE_TYPE_MAP[def.lineStyle] ?? "default";
     }
-    styled.style = __spreadValues(__spreadValues(__spreadValues({}, def.color ? { stroke: def.color } : void 0), def.strokeWidth ? { strokeWidth: def.strokeWidth } : void 0), edge.style);
+    styled.style = {
+      ...def.color ? { stroke: def.color } : void 0,
+      ...def.strokeWidth ? { strokeWidth: def.strokeWidth } : void 0,
+      ...edge.style
+    };
     if (styled.animated == null && def.animated) styled.animated = true;
     if (!styled.markerStart) {
       const startType = toMarkerType(def.markerStart);
       if (startType) {
-        styled.markerStart = __spreadValues({
-          type: startType
-        }, def.color ? { color: def.color } : void 0);
+        styled.markerStart = {
+          type: startType,
+          ...def.color ? { color: def.color } : void 0
+        };
       }
     }
     if (!styled.markerEnd) {
       const endType = toMarkerType(def.markerEnd);
       if (endType) {
-        styled.markerEnd = __spreadValues({
-          type: endType
-        }, def.color ? { color: def.color } : void 0);
+        styled.markerEnd = {
+          type: endType,
+          ...def.color ? { color: def.color } : void 0
+        };
       }
     }
     return styled;
@@ -1318,7 +1331,7 @@ function FocusHandler({
     if (bw === 0 || bh === 0) return;
     const zoomFn = mode === "cover" ? Math.max : Math.min;
     const zoom = zoomFn(containerSize.w / bw, containerSize.h / bh);
-    const centerTarget = clampBounds != null ? clampBounds : b;
+    const centerTarget = clampBounds ?? b;
     const cx = centerTarget.x + centerTarget.width / 2;
     const cy = centerTarget.y + centerTarget.height / 2;
     const x = containerSize.w / 2 - cx * zoom;
@@ -1328,9 +1341,9 @@ function FocusHandler({
         containerSize.w / clampBounds.width,
         containerSize.h / clampBounds.height
       );
-      store.getState().setMinZoom(Math.max(Math.min(coverZoom, zoom), minZoomProp != null ? minZoomProp : 0));
+      store.getState().setMinZoom(Math.max(Math.min(coverZoom, zoom), minZoomProp ?? 0));
     } else {
-      store.getState().setMinZoom(minZoomProp != null ? minZoomProp : 0.5);
+      store.getState().setMinZoom(minZoomProp ?? 0.5);
     }
     let vp = { x, y, zoom };
     if (isInitial || isBoundsChange) {
@@ -1338,12 +1351,12 @@ function FocusHandler({
       if (extent) {
         const visW = containerSize.w / zoom;
         const visH = containerSize.h / zoom;
-        onInitialFit == null ? void 0 : onInitialFit([
+        onInitialFit?.([
           [Math.min(extent[0][0], cx - visW / 2), Math.min(extent[0][1], cy - visH / 2)],
           [Math.max(extent[1][0], cx + visW / 2), Math.max(extent[1][1], cy + visH / 2)]
         ]);
       } else {
-        onInitialFit == null ? void 0 : onInitialFit();
+        onInitialFit?.();
       }
     } else {
       if (extent) {
@@ -1419,14 +1432,13 @@ function FlowRenderer({
   minZoom: minZoomProp,
   maxZoom: maxZoomProp
 }) {
-  var _a, _b;
   const resolvedFrameRenderer = hideFrames ? NullFrameRenderer : frameRenderer;
   const nodeTypeDefsMap = React6.useMemo(() => {
-    if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return void 0;
+    if (!nodeTypeDefs?.length) return void 0;
     return new Map(nodeTypeDefs.map((d) => [d.slug, d]));
   }, [nodeTypeDefs]);
   const edgeTypeDefsMap = React6.useMemo(() => {
-    if (!(edgeTypeDefs == null ? void 0 : edgeTypeDefs.length)) return void 0;
+    if (!edgeTypeDefs?.length) return void 0;
     return new Map(edgeTypeDefs.map((d) => [d.slug, d]));
   }, [edgeTypeDefs]);
   const nodeTypes = React6.useMemo(
@@ -1444,28 +1456,27 @@ function FlowRenderer({
     [edgeRenderers, edgeTypeDefsMap]
   );
   const mergedCSS = React6.useMemo(() => {
-    if (!(nodeTypeDefs == null ? void 0 : nodeTypeDefs.length)) return "";
+    if (!nodeTypeDefs?.length) return "";
     return nodeTypeDefs.filter((d) => d.customCSS).map((d) => sanitizeCSS(d.customCSS, `flow-node--${d.slug}`)).join("\n");
   }, [nodeTypeDefs]);
   const styledEdges = React6.useMemo(() => {
-    var _a2;
-    let edges = applyEdgeStyles((_a2 = data == null ? void 0 : data.edges) != null ? _a2 : [], edgeTypeDefsMap);
+    let edges = applyEdgeStyles(data?.edges ?? [], edgeTypeDefsMap);
     if (edgeRenderers) {
       edges = edges.map((edge) => {
         const slug = edge.edgeTypeSlug;
         if (slug && edgeRenderers[slug]) {
-          return __spreadProps(__spreadValues({}, edge), { type: slug });
+          return { ...edge, type: slug };
         }
         return edge;
       });
     }
     return edges;
-  }, [data == null ? void 0 : data.edges, edgeTypeDefsMap, edgeRenderers]);
+  }, [data?.edges, edgeTypeDefsMap, edgeRenderers]);
   const translateExtent = React6.useMemo(() => {
     if (translateExtentProp) return translateExtentProp;
-    const es = clampBounds != null ? clampBounds : bounds;
+    const es = clampBounds ?? bounds;
     if (!es) return void 0;
-    const ep = clampBounds ? 0 : focusPadding != null ? focusPadding : 0.1;
+    const ep = clampBounds ? 0 : focusPadding ?? 0.1;
     return [
       [es.x - ep * es.width, es.y - ep * es.height],
       [es.x + es.width * (1 + ep), es.y + es.height * (1 + ep)]
@@ -1489,23 +1500,24 @@ function FlowRenderer({
     },
     []
   );
-  const activeExtent = !bounds || extentReadyRef.current ? (_a = expandedExtentRef.current) != null ? _a : translateExtent : void 0;
+  const activeExtent = !bounds || extentReadyRef.current ? expandedExtentRef.current ?? translateExtent : void 0;
   if (!data) return null;
-  const resolvedDefaultViewport = defaultViewportProp != null ? defaultViewportProp : !fitView && data.viewport ? data.viewport : void 0;
+  const resolvedDefaultViewport = defaultViewportProp ?? (!fitView && data.viewport ? data.viewport : void 0);
   return /* @__PURE__ */ React6.createElement(ReactFlowProvider, null, /* @__PURE__ */ React6.createElement(
     "div",
     {
       className,
-      style: __spreadValues({
+      style: {
         width: "100%",
         height: "100%",
-        background: "transparent"
-      }, style)
+        background: "transparent",
+        ...style
+      }
     },
     /* @__PURE__ */ React6.createElement(
       ReactFlow,
       {
-        nodes: (_b = data.nodes) != null ? _b : [],
+        nodes: data.nodes ?? [],
         edges: styledEdges,
         nodeTypes,
         edgeTypes: customEdgeTypes,
@@ -1545,10 +1557,10 @@ function FlowRenderer({
         FocusHandler,
         {
           bounds,
-          padding: focusPadding != null ? focusPadding : 0.1,
-          animation: focusAnimation != null ? focusAnimation : true,
+          padding: focusPadding ?? 0.1,
+          animation: focusAnimation ?? true,
           mode: focusMode,
-          responsive: responsiveFit != null ? responsiveFit : true,
+          responsive: responsiveFit ?? true,
           extent: translateExtent,
           clampBounds,
           minZoomProp,
@@ -1562,24 +1574,16 @@ 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"
-  ]);
+function FlowFrame({
+  client,
+  slug,
+  id,
+  frameId,
+  loading = null,
+  error: renderError,
+  onDataReady,
+  ...rendererProps
+}) {
   const { data, nodeTypeDefs, edgeTypeDefs, flow, isLoading, error } = useFlow({
     client,
     slug,
@@ -1592,9 +1596,8 @@ function FlowFrame(_a) {
   const onDataReadyRef = useRef2(onDataReady);
   onDataReadyRef.current = onDataReady;
   useEffect(() => {
-    var _a2;
     if (frameData && flow) {
-      (_a2 = onDataReadyRef.current) == null ? void 0 : _a2.call(onDataReadyRef, frameData, flow);
+      onDataReadyRef.current?.(frameData, flow);
     }
   }, [frameData, flow]);
   if (process.env.NODE_ENV !== "production" && !slug && !id) {
@@ -1613,14 +1616,15 @@ function FlowFrame(_a) {
   }
   return /* @__PURE__ */ React7.createElement(
     FlowRenderer,
-    __spreadProps(__spreadValues({}, rendererProps), {
+    {
+      ...rendererProps,
       data: frameData.data,
       nodeTypeDefs,
       edgeTypeDefs,
       bounds: frameData.fitBounds,
       clampBounds: frameData.clampBounds,
       hideFrames: true
-    })
+    }
   );
 }
 export {