@juicemantics/veloiq-ui 0.8.5 → 0.9.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React5, { createContext, lazy, useContext, useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect, useSyncExternalStore, Suspense, useId, useImperativeHandle } from 'react';
+import React6, { createContext, lazy, useContext, useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect, useSyncExternalStore, Suspense, useId, useImperativeHandle } from 'react';
 import { ThemedLayoutV2, Show, List, useForm, DeleteButton, useTable, RefineThemes, Breadcrumb as Breadcrumb$1, Create, useSelect, Edit, ListButton, EditButton, RefreshButton } from '@refinedev/antd';
 import { useMenu, useGo, useGetIdentity, useLogout, useOne, useApiUrl, useCan, useInvalidate, useCustom, useLogin, useWarnAboutChange } from '@refinedev/core';
 import { Typography, Menu, theme, Layout, Space, AutoComplete, Input, Spin, ConfigProvider, Divider, Row, Col, Card, Grid, Form, Drawer, Modal, Button, Skeleton, Tooltip, message, Switch, Tabs, Alert, Empty, Collapse, Select, Table, DatePicker, InputNumber, Checkbox, Pagination, Breadcrumb, Tree, Tag, List as List$1, Popover, Dropdown, Avatar, TimePicker, Upload, Rate, Progress } from 'antd';
@@ -20,8 +20,6 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var ColorModeContext = createContext({ mode: "light", setMode: () => {
 }, schemaVersion: 0 });
-
-// src/utils/modelTone.ts
 var MODEL_TONES_LIGHT = [
   { solid: "#2563eb", soft: "#dbeafe", softer: "#eff6ff", text: "#1e3a8a", border: "#93c5fd", shadow: "rgba(37, 99, 235, 0.22)" },
   { solid: "#0f766e", soft: "#ccfbf1", softer: "#f0fdfa", text: "#115e59", border: "#5eead4", shadow: "rgba(15, 118, 110, 0.22)" },
@@ -138,6 +136,10 @@ var setColorSchemas = (schemas) => {
         const darkBgContent = `rgb(${shade(r, 0.06)}, ${shade(g, 0.06)}, ${shade(b, 0.06)})`;
         const darkBgElements = `rgb(${shade(r, 0.11)}, ${shade(g, 0.11)}, ${shade(b, 0.11)})`;
         const darkBgHover = `rgb(${shade(r, 0.16)}, ${shade(g, 0.16)}, ${shade(b, 0.16)})`;
+        const sidebarLightBg = hex;
+        const sidebarLightText = isDarkColor(hex) ? "#ffffff" : "#0f172a";
+        const sidebarDarkBg = lightBgElements;
+        const sidebarDarkText = "#0f172a";
         styleEl.innerHTML = `
                     /* --- LIGHT MODE OVERRIDES --- */
                     body.jm-light .ant-layout,
@@ -151,7 +153,31 @@ var setColorSchemas = (schemas) => {
                     body.jm-light .ant-menu,
                     body.jm-light .ant-menu-submenu,
                     body.jm-light .ant-menu-submenu-title,
-                    body.jm-light .ant-layout-header,
+                    body.jm-light .ant-layout-header {
+                        background-color: ${sidebarLightBg} !important;
+                        color: ${sidebarLightText} !important;
+                    }
+                    body.jm-light .ant-layout-sider *:not(input):not(textarea):not(.ant-input):not(.ant-select-selector):not(.ant-select-selection-item):not(.ant-select-selection-search-input),
+                    body.jm-light .ant-layout-header *:not(input):not(textarea):not(.ant-input):not(.ant-select-selector):not(.ant-select-selection-item):not(.ant-select-selection-search-input) {
+                        color: ${sidebarLightText} !important;
+                    }
+                    body.jm-light .ant-layout-sider .ant-menu-item-selected,
+                    body.jm-light .ant-layout-sider .ant-menu-item-selected *,
+                    body.jm-light .ant-layout-sider .ant-menu-item:hover,
+                    body.jm-light .ant-layout-sider .ant-menu-item:hover *,
+                    body.jm-light .ant-layout-header .ant-menu-item-selected,
+                    body.jm-light .ant-layout-header .ant-menu-item-selected *,
+                    body.jm-light .ant-layout-header .ant-menu-item:hover,
+                    body.jm-light .ant-layout-header .ant-menu-item:hover * {
+                        color: revert !important;
+                    }
+                    body.jm-light .ant-menu-submenu-popup {
+                        background-color: ${sidebarLightBg} !important;
+                    }
+                    body.jm-light .ant-menu-submenu-popup .ant-menu-item:not(.ant-menu-item-selected),
+                    body.jm-light .ant-menu-submenu-popup .ant-menu-submenu-title:not(.ant-menu-submenu-selected) {
+                        color: ${sidebarLightText} !important;
+                    }
                     body.jm-light .ant-card,
                     body.jm-light .ant-table-wrapper .ant-table,
                     body.jm-light .ant-table-thead > tr > th,
@@ -181,7 +207,31 @@ var setColorSchemas = (schemas) => {
                     body.jm-dark .ant-menu,
                     body.jm-dark .ant-menu-submenu,
                     body.jm-dark .ant-menu-submenu-title,
-                    body.jm-dark .ant-layout-header,
+                    body.jm-dark .ant-layout-header {
+                        background-color: ${sidebarDarkBg} !important;
+                        color: ${sidebarDarkText} !important;
+                    }
+                    body.jm-dark .ant-layout-sider *:not(input):not(textarea):not(.ant-input):not(.ant-select-selector):not(.ant-select-selection-item):not(.ant-select-selection-search-input),
+                    body.jm-dark .ant-layout-header *:not(input):not(textarea):not(.ant-input):not(.ant-select-selector):not(.ant-select-selection-item):not(.ant-select-selection-search-input) {
+                        color: ${sidebarDarkText} !important;
+                    }
+                    body.jm-dark .ant-layout-sider .ant-menu-item-selected,
+                    body.jm-dark .ant-layout-sider .ant-menu-item-selected *,
+                    body.jm-dark .ant-layout-sider .ant-menu-item:hover,
+                    body.jm-dark .ant-layout-sider .ant-menu-item:hover *,
+                    body.jm-dark .ant-layout-header .ant-menu-item-selected,
+                    body.jm-dark .ant-layout-header .ant-menu-item-selected *,
+                    body.jm-dark .ant-layout-header .ant-menu-item:hover,
+                    body.jm-dark .ant-layout-header .ant-menu-item:hover * {
+                        color: revert !important;
+                    }
+                    body.jm-dark .ant-menu-submenu-popup {
+                        background-color: ${sidebarDarkBg} !important;
+                    }
+                    body.jm-dark .ant-menu-submenu-popup .ant-menu-item:not(.ant-menu-item-selected),
+                    body.jm-dark .ant-menu-submenu-popup .ant-menu-submenu-title:not(.ant-menu-submenu-selected) {
+                        color: ${sidebarDarkText} !important;
+                    }
                     body.jm-dark .ant-card,
                     body.jm-dark .ant-table-wrapper .ant-table,
                     body.jm-dark .ant-table-thead > tr > th,
@@ -281,7 +331,7 @@ function guessIcon(text, isModule = false) {
 function resolveIcon(iconName) {
   const registry = AntDIcons2;
   const IconCls = registry[iconName];
-  return IconCls ? React5.createElement(IconCls) : React5.createElement(registry["TableOutlined"]);
+  return IconCls ? React6.createElement(IconCls) : React6.createElement(registry["TableOutlined"]);
 }
 function getNavEntry(navConfig, key) {
   return navConfig.find((e) => e.key === key);
@@ -369,6 +419,7 @@ function injectJourneyMenuItems(items, byModule) {
   return walk(items);
 }
 var HorizontalMenu = ({ navConfig = [] }) => {
+  const { mode } = useContext(ColorModeContext);
   const { menuItems, selectedKey } = useMenu();
   const go = useGo();
   const journeysByModule = useJourneyMenuItems();
@@ -394,7 +445,7 @@ var HorizontalMenu = ({ navConfig = [] }) => {
   const renderLabel = (item, depth, hasChildren) => {
     const label = String(item?.label || item?.name || item?.key || "");
     const isModule = depth === 0 || hasChildren;
-    const tone = isModule ? getModelTone(`module:${item?.key || label}`) : getModelTone(resolveModelSeed(item));
+    isModule ? getModelTone(`module:${item?.key || label}`) : getModelTone(resolveModelSeed(item));
     return /* @__PURE__ */ jsx(
       "span",
       {
@@ -404,7 +455,7 @@ var HorizontalMenu = ({ navConfig = [] }) => {
           padding: isModule ? "2px 5px" : "1px 5px",
           borderRadius: 8,
           background: "transparent",
-          color: tone.text,
+          color: "inherit",
           fontWeight: 400
         },
         children: label
@@ -430,6 +481,7 @@ var HorizontalMenu = ({ navConfig = [] }) => {
     Menu,
     {
       mode: "horizontal",
+      theme: mode === "dark" ? "light" : "dark",
       selectedKeys: [selectedKey],
       items,
       style: {
@@ -468,7 +520,7 @@ var CustomSider = ({ collapsed, logo, appTitle, navConfig = [] }) => {
   const renderLabel = (item, depth, hasChildren) => {
     const label = String(item?.label || item?.name || item?.key || "");
     const isModule = depth === 0 || hasChildren;
-    const tone = isModule ? getModelTone(`module:${item?.key || label}`) : getModelTone(resolveModelSeed(item));
+    isModule ? getModelTone(`module:${item?.key || label}`) : getModelTone(resolveModelSeed(item));
     return /* @__PURE__ */ jsx(
       "span",
       {
@@ -478,7 +530,7 @@ var CustomSider = ({ collapsed, logo, appTitle, navConfig = [] }) => {
           padding: isModule ? "3px 8px" : "2px 8px",
           borderRadius: 8,
           background: "transparent",
-          color: tone.text,
+          color: "inherit",
           fontWeight: 400
         },
         children: label
@@ -731,6 +783,7 @@ var GlobalSearch = () => {
   const navigate = useNavigate();
   const [searchText, setSearchText] = useState("");
   const { results: backendResults, searching, search, clear } = useRecordSearch();
+  const { token } = theme.useToken();
   const searchableResources = useMemo(() => flattenMenuItems(menuItems), [menuItems]);
   const resourceResults = useMemo(() => {
     const q2 = searchText.toLowerCase().trim();
@@ -820,7 +873,7 @@ var GlobalSearch = () => {
           suffix: !focused ? /* @__PURE__ */ jsx(Typography.Text, { type: "secondary", style: { fontSize: 9 }, children: "\u2303K" }) : void 0,
           allowClear: true,
           size: "small",
-          style: !focused ? { paddingInline: 2 } : void 0
+          style: !focused ? { paddingInline: 2, color: token.colorText } : { color: token.colorText }
         }
       )
     }
@@ -1276,7 +1329,7 @@ var CommandCenterPortal = ({
               /* @__PURE__ */ jsx(Typography.Text, { style: SECTION_LABEL_STYLE, children: "Pinned" }),
               pinnedLoading && /* @__PURE__ */ jsx(Spin, { size: "small", style: { marginLeft: "auto" } })
             ] }),
-            pinnedItems.length > 0 && /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", overflowY: "auto", maxHeight: 400 }, children: pinnedItems.map((item, idx) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+            pinnedItems.length > 0 && /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", overflowY: "auto", maxHeight: 400 }, children: pinnedItems.map((item, idx) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "2px 0", borderColor: "rgba(255,255,255,0.04)" } }),
               renderRow(
                 `pin-${item.resource}-${item.id}`,
@@ -1299,7 +1352,7 @@ var CommandCenterPortal = ({
               /* @__PURE__ */ jsx(ClockCircleOutlined, { style: { color: "rgba(255,255,255,0.45)", fontSize: 12 } }),
               /* @__PURE__ */ jsx(Typography.Text, { style: SECTION_LABEL_STYLE, children: "Recent" })
             ] }),
-            /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", overflowY: "auto", maxHeight: 400 }, children: recentItems.map((item, idx) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px", overflowY: "auto", maxHeight: 400 }, children: recentItems.map((item, idx) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "2px 0", borderColor: "rgba(255,255,255,0.04)" } }),
               renderRow(
                 `recent-${item.resource}-${item.id}`,
@@ -1328,7 +1381,7 @@ var CommandCenterPortal = ({
               const moduleLabel = String(module.label || module.name || "");
               const tone = getModelTone(moduleKey);
               const children = navConfig.length > 0 ? sortItemsByNavConfig(module.children || [], navConfig) : module.children || [];
-              return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
                 modIdx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "5px 0", borderColor: "rgba(255,255,255,0.06)" } }),
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, padding: "4px 8px 2px" }, children: [
                   /* @__PURE__ */ jsx("span", { style: { color: tone.solid, fontSize: 12, display: "flex", alignItems: "center" }, children: getItemIcon(moduleKey, moduleLabel, true) }),
@@ -1339,7 +1392,7 @@ var CommandCenterPortal = ({
                   const childLabel = String(child.label || child.name || "");
                   const childTone = getModelTone(childKey);
                   const childIcon = getItemIcon(childKey, childLabel, false, child.icon);
-                  return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+                  return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
                     idx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "2px 0", borderColor: "rgba(255,255,255,0.04)" } }),
                     /* @__PURE__ */ jsxs(
                       "div",
@@ -1391,7 +1444,7 @@ var CommandCenterPortal = ({
             const moduleLabel = child.moduleLabel || "";
             const navId = `cmd-${childKey}`;
             const active = isActive(navId);
-            return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "2px 0", borderColor: "rgba(255,255,255,0.05)" } }),
               /* @__PURE__ */ jsxs(
                 "div",
@@ -1435,13 +1488,13 @@ var CommandCenterPortal = ({
           ] }),
           backendResults.length > 0 && /* @__PURE__ */ jsx("div", { style: { padding: "6px 10px" }, children: backendResults.map((modelResult, modelIdx) => {
             const tone = getModelTone(modelResult.resource);
-            return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
               modelIdx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "4px 0", borderColor: "rgba(255,255,255,0.05)" } }),
               /* @__PURE__ */ jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.35)", fontSize: 10, textTransform: "uppercase", letterSpacing: "0.07em", display: "block", padding: "4px 10px 2px" }, children: modelResult.modelLabel }),
               modelResult.records.map((record, recIdx) => {
                 const navId = `record-${modelResult.resource}-${record.id}`;
                 const active = isActive(navId);
-                return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+                return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
                   recIdx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "2px 0", borderColor: "rgba(255,255,255,0.04)" } }),
                   /* @__PURE__ */ jsxs(
                     "div",
@@ -1523,7 +1576,7 @@ var CommandCenterPortal = ({
                 const childLabel = String(child.label || child.name || "");
                 const childTone = getModelTone(childKey);
                 const childIcon = getItemIcon(childKey, childLabel, false, child.icon);
-                return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+                return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
                   idx > 0 && /* @__PURE__ */ jsx(Divider, { style: { margin: "2px 0", borderColor: "rgba(255,255,255,0.05)" } }),
                   /* @__PURE__ */ jsxs(
                     "div",
@@ -4648,7 +4701,7 @@ var extractButtonLabel = (node) => {
     }
     return null;
   }
-  if (React5.isValidElement(node)) {
+  if (React6.isValidElement(node)) {
     return extractButtonLabel(node.props?.children);
   }
   return null;
@@ -4665,14 +4718,14 @@ var renderIconOnlyButtons = (nodes) => {
   const enhanceNode = (node, index) => {
     if (node === null || node === void 0 || typeof node === "boolean") return node;
     if (Array.isArray(node)) return node.map((child, childIndex) => enhanceNode(child, childIndex));
-    if (!React5.isValidElement(node)) return node;
+    if (!React6.isValidElement(node)) return node;
     const componentName = node.type?.displayName || node.type?.name;
     if (componentName === "RefreshButton") return null;
     const fallbackLabel = componentName ? fallbackLabels[componentName] : null;
     const nodeProps = node.props;
     if (fallbackLabel) {
       const label = extractButtonLabel(nodeProps?.children) || fallbackLabel;
-      const element = React5.cloneElement(node, {
+      const element = React6.cloneElement(node, {
         ...nodeProps,
         hideText: true,
         children: null
@@ -4683,7 +4736,7 @@ var renderIconOnlyButtons = (nodes) => {
     if (nodeProps?.icon) {
       const label = extractButtonLabel(nodeProps?.children);
       if (label) {
-        const element = React5.cloneElement(node, {
+        const element = React6.cloneElement(node, {
           ...nodeProps,
           children: null
         });
@@ -4691,15 +4744,15 @@ var renderIconOnlyButtons = (nodes) => {
       }
     }
     if (nodeProps?.children) {
-      const mappedChildren = React5.Children.map(nodeProps.children, (child, childIndex) => enhanceNode(child, childIndex));
-      return React5.cloneElement(node, {
+      const mappedChildren = React6.Children.map(nodeProps.children, (child, childIndex) => enhanceNode(child, childIndex));
+      return React6.cloneElement(node, {
         ...nodeProps,
         children: mappedChildren
       });
     }
     return node;
   };
-  return React5.Children.map(nodes, (child, index) => enhanceNode(child, index));
+  return React6.Children.map(nodes, (child, index) => enhanceNode(child, index));
 };
 var ResponsiveHeaderButtons = ({ children }) => {
   const screens = Grid.useBreakpoint();
@@ -4750,7 +4803,7 @@ var extractButtonLabel2 = (node) => {
     }
     return null;
   }
-  if (React5.isValidElement(node)) {
+  if (React6.isValidElement(node)) {
     return extractButtonLabel2(node.props?.children);
   }
   return null;
@@ -4768,12 +4821,12 @@ var renderIconOnlyButtons2 = (nodes) => {
   const enhanceNode = (node, index) => {
     if (node === null || node === void 0 || typeof node === "boolean") return node;
     if (Array.isArray(node)) return node.map((child, childIndex) => enhanceNode(child, childIndex));
-    if (!React5.isValidElement(node)) return node;
+    if (!React6.isValidElement(node)) return node;
     const componentName = node.type?.displayName || node.type?.name;
     const fallbackLabel = componentName ? fallbackLabels[componentName] : null;
     if (fallbackLabel) {
       const label = extractButtonLabel2(node.props?.children) || fallbackLabel;
-      const element = React5.cloneElement(node, {
+      const element = React6.cloneElement(node, {
         ...node.props,
         hideText: true,
         children: null
@@ -4784,7 +4837,7 @@ var renderIconOnlyButtons2 = (nodes) => {
     if (node.props?.icon) {
       const label = extractButtonLabel2(node.props?.children);
       if (label) {
-        const element = React5.cloneElement(node, {
+        const element = React6.cloneElement(node, {
           ...node.props,
           children: null
         });
@@ -4792,15 +4845,15 @@ var renderIconOnlyButtons2 = (nodes) => {
       }
     }
     if (node.props?.children) {
-      const mappedChildren = React5.Children.map(node.props.children, (child, childIndex) => enhanceNode(child, childIndex));
-      return React5.cloneElement(node, {
+      const mappedChildren = React6.Children.map(node.props.children, (child, childIndex) => enhanceNode(child, childIndex));
+      return React6.cloneElement(node, {
         ...node.props,
         children: mappedChildren
       });
     }
     return node;
   };
-  return React5.Children.map(nodes, (child, index) => enhanceNode(child, index));
+  return React6.Children.map(nodes, (child, index) => enhanceNode(child, index));
 };
 var renderStandardShowHeaderButtons = ({
   listButtonProps,
@@ -4964,7 +5017,7 @@ var wrappedPageTitleStyle2 = {
 };
 var renderWrappedPageTitle = (title) => {
   if (title === null || title === void 0 || title === false) return title;
-  return React5.createElement("div", { style: wrappedPageTitleStyle2 }, title);
+  return React6.createElement("div", { style: wrappedPageTitleStyle2 }, title);
 };
 var numberFormatter = new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 });
 var decimalFormatter = new Intl.NumberFormat(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
@@ -5080,6 +5133,39 @@ var getSortPriority = (columnSort, fieldKey) => {
   const index = columnSort.findIndex((item) => item.fieldKey === fieldKey);
   return index === -1 ? 1 : columnSort.length - index + 1;
 };
+var _TOKEN_KEY = "jm_access_token";
+function useAuthenticatedFileUrl(rawUrl) {
+  const [src, setSrc] = useState("");
+  useEffect(() => {
+    if (!rawUrl) {
+      setSrc("");
+      return;
+    }
+    if (!rawUrl.includes("/api/file/")) {
+      setSrc(rawUrl);
+      return;
+    }
+    const token = localStorage.getItem(_TOKEN_KEY) || "";
+    const controller = new AbortController();
+    let objectUrl = "";
+    fetch(rawUrl, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+      signal: controller.signal
+    }).then((r) => r.ok ? r.blob() : Promise.reject()).then((blob) => {
+      objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+    }).catch(() => setSrc(""));
+    return () => {
+      controller.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [rawUrl]);
+  return src;
+}
+var AuthenticatedImage = ({ url, alt, style }) => {
+  const src = useAuthenticatedFileUrl(url);
+  return src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "", style }) : null;
+};
 var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "tif", "tiff"]);
 var isImageRecord = (record) => {
   if (record?.avatar_url || record?.image_url || record?.photo_url) return true;
@@ -5137,7 +5223,7 @@ var renderSharedGalleryCard = ({
       style: { width: imageWidth, display: "grid", gap: 6, cursor: onClick ? "pointer" : "default" },
       onClick,
       children: [
-        contentUrl ? /* @__PURE__ */ jsx("img", { src: contentUrl, alt: label, style: imageStyle }) : /* @__PURE__ */ jsx("div", { style: { ...imageStyle, display: "flex", alignItems: "center", justifyContent: "center", color: "#8c8c8c" }, children: /* @__PURE__ */ jsx(FileTextOutlined, { style: { fontSize: 24 } }) }),
+        contentUrl ? /* @__PURE__ */ jsx(AuthenticatedImage, { url: contentUrl, alt: label, style: imageStyle }) : /* @__PURE__ */ jsx("div", { style: { ...imageStyle, display: "flex", alignItems: "center", justifyContent: "center", color: "#8c8c8c" }, children: /* @__PURE__ */ jsx(FileTextOutlined, { style: { fontSize: 24 } }) }),
         /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: textColor, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: label })
       ]
     },
@@ -6082,6 +6168,8 @@ var AnalysisChart = ({
   };
   const primarySeriesKey = seriesKeys[0] || "__count__";
   const secondarySeriesKey = seriesKeys[1];
+  const resolveNumericField = (fields, n) => fields[Math.min(n, fields.length - 1)] ?? { key: "__count__", label: _10("Count") };
+  const resolveCategoryField = (field1, field2) => field2 ?? field1;
   const getNumericValue = (record, key) => {
     if (key === "__count__") return 1;
     const value = Number(record?.[key]);
@@ -6498,11 +6586,11 @@ var AnalysisChart = ({
     ] });
   };
   const renderScatter = (isBubble) => {
-    if (numericFields.length < 2) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Scatter needs at least two numeric fields." });
+    if (numericFields.length === 0) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Scatter needs at least one numeric field." });
     }
-    const xField = numericFields[0];
-    const yField = numericFields[1];
+    const xField = resolveNumericField(numericFields, 0);
+    const yField = resolveNumericField(numericFields, 1);
     const points = rawRows.map((row) => {
       const x = getNumericValue(row, xField.key);
       const y = getNumericValue(row, yField.key);
@@ -6780,11 +6868,12 @@ var AnalysisChart = ({
     ] });
   };
   const renderHeatmap = () => {
-    if (!categoryField1 || !categoryField2) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Heatmap needs two category fields." });
+    if (!categoryField1) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Heatmap needs a category field." });
     }
+    const effectiveCat2 = resolveCategoryField(categoryField1, categoryField2);
     const cat1Field = modelField(categoryField1);
-    const cat2Field = modelField(categoryField2);
+    const cat2Field = modelField(effectiveCat2);
     const rowLabels = [];
     const colLabels = [];
     const grid = /* @__PURE__ */ new Map();
@@ -6862,43 +6951,45 @@ var AnalysisChart = ({
     ] });
   };
   const renderCrosstab = () => {
-    if (!categoryField1 || !categoryField2) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Crosstab needs two category fields." });
+    if (!categoryField1) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Crosstab needs a category field." });
     }
+    const effectiveCat2 = resolveCategoryField(categoryField1, categoryField2);
     const cat1Field = modelField(categoryField1);
-    const cat2Field = modelField(categoryField2);
+    const cat2Field = modelField(effectiveCat2);
     return /* @__PURE__ */ jsx(
       CrosstabTable,
       {
         rows: rawRows,
         rowField: categoryField1,
-        colField: categoryField2,
+        colField: effectiveCat2 ?? categoryField1,
         cellFieldKeys: seriesKeys,
         cellFieldLabels: seriesLabels,
         allFields,
         summaryFn,
         formatCategoryValue,
         numericBarColor,
-        caption: `${_10("Crosstab")}: ${cat1Field?.label || categoryField1} \xD7 ${cat2Field?.label || categoryField2} (${summaryFn})`
+        caption: `${_10("Crosstab")}: ${cat1Field?.label || categoryField1} \xD7 ${cat2Field?.label || effectiveCat2} (${summaryFn})`
       }
     );
   };
   const renderRadar = () => {
-    if (seriesKeys.length < 3) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Radar needs at least three series." });
+    if (seriesKeys.length === 0) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Radar needs at least one series." });
     }
+    const effectiveSeriesKeys = seriesKeys.length >= 3 ? seriesKeys : Array.from({ length: 3 }, (_43, i) => seriesKeys[i % seriesKeys.length]);
     const centerX = paddingLeft + chartWidth / 2;
     const centerY = paddingTop + chartHeight / 2;
     const radius = Math.min(chartWidth, chartHeight) * 0.35;
-    const maxBySeries = seriesKeys.reduce((acc, key) => {
+    const maxBySeries = effectiveSeriesKeys.reduce((acc, key) => {
       acc[key] = Math.max(...data.map((group) => group.values[key] || 0), 1);
       return acc;
     }, {});
-    const angleStep = Math.PI * 2 / seriesKeys.length;
+    const angleStep = Math.PI * 2 / effectiveSeriesKeys.length;
     return /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
       renderTitle(),
       renderCaption("Radar chart"),
-      seriesKeys.map((seriesKey, index) => {
+      effectiveSeriesKeys.map((seriesKey, index) => {
         const angle = -Math.PI / 2 + index * angleStep;
         const x = centerX + radius * Math.cos(angle);
         const y = centerY + radius * Math.sin(angle);
@@ -6908,7 +6999,7 @@ var AnalysisChart = ({
         ] }, `radar-axis-${seriesKey}`);
       }),
       data.map((group, groupIndex) => {
-        const points = seriesKeys.map((seriesKey, index) => {
+        const points = effectiveSeriesKeys.map((seriesKey, index) => {
           const value = group.values[seriesKey] || 0;
           const ratio = value / Math.max(1, maxBySeries[seriesKey]);
           const angle = -Math.PI / 2 + index * angleStep;
@@ -6933,13 +7024,74 @@ var AnalysisChart = ({
       })
     ] });
   };
-  const renderCombo = () => {
-    if (!secondarySeriesKey) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Combo needs at least two series selected." });
+  const render3D = () => {
+    if (numericFields.length === 0) {
+      return /* @__PURE__ */ jsx(Empty, { description: "3D scatter needs at least one numeric field." });
     }
+    const xField = resolveNumericField(numericFields, 0);
+    const yField = resolveNumericField(numericFields, 1);
+    const zField = resolveNumericField(numericFields, 2);
+    const points = rawRows.map((row) => {
+      const x = getNumericValue(row, xField.key);
+      const y = getNumericValue(row, yField.key);
+      const z = getNumericValue(row, zField.key);
+      if (x === null || y === null || z === null) return null;
+      return { x, y, z };
+    }).filter((p) => !!p);
+    if (points.length === 0) return renderNoChartDataMessage();
+    const xs = points.map((p) => p.x);
+    const ys = points.map((p) => p.y);
+    const zs = points.map((p) => p.z);
+    const xMin = Math.min(...xs), xMax = Math.max(...xs);
+    const yMin = Math.min(...ys), yMax = Math.max(...ys);
+    const zMin = Math.min(...zs), zMax = Math.max(...zs);
+    const norm = (v, lo, hi) => hi === lo ? 0.5 : (v - lo) / (hi - lo);
+    const isoScale = Math.min(chartWidth, chartHeight) * 0.38;
+    const cx = paddingLeft + chartWidth * 0.5;
+    const cy = paddingTop + chartHeight * 0.55;
+    const cos30 = Math.cos(Math.PI / 6);
+    const sin30 = Math.sin(Math.PI / 6);
+    const project = (nx, ny, nz) => ({
+      sx: cx + (nx - nz) * cos30 * isoScale,
+      sy: cy - ny * isoScale + (nx + nz) * sin30 * isoScale
+    });
+    const axisEnd = (nx, ny, nz) => project(nx, ny, nz);
+    const origin = project(0, 0, 0);
+    const xTip = axisEnd(1, 0, 0);
+    const yTip = axisEnd(0, 1, 0);
+    const zTip = axisEnd(0, 0, 1);
+    const projected = points.map(
+      (p) => project(norm(p.x, xMin, xMax), norm(p.y, yMin, yMax), norm(p.z, zMin, zMax))
+    );
+    return /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
+      renderTitle(),
+      renderCaption(`3D: ${xField.label} \xD7 ${yField.label} \xD7 ${zField.label}`),
+      /* @__PURE__ */ jsx("line", { x1: origin.sx, y1: origin.sy, x2: xTip.sx, y2: xTip.sy, stroke: colors[0], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsx("line", { x1: origin.sx, y1: origin.sy, x2: yTip.sx, y2: yTip.sy, stroke: colors[1], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsx("line", { x1: origin.sx, y1: origin.sy, x2: zTip.sx, y2: zTip.sy, stroke: colors[2], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsx("text", { x: xTip.sx + 4, y: xTip.sy + 4, fontSize: "11", fill: colors[0], children: xField.label }),
+      /* @__PURE__ */ jsx("text", { x: yTip.sx + 4, y: yTip.sy, fontSize: "11", fill: colors[1], children: yField.label }),
+      /* @__PURE__ */ jsx("text", { x: zTip.sx + 4, y: zTip.sy + 4, fontSize: "11", fill: colors[2], children: zField.label }),
+      projected.map((p, i) => /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "chart-item chart-point",
+          style: { "--delay": `${i * 8}ms` },
+          cx: p.sx,
+          cy: p.sy,
+          r: 4,
+          fill: colors[0],
+          opacity: 0.7
+        },
+        `3d-${i}`
+      ))
+    ] });
+  };
+  const renderCombo = () => {
+    const effectiveSecondaryKey = secondarySeriesKey ?? primarySeriesKey;
     const valuesCombo = data.flatMap((group) => [
       group.values[primarySeriesKey] || 0,
-      group.values[secondarySeriesKey] || 0
+      group.values[effectiveSecondaryKey] || 0
     ]);
     const maxCombo = Math.max(...valuesCombo, 1);
     const minCombo = Math.min(...valuesCombo, 0);
@@ -6948,7 +7100,7 @@ var AnalysisChart = ({
     const barWidth2 = groupWidth2 * 0.6;
     const points = data.map((group, index) => {
       const x = paddingLeft + index * groupWidth2 + groupWidth2 / 2;
-      const y = scaleYCombo(group.values[secondarySeriesKey] || 0);
+      const y = scaleYCombo(group.values[effectiveSecondaryKey] || 0);
       return `${x},${y}`;
     }).join(" ");
     return /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
@@ -6956,7 +7108,7 @@ var AnalysisChart = ({
       renderLegendItems(
         [
           { label: seriesLabels[primarySeriesKey] || primarySeriesKey, color: colors[0] },
-          { label: seriesLabels[secondarySeriesKey] || secondarySeriesKey, color: colors[2] }
+          { label: seriesLabels[effectiveSecondaryKey] || effectiveSecondaryKey, color: colors[2] }
         ],
         8
       ),
@@ -7007,13 +7159,14 @@ var AnalysisChart = ({
     chartType === "histogram" && renderHistogram(),
     chartType === "scatter" && renderScatter(false),
     chartType === "bubble" && renderScatter(true),
-    chartType === "box" && renderBoxPlot(),
+    (chartType === "box" || chartType === "boxplot") && renderBoxPlot(),
     chartType === "waterfall" && renderWaterfall(),
     chartType === "heatmap" && renderHeatmap(),
     chartType === "crosstab" && renderCrosstab(),
     chartType === "radar" && renderRadar(),
     chartType === "combo" && renderCombo(),
-    chartType !== "histogram" && chartType !== "scatter" && chartType !== "bubble" && chartType !== "box" && chartType !== "waterfall" && chartType !== "heatmap" && chartType !== "crosstab" && chartType !== "radar" && chartType !== "combo" && /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
+    chartType === "3d" && render3D(),
+    (chartType === "bar" || chartType === "line" || chartType === "area" || chartType === "stacked" || chartType === "bar-horizontal" || chartType === "stacked-horizontal" || chartType === "area-horizontal") && /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
       renderTitle(),
       renderLegendItems(
         seriesKeys.map((seriesKey, index) => ({
@@ -7460,6 +7613,13 @@ body, table, th, td, input, button, select, textarea, div, span, p, li, ul, ol {
       if (syncHeightTimerRef.current) clearTimeout(syncHeightTimerRef.current);
     };
   }, []);
+  const inlineHtml = useMemo(
+    () => (html || "").replace(
+      /<script\b[^>]*\bsrc=["']?[^"'>]*cdn\.plot\.ly[^"'>]*["']?[^>]*><\/script>/gi,
+      ""
+    ),
+    [html]
+  );
   if (mode === "iframe") {
     return /* @__PURE__ */ jsx(
       "iframe",
@@ -7470,7 +7630,7 @@ body, table, th, td, input, button, select, textarea, div, span, p, li, ul, ol {
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { ref: htmlRef, dangerouslySetInnerHTML: { __html: html || "" }, style });
+  return /* @__PURE__ */ jsx("div", { ref: htmlRef, dangerouslySetInnerHTML: { __html: inlineHtml }, style });
 };
 
 // src/components/DynamicResource/relations/helpers.ts
@@ -7923,7 +8083,7 @@ var renderModelHeading = ({
         paddingLeft: 10,
         paddingRight: 10
       },
-      children: /* @__PURE__ */ jsx("div", { style: { minWidth: 0, fontSize: 16, fontWeight: 700, color: tone.solid, padding: "2px 8px" }, children: title })
+      children: /* @__PURE__ */ jsx("div", { style: { minWidth: 0, fontSize: 18, fontWeight: 700, color: tone.solid, padding: "2px 8px" }, children: title })
     }
   );
 };
@@ -8455,7 +8615,7 @@ var useShowActionsPreferences = (model, allModels, record, saveButtonProps, conf
     headerButtons
   };
 };
-var PrimaryShowContext = React5.createContext(null);
+var PrimaryShowContext = React6.createContext(null);
 
 // src/components/DynamicResource/utils/columnFilters.ts
 var truncateLabel = (s) => s.length > 15 ? s.substring(0, 15) + "\u2026" : s;
@@ -8686,7 +8846,7 @@ function useRoleFilteredModel(model) {
   }, [model, userRoles]);
 }
 var _19 = window._ || ((text) => text);
-var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
+var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded, beforeTabs }) => {
   const model = useRoleFilteredModel(modelProp);
   applyI18nLabelsToModel(model);
   applyI18nLabelsToModels(allModels);
@@ -8748,6 +8908,7 @@ var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
     return /* @__PURE__ */ jsxs("div", { className: "jm-tone-scope", style: toneScopeStyle(modelTone), children: [
       /* @__PURE__ */ jsx(ToneSharedStyles, {}),
       !record ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: /* @__PURE__ */ jsx(Spin, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        beforeTabs,
         /* @__PURE__ */ jsx(Tabs, { activeKey: activeTabKey, onChange: setActiveTabKey, items: lazyItems, destroyInactiveTabPane: true }),
         /* @__PURE__ */ jsx(
           ShowFooterButtons,
@@ -8775,6 +8936,7 @@ var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
         })),
         headerButtons,
         children: [
+          beforeTabs,
           /* @__PURE__ */ jsx(Tabs, { activeKey: activeTabKey, onChange: setActiveTabKey, items: lazyItems, destroyInactiveTabPane: true }),
           /* @__PURE__ */ jsx(
             ShowFooterButtons,
@@ -8798,7 +8960,7 @@ var RelationSelect = ({ field, value, onChange, allModels, multiple, serverSearc
   const resolvedResource = resourceName && allModels ? resolveResourcePath(resourceName, allModels) : resourceName;
   const referencedModel = resourceName ? findModelByName(allModels, resourceName) : void 0;
   const resolvedOptionValue = field.optionValue || referencedModel?.pkField || "eid";
-  const [loadAll, setLoadAll] = React5.useState(false);
+  const [loadAll, setLoadAll] = React6.useState(false);
   const pageSize = loadAll ? 999999 : RELATION_SELECT_DEFAULT_PAGE_SIZE;
   const { selectProps, queryResult } = useSelect({
     resource: resolvedResource,
@@ -8815,8 +8977,8 @@ var RelationSelect = ({ field, value, onChange, allModels, multiple, serverSearc
   const loadedCount = filteredOptions?.length ?? 0;
   const isCapped = !loadAll && serverTotal > loadedCount && loadedCount > 0;
   const normalizeSearch = (val) => String(val ?? "").toLowerCase();
-  const selectedSet = React5.useMemo(() => new Set(Array.isArray(value) ? value : value !== void 0 && value !== null ? [value] : []), [value]);
-  const [searchValue, setSearchValue] = React5.useState("");
+  const selectedSet = React6.useMemo(() => new Set(Array.isArray(value) ? value : value !== void 0 && value !== null ? [value] : []), [value]);
+  const [searchValue, setSearchValue] = React6.useState("");
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       Select,
@@ -9752,7 +9914,9 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
       min_width: cell.min_width ?? "",
       max_width: cell.max_width ?? "",
       min_height: cell.min_height ?? "",
-      max_height: cell.max_height ?? ""
+      max_height: cell.max_height ?? "",
+      chart_url: cell.chart_url ?? "",
+      chart_title: cell.chart_title ?? ""
     });
   }, [cell, tabId, config, form]);
   const handleSave = () => {
@@ -9768,7 +9932,9 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
       min_width: values.min_width || null,
       max_width: values.max_width || null,
       min_height: values.min_height || null,
-      max_height: values.max_height || null
+      max_height: values.max_height || null,
+      chart_url: values.chart_url || void 0,
+      chart_title: values.chart_title || void 0
     };
     const currentTab = config.tabs.find((t) => t.id === tabId);
     const nameUnchanged = currentTab?.name.trim().toLowerCase() === newTabName.toLowerCase();
@@ -9815,7 +9981,7 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
   return /* @__PURE__ */ jsx(
     Drawer,
     {
-      title: cell?.source_type !== "model" ? `Configure section: ${cell?.section_name ?? cell?.model ?? ""}` : `Configure cell: ${cell?.model ?? ""}`,
+      title: cell?.source_type === "plotly_chart" ? `Configure chart: ${cell?.chart_title ?? cell?.model ?? ""}` : cell?.source_type !== "model" ? `Configure section: ${cell?.section_name ?? cell?.model ?? ""}` : `Configure cell: ${cell?.model ?? ""}`,
       placement: "right",
       width: 380,
       open,
@@ -9843,6 +10009,11 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
           /* @__PURE__ */ jsx(Divider, { orientation: "left", children: "View" }),
           /* @__PURE__ */ jsx(Form.Item, { name: "view_type", label: "View type", children: /* @__PURE__ */ jsx(Select, { options: VIEW_TYPE_OPTIONS }) })
         ] }),
+        cell?.source_type === "plotly_chart" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { orientation: "left", children: "Chart" }),
+          /* @__PURE__ */ jsx(Form.Item, { name: "chart_title", label: "Chart title", children: /* @__PURE__ */ jsx(Input, { placeholder: "e.g. Confidence by Month" }) }),
+          /* @__PURE__ */ jsx(Form.Item, { name: "chart_url", label: "Chart URL", children: /* @__PURE__ */ jsx(Input, { placeholder: "/api/nl-answers-confidence-by-month-chart" }) })
+        ] }),
         /* @__PURE__ */ jsx(Divider, { orientation: "left", children: "Size" }),
         /* @__PURE__ */ jsxs(Space, { wrap: true, children: [
           /* @__PURE__ */ jsx(Form.Item, { name: "min_width", label: "Min width", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx(Input, { placeholder: "e.g. 320px", style: { width: 130 } }) }),
@@ -10047,6 +10218,13 @@ var SectionsGrid = ({ cells, config, tabId, renderContent, onConfigChange, isCon
     if (!cells.length) return 1;
     return Math.max(...cells.map((c) => c.row)) + 1;
   }, [cells]);
+  const soloRows = useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const c of cells) counts.set(c.row, (counts.get(c.row) ?? 0) + 1);
+    const solo = /* @__PURE__ */ new Set();
+    for (const [row, count] of counts) if (count === 1) solo.add(row);
+    return solo;
+  }, [cells]);
   const visibleCells = maximizedCellId ? cells.filter((c) => c.id === maximizedCellId) : cells;
   const gridStyle = {
     display: "grid",
@@ -10065,7 +10243,7 @@ var SectionsGrid = ({ cells, config, tabId, renderContent, onConfigChange, isCon
       "div",
       {
         style: {
-          gridColumn: maximizedCellId ? "1 / -1" : `${cell.col + 1}`,
+          gridColumn: maximizedCellId || soloRows.has(cell.row) ? "1 / -1" : `${cell.col + 1}`,
           gridRow: maximizedCellId ? "1 / -1" : `${cell.row + 1}`
         },
         children: /* @__PURE__ */ jsx(
@@ -10352,7 +10530,6 @@ var SectionCellContent = ({
         borderRadius: 6,
         overflowWrap: "anywhere",
         maxWidth: "100%",
-        border: `1px solid ${token.colorBorder}`,
         ...parseInlineStyle(item.html_format)
       };
       const relationLabelStyle = {
@@ -10387,7 +10564,6 @@ var SectionCellContent = ({
       lineHeight: 1.15,
       background: valueBackground,
       borderRadius: 6,
-      border: `1px solid ${token.colorBorder}`,
       maxWidth: "100%",
       overflowWrap: "anywhere",
       textAlign: field.type === "number" && !field.reference ? "right" : "left",
@@ -15386,7 +15562,8 @@ var RelatedObjectsTable = ({ rel, record, relatedModel, parentModel, showActions
                                           { label: _34("Heatmap"), value: "heatmap" },
                                           { label: _34("Crosstab"), value: "crosstab" },
                                           { label: _34("Radar"), value: "radar" },
-                                          { label: _34("Combo (Bar + Line)"), value: "combo" }
+                                          { label: _34("Combo (Bar + Line)"), value: "combo" },
+                                          { label: _34("3D Scatter"), value: "3d" }
                                         ]
                                       }
                                     )
@@ -16661,7 +16838,7 @@ var DynamicList = ({ model: modelProp, allModels, filter, relationConfig, isEmbe
         if (["true", "1", "t", "yes", "y"].includes(normalized)) value = true;
         if (["false", "0", "f", "no", "n"].includes(normalized)) value = false;
       }
-      return [{ field: searchField.key, operator: "eq", value }];
+      return [{ field: searchField.key, operator: "contains", value }];
     }
   });
   const [allRowsData, setAllRowsData] = useState([]);
@@ -19917,7 +20094,8 @@ var DynamicList = ({ model: modelProp, allModels, filter, relationConfig, isEmbe
                                           { label: _36("Heatmap"), value: "heatmap" },
                                           { label: _36("Crosstab"), value: "crosstab" },
                                           { label: _36("Radar"), value: "radar" },
-                                          { label: _36("Combo (Bar + Line)"), value: "combo" }
+                                          { label: _36("Combo (Bar + Line)"), value: "combo" },
+                                          { label: _36("3D Scatter"), value: "3d" }
                                         ]
                                       }
                                     )
@@ -21077,6 +21255,48 @@ function useDashboardConfig() {
   }, [apiUrl]);
   return { config, enabled, loading, save, reload: load };
 }
+var PlotlyChartContent = ({ chartUrl, refreshNonce }) => {
+  const [chartHtml, setChartHtml] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const fetchChart = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const apiUrl = typeof API_URL3 === "string" ? API_URL3 : "";
+      const fullUrl = chartUrl.startsWith("http") ? chartUrl : `${apiUrl}${chartUrl}`;
+      const sep = fullUrl.includes("?") ? "&" : "?";
+      const lang = (() => {
+        try {
+          return (localStorage.getItem("locale") || navigator.language || "en").split("-")[0].toLowerCase();
+        } catch {
+          return "en";
+        }
+      })();
+      const res = await authenticatedFetch(`${fullUrl}${sep}lang=${encodeURIComponent(lang)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setChartHtml(data.chart_html || "");
+    } catch (e) {
+      setError(e?.message ?? String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [chartUrl]);
+  useEffect(() => {
+    fetchChart();
+  }, [fetchChart, refreshNonce]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", minHeight: 200 }, children: /* @__PURE__ */ jsx(Spin, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Empty, { description: `Chart error: ${error}`, style: { padding: 20 }, image: Empty.PRESENTED_IMAGE_SIMPLE });
+  }
+  if (!chartHtml) {
+    return /* @__PURE__ */ jsx(Empty, { description: "No chart data", style: { padding: 20 }, image: Empty.PRESENTED_IMAGE_SIMPLE });
+  }
+  return /* @__PURE__ */ jsx(InlinePlotlyHtml, { html: chartHtml, style: { padding: 8, height: "100%", overflow: "auto" } });
+};
 var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigureLayout, onConfigure, onMaximize, onMinimize, onResize, onMove }) => {
   const { token } = theme.useToken();
   const model = findModelByName(allModels, cell.model);
@@ -21109,10 +21329,12 @@ var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigu
     minHeight: 32,
     position: "relative"
   };
+  const isPlotlyChart = cell.source_type === "plotly_chart";
   const resource = model?.resource || cell.model;
   const isModelLike = cell.source_type === "model" || cell.source_type === "named_query";
-  const cellTitle = isModelLike ? model?.label || cell.model : cell.section_name || cell.model;
+  const cellTitle = isPlotlyChart ? cell.chart_title || cell.model : isModelLike ? model?.label || cell.model : cell.section_name || cell.model;
   const tone = isModelLike && model ? getModelTone(model) : null;
+  const [chartRefreshNonce, setChartRefreshNonce] = useState(0);
   const startResize = useCallback((e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -21266,7 +21488,7 @@ var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigu
         ) })
       ] })
     ] }),
-    !isMinimized && /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", minHeight: 0 }, children: model ? /* @__PURE__ */ jsx(
+    !isMinimized && /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", minHeight: 0 }, children: isPlotlyChart && cell.chart_url ? /* @__PURE__ */ jsx(PlotlyChartContent, { chartUrl: cell.chart_url, refreshNonce: chartRefreshNonce }) : model ? /* @__PURE__ */ jsx(
       DynamicList,
       {
         model,
@@ -21604,7 +21826,7 @@ function usePinnedRecords() {
       setLoading(false);
     }
   }, []);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     load();
   }, [load]);
   return { groups, loading, reload: load };
@@ -21942,6 +22164,6 @@ var authSystemModels = [
   }
 ];
 
-export { API_URL3 as API_URL, AllModelsProvider, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, CustomSider, DashboardPage, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, LoginPage, ModelHeading, MultiPaneLayout, NavConfigContext, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, RecentActivityPanel, ReferenceField, ResourceContext, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };
+export { API_URL3 as API_URL, AllModelsProvider, AuthenticatedImage, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, CustomSider, DashboardPage, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, LoginPage, ModelHeading, MultiPaneLayout, NavConfigContext, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, RecentActivityPanel, ReferenceField, ResourceContext, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useAuthenticatedFileUrl, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map