pxengine 0.1.149 → 0.1.151

package/dist/index.mjs

@@ -11217,6 +11217,37 @@ ChatSkeleton.displayName = "ChatSkeleton";
 // src/molecules/generic/EditableField/EditableField.tsx
 import React88, { useState as useState6, useEffect as useEffect5, useRef as useRef6 } from "react";
 
+// src/lib/format-utils.ts
+function isPlainRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function devWarnUnexpectedObject(context, value) {
+  if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  console.warn(
+    `[PXEngine-UI] formatCellValue received an object/array where a primitive value was expected (context: "${context}"). This usually means the rendered schema and the data feeding it don't match \u2014 worth flagging to whatever generated this data.`,
+    value
+  );
+}
+function formatCellValue(value, context = "cell") {
+  if (value === null || value === void 0 || value === "") return "";
+  if (typeof value !== "object") return String(value);
+  devWarnUnexpectedObject(context, value);
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "";
+    if (value.every((item) => item === null || item === void 0 || typeof item !== "object")) {
+      return value.map((item) => String(item ?? "")).join(", ");
+    }
+    return `${value.length} item${value.length === 1 ? "" : "s"}`;
+  }
+  if (isPlainRecord(value)) {
+    const meaningful = value.label ?? value.name ?? value.title ?? value.id ?? value.value;
+    if (typeof meaningful === "string" || typeof meaningful === "number") {
+      return String(meaningful);
+    }
+  }
+  return "Complex value";
+}
+
 // src/components/ui/hover-card.tsx
 import * as React85 from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
@@ -11668,7 +11699,7 @@ var EditableField = React88.memo(
       if (!value) {
         return /* @__PURE__ */ jsx97("span", { className: "opacity-0", children: "-" });
       }
-      return typeof value === "object" ? JSON.stringify(value) : String(value ?? "");
+      return formatCellValue(value, "label");
     };
     return /* @__PURE__ */ jsxs58(
       "div",
@@ -11922,7 +11953,7 @@ var FormCard = React90.memo(
         if (Array.isArray(val)) {
           return val.map((item) => {
             if (typeof item === "object" && item !== null) {
-              return item.label || item.value || item.name || JSON.stringify(item);
+              return item.label || item.value || item.name || formatCellValue(item, "label");
             }
             return String(item);
           }).join(", ");
@@ -12191,7 +12222,7 @@ var StatsGrid = ({
                   {
                     id: `stat-label-${index}`,
                     type: "text",
-                    content: typeof item.label === "object" ? JSON.stringify(item.label) : String(item.label ?? ""),
+                    content: formatCellValue(item.label, "label"),
                     variant: "small",
                     className: cn(!hasPxVars && "text-muted-foreground", "font-medium tracking-wide uppercase text-[10px]"),
                     style: textColor ? { color: textColor } : void 0
@@ -12231,7 +12262,7 @@ var StatsGrid = ({
                     ),
                     children: [
                       TrendIcon && /* @__PURE__ */ jsx101(TrendIcon, { className: "w-3 h-3 mr-0.5" }),
-                      typeof item.trend === "object" ? JSON.stringify(item.trend) : String(item.trend ?? "")
+                      formatCellValue(item.trend, "label")
                     ]
                   }
                 )
@@ -12517,7 +12548,7 @@ var DataGrid = ({
             variant: "secondary",
             className: "border-gold/20 bg-gold/10 text-gold",
             style: s.accent,
-            children: typeof value === "object" ? JSON.stringify(value) : String(value ?? "")
+            children: formatCellValue(value, "badge")
           }
         );
       case "avatar":
@@ -12533,7 +12564,7 @@ var DataGrid = ({
       case "number":
         return /* @__PURE__ */ jsx107("span", { className: "font-mono font-medium text-cardText", style: s.text, children: Number(value ?? 0).toLocaleString() });
       default:
-        return /* @__PURE__ */ jsx107("span", { className: "text-cardText", style: s.text, children: typeof value === "object" ? JSON.stringify(value) : String(value ?? "") });
+        return /* @__PURE__ */ jsx107("span", { className: "text-cardText", style: s.text, children: formatCellValue(value, "cell") });
     }
   };
   return /* @__PURE__ */ jsxs67(
@@ -14675,11 +14706,7 @@ function stringifyValue(value, atomName, props) {
   }
   if (Array.isArray(value)) return value.join(", ");
   if (typeof value === "object") {
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(value);
-    }
+    return formatCellValue(value, "label");
   }
   return String(value);
 }
@@ -14835,7 +14862,7 @@ var ApprovalCard = React100.memo(
               style: i < details.length - 1 ? { borderBottomColor: theme?.border } : {},
               children: [
                 /* @__PURE__ */ jsx128("span", { className: "text-cardText/50", style: s.muted, children: d.label }),
-                /* @__PURE__ */ jsx128("span", { className: "font-medium text-cardText", style: s.text, children: typeof d.value === "object" ? JSON.stringify(d.value) : String(d.value ?? "") })
+                /* @__PURE__ */ jsx128("span", { className: "font-medium text-cardText", style: s.text, children: formatCellValue(d.value, "label") })
               ]
             },
             i
@@ -15122,7 +15149,7 @@ var DataTableCard = React103.memo(
                 isHighlight ? "font-semibold text-gold" : colIdx === 0 ? "font-medium text-cardText" : "text-cardText/60"
               ),
               style: isHighlight ? s.accent : colIdx === 0 ? s.text : s.muted,
-              children: typeof cell === "object" ? JSON.stringify(cell) : String(cell)
+              children: typeof cell === "object" ? formatCellValue(cell, "cell") : String(cell)
             },
             colIdx
           );
@@ -16117,7 +16144,7 @@ var ResearchBriefCard = ({
               item.label,
               ": "
             ] }),
-            /* @__PURE__ */ jsx138("span", { className: "text-muted-foreground", children: typeof item.value === "object" ? JSON.stringify(item.value) : String(item.value ?? "") })
+            /* @__PURE__ */ jsx138("span", { className: "text-muted-foreground", children: formatCellValue(item.value, "label") })
           ] }, `${item.label}-${idx}`)) })
         ] })
       ]
@@ -16212,8 +16239,8 @@ var CampaignBriefCard = ({
     ] }),
     constraints.length > 0 ? /* @__PURE__ */ jsx140("ul", { className: "mt-4 space-y-1.5 text-sm text-foreground/90", children: constraints.map((item, i) => /* @__PURE__ */ jsxs100("li", { children: [
       "- ",
-      typeof item === "object" ? JSON.stringify(item) : String(item ?? "")
-    ] }, `${item}-${i}`)) }) : null
+      formatCellValue(item, "label")
+    ] }, `${typeof item === "object" ? i : item}-${i}`)) }) : null
   ] });
 };
 
@@ -21023,7 +21050,7 @@ var MCQCard = React114.memo(
     };
     const optionsEntries = resolvedOptions && Object.keys(resolvedOptions).length > 0 ? Object.entries(resolvedOptions).map(([key, val]) => [
       key,
-      typeof val === "string" ? val : typeof val === "object" && val !== null ? val.label || val.description || val.id || JSON.stringify(val) : String(val ?? "")
+      typeof val === "string" ? val : typeof val === "object" && val !== null ? val.label || val.description || val.id || formatCellValue(val, "label") : String(val ?? "")
     ]) : [];
     const labelFor = (key) => {
       const found = optionsEntries.find(([k]) => k === key);
@@ -21963,7 +21990,7 @@ var CampaignConceptCard = React116.memo(
               if (val.length === 0)
                 return /* @__PURE__ */ jsx172("span", { className: "text-muted-foreground text-sm", children: "-" });
               return /* @__PURE__ */ jsx172("div", { className: "flex flex-wrap gap-2 pt-1", children: val.map((item, idx) => {
-                const label = typeof item === "object" && item !== null ? item.label || item.value || item.name || JSON.stringify(item) : String(item);
+                const label = typeof item === "object" && item !== null ? item.label || item.value || item.name || formatCellValue(item, "badge") : String(item);
                 return /* @__PURE__ */ jsx172(
                   "span",
                   {
@@ -22003,7 +22030,7 @@ var CampaignConceptCard = React116.memo(
                     index !== void 0 ? index : "",
                     " :",
                     " ",
-                    typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle)
+                    typeof cardTitle === "object" ? formatCellValue(cardTitle, "title") : String(cardTitle)
                   ] }),
                   /* @__PURE__ */ jsxs129("div", { className: "flex flex-wrap gap-2", children: [
                     isRecommended && /* @__PURE__ */ jsx172("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-gold", children: "Recommended" }),
@@ -22061,7 +22088,7 @@ var CampaignConceptCard = React116.memo(
                   FormCard,
                   {
                     ...formCardProps,
-                    title: typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle),
+                    title: typeof cardTitle === "object" ? formatCellValue(cardTitle, "title") : String(cardTitle),
                     data,
                     fields,
                     showTimeline: true,
@@ -26702,6 +26729,22 @@ var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   "NavigationMenuContent",
   "NavigationMenuItem"
 ]);
+var renderComponentNotFoundError = (componentName, key) => {
+  return /* @__PURE__ */ jsxs144(
+    "div",
+    {
+      className: "p-4 border-2 border-dashed border-gray-300 rounded-lg bg-gray-50/80 my-2",
+      children: [
+        /* @__PURE__ */ jsx195("p", { className: "text-sm font-semibold text-gray-600", children: "This content couldn't be displayed." }),
+        /* @__PURE__ */ jsxs144("p", { className: "text-xs text-gray-400 mt-1", children: [
+          "Unknown component: ",
+          componentName
+        ] })
+      ]
+    },
+    key
+  );
+};
 var COMPONENT_SUGGESTIONS = {
   FormLabel: "FormInputAtom (with label prop)",
   FormControl: "FormInputAtom",
@@ -26956,7 +26999,7 @@ var PXEngineRenderer = React120.memo(function PXEngineRenderer2({
         console.warn(
           `[PXEngineRenderer] Component not found: ${componentName}`
         );
-        return null;
+        return renderComponentNotFoundError(componentName, uniqueKey);
       }
     }
     const resolvedNormalized = resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);