@dashadmin/dash-components 1.3.24 → 1.3.26

package/dist/components/JsonColorSelector/JsonCssVarValues.js

@@ -1 +1,738 @@
-import{Fragment as ae,jsx as e,jsxs as f}from"react/jsx-runtime";import{useRecordContext as $}from"react-admin";import{useFormContext as Z}from"react-hook-form";import{Box as a,Button as F,IconButton as H,TextField as N,Typography as m,Card as U,CardContent as _,Chip as R,InputAdornment as W}from"@mui/material";import ee from"@mui/icons-material/Delete";import Y from"@mui/icons-material/Add";import q from"@mui/icons-material/Search";import G from"@mui/icons-material/Clear";import{useState as b,useEffect as J,useMemo as M}from"react";const L=r=>r==="true"||r==="false"?"boolean":!isNaN(Number(r))&&r.trim()!==""?"number":r.startsWith("{")&&r.endsWith("}")||r.startsWith("[")&&r.endsWith("]")?"json":"string",Q=(r,u=30)=>r.length<=u?r:r.substring(0,u)+"...",te=({pair:r,onUpdate:u,onDelete:d,existingKeys:h})=>{const[I,y]=b(!1),[x,V]=b(!1),[p,B]=b(r.key),[i,A]=b(r.value),[D,S]=b(""),[w,P]=b(""),s=L(r.value),l=t=>{switch(t){case"string":return"#2196f3";case"number":return"#4caf50";case"boolean":return"#ff9800";case"json":return"#9c27b0";default:return"#757575"}},g=t=>{const n=h.some(o=>o===t&&t!==r.key);return S(n?"Key already exists":""),!n&&t.trim()!==""},C=(t,n)=>{let o="";if(n==="number"&&isNaN(Number(t))&&t.trim()!=="")o="Invalid number format";else if(n==="boolean"&&!["true","false"].includes(t.toLowerCase()))o='Boolean must be "true" or "false"';else if(n==="json")try{JSON.parse(t)}catch{o="Invalid JSON format"}return P(o),!o},T=()=>{g(p)&&(u({...r,key:p}),y(!1))},K=()=>{const t=L(i);C(i,t)&&(u({...r,value:i}),V(!1))},j=()=>{B(r.key),S(""),y(!1)},E=()=>{A(r.value),P(""),V(!1)};return e(U,{variant:"outlined",sx:{mb:1,"&:hover":{boxShadow:2}},children:e(_,{sx:{p:2,"&:last-child":{pb:2}},children:f(a,{sx:{display:"flex",alignItems:"flex-start",gap:2},children:[f(a,{sx:{flex:1,minWidth:0},children:[e(m,{variant:"caption",color:"textSecondary",sx:{display:"block",mb:.5},children:"Key"}),I?e(N,{fullWidth:!0,size:"small",value:p,onChange:t=>{B(t.target.value),g(t.target.value)},error:!!D,helperText:D,onKeyDown:t=>{t.key==="Enter"&&T(),t.key==="Escape"&&j()},onBlur:T,autoFocus:!0}):e(a,{onClick:()=>y(!0),sx:{cursor:"pointer",p:1,borderRadius:1,backgroundColor:"rgba(0,0,0,0.04)","&:hover":{backgroundColor:"rgba(0,0,0,0.08)"},minHeight:24,display:"flex",alignItems:"center"},children:e(m,{variant:"body2",sx:{fontFamily:"monospace",wordBreak:"break-all"},children:r.key||"Click to add key"})})]}),f(a,{sx:{flex:1,minWidth:0},children:[f(a,{sx:{display:"flex",alignItems:"center",gap:1,mb:.5},children:[e(m,{variant:"caption",color:"textSecondary",children:"Value"}),e(R,{label:s.toUpperCase(),size:"small",sx:{height:16,fontSize:"0.6rem",backgroundColor:l(s),color:"#fff","& .MuiChip-label":{padding:"0 4px"}}})]}),x?e(N,{fullWidth:!0,size:"small",value:i,onChange:t=>{A(t.target.value);const n=L(t.target.value);C(t.target.value,n)},error:!!w,helperText:w,multiline:s==="json",rows:s==="json"?3:1,onKeyDown:t=>{t.key==="Enter"&&!t.shiftKey&&s!=="json"&&(t.preventDefault(),K()),t.key==="Escape"&&E()},onBlur:K,autoFocus:!0}):e(a,{onClick:()=>V(!0),sx:{cursor:"pointer",p:1,borderRadius:1,backgroundColor:"rgba(0,0,0,0.04)","&:hover":{backgroundColor:"rgba(0,0,0,0.08)"},minHeight:24,display:"flex",alignItems:"center"},children:e(m,{variant:"body2",sx:{fontFamily:"monospace",wordBreak:"break-all"},title:r.value,children:Q(r.value)||"Click to add value"})})]}),e(a,{sx:{display:"flex",alignItems:"center"},children:e(H,{size:"small",onClick:()=>d(r.id),color:"error",children:e(ee,{fontSize:"small"})})})]})})})},X=r=>{const{attribute:u}=r,d=$(),{setValue:h,getValues:I}=Z(),y=u.attribute,x=y.startsWith("settings."),V=x?y.split(".").slice(1).join("."):y,[p,B]=b([]),[i,A]=b(""),[D,S]=b(!0),w=M(()=>i.trim()?p.filter(t=>t.key.toLowerCase().includes(i.toLowerCase())||t.value.toLowerCase().includes(i.toLowerCase())):p,[p,i]),P=t=>{A(t.target.value)},s=()=>{A("")};J(()=>{(async()=>{S(!0);try{let n={},o={};try{o=u?.default_value||{}}catch{o={}}if(x&&d?.settings){const v=d.settings||{};n={...o,...l(v,V)}}else d?.[y]?n={...o,...d[y]}:n=o;const c=Object.entries(n).map(([v,k])=>({key:v,value:String(k),id:C()}));B(c)}catch(n){console.error("Error loading initial data:",n)}finally{S(!1)}})()},[d,y]);const l=(t,n)=>n?n.split(".").reduce((c,v)=>c&&c[v]!==void 0?c[v]:{},t):t,g=(t,n,o)=>{if(!n)return o;const c=n.split("."),v=c.pop(),k=c.reduce((z,O)=>(z[O]===void 0&&(z[O]={}),z[O]),t);return v&&(k[v]=o),t},C=()=>Math.random().toString(36).substring(2,11),T=()=>{const t={key:"",value:"",id:C()},n=[...p,t];B(n),E(n)},K=t=>{const n=p.map(o=>o.id===t.id?t:o);B(n),E(n)},j=t=>{const n=p.filter(o=>o.id!==t);B(n),E(n)},E=t=>{const n=t.reduce((o,c)=>{if(c.key.trim()){const v=L(c.value);let k=c.value;try{switch(v){case"number":k=Number(c.value);break;case"boolean":k=c.value.toLowerCase()==="true";break;case"json":k=JSON.parse(c.value);break;default:k=c.value;break}}catch{k=c.value}o[c.key]=k}return o},{});if(x){const o=I("settings")||{},c=g({...o},V,n);h("settings",c,{shouldDirty:!0})}else h(y,n,{shouldDirty:!0})};return D?e(a,{sx:{mt:1,mb:2,display:"flex",justifyContent:"center",alignItems:"center",minHeight:200},children:e(m,{variant:"body2",color:"textSecondary",children:"Loading values..."})}):f(a,{sx:{mt:1,mb:2},children:[e(m,{variant:"subtitle1",gutterBottom:!0,children:u.label||"Key-Value Pairs"}),e(a,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:3},children:e(F,{startIcon:e(Y,{}),variant:"outlined",size:"small",onClick:T,children:"Add Pair"})}),p.length>0&&e(a,{sx:{mb:3},children:e(N,{fullWidth:!0,size:"small",placeholder:"Search by key or value...",value:i,onChange:P,InputProps:{startAdornment:e(W,{position:"start",children:e(q,{})}),endAdornment:i&&e(W,{position:"end",children:e(H,{size:"small",onClick:s,edge:"end",children:e(G,{})})})}})}),i&&e(a,{sx:{mb:2},children:e(R,{label:`${w.length} of ${p.length} pairs`,size:"small",variant:"outlined",onDelete:s})}),e(a,{sx:{mb:2},children:w.map(t=>e(te,{pair:t,onUpdate:K,onDelete:j,existingKeys:p.map(n=>n.key)},t.id))}),i&&w.length===0&&f(a,{sx:{textAlign:"center",py:4},children:[e(m,{variant:"body2",color:"textSecondary",children:"No pairs found matching your search"}),e(F,{size:"small",onClick:s,sx:{mt:1},children:"Clear search"})]}),p.length===0&&f(a,{sx:{textAlign:"center",py:4},children:[e(m,{variant:"body2",color:"textSecondary",gutterBottom:!0,children:"No key-value pairs configured yet"}),e(F,{startIcon:e(Y,{}),variant:"contained",onClick:T,children:"Add Your First Pair"})]})]})},ne=r=>{const{attribute:u}=r,d=$(),h=u.attribute,I=h.startsWith("settings."),y=I?h.split(".").slice(1).join("."):h,[x,V]=b(""),[p,B]=b(!0),[i,A]=b({}),D=M(()=>Object.entries(i).map(([s,l])=>({key:s,value:String(l),id:s})),[i]);J(()=>{(async()=>{B(!0);try{let l={},g={};try{g=u?.default_value||{}}catch{g={}}if(I&&d?.settings){const C=d.settings||{};if(y){const T=y.split(".");l={...g,...T.reduce((K,j)=>K&&K[j]!==void 0?K[j]:{},C)}}else l={...g,...C}}else d?.[h]?l={...g,...d[h]}:l=g;A(l)}catch(l){console.error("Error loading view data:",l)}finally{B(!1)}})()},[d,h,u,I,y]);const S=M(()=>x.trim()?Object.entries(i).filter(([s,l])=>s.toLowerCase().includes(x.toLowerCase())||String(l).toLowerCase().includes(x.toLowerCase())).reduce((s,[l,g])=>(s[l]=g,s),{}):i,[i,x]),w=s=>{V(s.target.value)},P=()=>{V("")};return p?e(a,{sx:{mt:1,mb:2,display:"flex",justifyContent:"center",alignItems:"center",minHeight:200},children:e(m,{variant:"body2",color:"textSecondary",children:"Loading values..."})}):f(a,{sx:{mt:1,mb:2},children:[e(m,{variant:"subtitle1",gutterBottom:!0,children:u.label||"Key-Value Pairs"}),Object.keys(i).length>0&&f(ae,{children:[e(a,{sx:{mb:3},children:e(N,{fullWidth:!0,size:"small",placeholder:"Search by key or value...",value:x,onChange:w,InputProps:{startAdornment:e(W,{position:"start",children:e(q,{})}),endAdornment:x&&e(W,{position:"end",children:e(H,{size:"small",onClick:P,edge:"end",children:e(G,{})})})}})}),x&&e(a,{sx:{mb:2},children:e(R,{label:`${Object.keys(S).length} of ${Object.keys(i).length} pairs`,size:"small",variant:"outlined",onDelete:P})}),Object.keys(S).length>0?e(a,{sx:{mb:2},children:Object.entries(S).map(([s,l])=>{const g=L(String(l)),C=T=>{switch(T){case"string":return"#2196f3";case"number":return"#4caf50";case"boolean":return"#ff9800";case"json":return"#9c27b0";default:return"#757575"}};return e(U,{variant:"outlined",sx:{mb:1,border:`2px solid ${C(g)}`},children:e(_,{sx:{p:2,"&:last-child":{pb:2}},children:f(a,{sx:{display:"flex",alignItems:"flex-start",gap:2},children:[f(a,{sx:{flex:1,minWidth:0},children:[e(m,{variant:"caption",color:"textSecondary",sx:{display:"block",mb:.5},children:"Key"}),e(a,{sx:{p:1,borderRadius:1,backgroundColor:"rgba(0,0,0,0.04)",minHeight:24,display:"flex",alignItems:"center"},children:e(m,{variant:"body2",sx:{fontFamily:"monospace",wordBreak:"break-all"},children:s})})]}),f(a,{sx:{flex:1,minWidth:0},children:[f(a,{sx:{display:"flex",alignItems:"center",gap:1,mb:.5},children:[e(m,{variant:"caption",color:"textSecondary",children:"Value"}),e(R,{label:g.toUpperCase(),size:"small",sx:{height:16,fontSize:"0.6rem",backgroundColor:C(g),color:"#fff","& .MuiChip-label":{padding:"0 4px"}}})]}),e(a,{sx:{p:1,borderRadius:1,backgroundColor:"rgba(0,0,0,0.04)",minHeight:24,display:"flex",alignItems:"center"},children:e(m,{variant:"body2",sx:{fontFamily:"monospace",wordBreak:"break-all"},title:String(l),children:Q(String(l))})})]})]})})},s)})}):f(a,{sx:{textAlign:"center",py:4},children:[e(m,{variant:"body2",color:"textSecondary",children:"No pairs found matching your search"}),e(F,{size:"small",onClick:P,sx:{mt:1},children:"Clear search"})]})]}),Object.keys(i).length===0&&e(a,{sx:{textAlign:"center",py:4},children:e(m,{variant:"body2",color:"textSecondary",children:"No key-value pairs configured"})})]})},re=({method:r,attribute:u,resourceConfig:d})=>{const[h,I]=b(!0);if(J(()=>{const y=setTimeout(()=>{I(!1)},50);return()=>{clearTimeout(y)}},[]),h)return e(a,{sx:{display:"flex",justifyContent:"center",alignItems:"center",minHeight:100},children:e(m,{variant:"body2",color:"textSecondary",children:"Initializing key-value editor..."})});switch(r){case"edit":return e(X,{attribute:u,method:r,resourceConfig:d});case"create":return e(X,{attribute:u,method:r,resourceConfig:d});case"view":return e(ne,{attribute:u,method:r,resourceConfig:d});default:return null}};var fe=re;export{X as JsonEdit,ne as JsonView,fe as default};
+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 __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());
+  });
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRecordContext } from "react-admin";
+import { useFormContext } from "react-hook-form";
+import {
+  Box,
+  Button,
+  IconButton,
+  TextField,
+  Typography,
+  Card,
+  CardContent,
+  Chip,
+  InputAdornment
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from "@mui/icons-material/Clear";
+import { useState, useEffect, useMemo } from "react";
+const detectValueType = (value) => {
+  if (value === "true" || value === "false") return "boolean";
+  if (!isNaN(Number(value)) && value.trim() !== "") return "number";
+  if (value.startsWith("{") && value.endsWith("}") || value.startsWith("[") && value.endsWith("]")) return "json";
+  return "string";
+};
+const formatValueForDisplay = (value, maxLength = 30) => {
+  if (value.length <= maxLength) return value;
+  return value.substring(0, maxLength) + "...";
+};
+const ValueItem = ({ pair, onUpdate, onDelete, existingKeys }) => {
+  const [isEditingKey, setIsEditingKey] = useState(false);
+  const [isEditingValue, setIsEditingValue] = useState(false);
+  const [editKey, setEditKey] = useState(pair.key);
+  const [editValue, setEditValue] = useState(pair.value);
+  const [keyError, setKeyError] = useState("");
+  const [valueError, setValueError] = useState("");
+  const valueType = detectValueType(pair.value);
+  const getTypeColor = (type) => {
+    switch (type) {
+      case "string":
+        return "#2196f3";
+      // Blue
+      case "number":
+        return "#4caf50";
+      // Green
+      case "boolean":
+        return "#ff9800";
+      // Orange
+      case "json":
+        return "#9c27b0";
+      // Purple
+      default:
+        return "#757575";
+    }
+  };
+  const validateKey = (key) => {
+    const isDuplicate = existingKeys.some((k) => k === key && key !== pair.key);
+    setKeyError(isDuplicate ? "Key already exists" : "");
+    return !isDuplicate && key.trim() !== "";
+  };
+  const validateValue = (value, type) => {
+    let error = "";
+    if (type === "number" && isNaN(Number(value)) && value.trim() !== "") {
+      error = "Invalid number format";
+    } else if (type === "boolean" && !["true", "false"].includes(value.toLowerCase())) {
+      error = 'Boolean must be "true" or "false"';
+    } else if (type === "json") {
+      try {
+        JSON.parse(value);
+      } catch (e) {
+        error = "Invalid JSON format";
+      }
+    }
+    setValueError(error);
+    return !error;
+  };
+  const handleKeySubmit = () => {
+    if (validateKey(editKey)) {
+      onUpdate(__spreadProps(__spreadValues({}, pair), { key: editKey }));
+      setIsEditingKey(false);
+    }
+  };
+  const handleValueSubmit = () => {
+    const currentType = detectValueType(editValue);
+    if (validateValue(editValue, currentType)) {
+      onUpdate(__spreadProps(__spreadValues({}, pair), { value: editValue }));
+      setIsEditingValue(false);
+    }
+  };
+  const handleKeyCancel = () => {
+    setEditKey(pair.key);
+    setKeyError("");
+    setIsEditingKey(false);
+  };
+  const handleValueCancel = () => {
+    setEditValue(pair.value);
+    setValueError("");
+    setIsEditingValue(false);
+  };
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      variant: "outlined",
+      sx: {
+        mb: 1,
+        //border: `2px solid ${getTypeColor(valueType)}`,
+        "&:hover": {
+          boxShadow: 2
+        }
+      },
+      children: /* @__PURE__ */ jsx(CardContent, { sx: { p: 2, "&:last-child": { pb: 2 } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 2 }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", sx: { display: "block", mb: 0.5 }, children: "Key" }),
+          isEditingKey ? /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              size: "small",
+              value: editKey,
+              onChange: (e) => {
+                setEditKey(e.target.value);
+                validateKey(e.target.value);
+              },
+              error: !!keyError,
+              helperText: keyError,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleKeySubmit();
+                if (e.key === "Escape") handleKeyCancel();
+              },
+              onBlur: handleKeySubmit,
+              autoFocus: true
+            }
+          ) : /* @__PURE__ */ jsx(
+            Box,
+            {
+              onClick: () => setIsEditingKey(true),
+              sx: {
+                cursor: "pointer",
+                p: 1,
+                borderRadius: 1,
+                backgroundColor: "rgba(0,0,0,0.04)",
+                "&:hover": {
+                  backgroundColor: "rgba(0,0,0,0.08)"
+                },
+                minHeight: 24,
+                display: "flex",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    fontFamily: "monospace",
+                    wordBreak: "break-all"
+                  },
+                  children: pair.key || "Click to add key"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Value" }),
+            /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: valueType.toUpperCase(),
+                size: "small",
+                sx: {
+                  height: 16,
+                  fontSize: "0.6rem",
+                  backgroundColor: getTypeColor(valueType),
+                  color: "#fff",
+                  "& .MuiChip-label": {
+                    padding: "0 4px"
+                  }
+                }
+              }
+            )
+          ] }),
+          isEditingValue ? /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              size: "small",
+              value: editValue,
+              onChange: (e) => {
+                setEditValue(e.target.value);
+                const currentType = detectValueType(e.target.value);
+                validateValue(e.target.value, currentType);
+              },
+              error: !!valueError,
+              helperText: valueError,
+              multiline: valueType === "json",
+              rows: valueType === "json" ? 3 : 1,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && !e.shiftKey && valueType !== "json") {
+                  e.preventDefault();
+                  handleValueSubmit();
+                }
+                if (e.key === "Escape") handleValueCancel();
+              },
+              onBlur: handleValueSubmit,
+              autoFocus: true
+            }
+          ) : /* @__PURE__ */ jsx(
+            Box,
+            {
+              onClick: () => setIsEditingValue(true),
+              sx: {
+                cursor: "pointer",
+                p: 1,
+                borderRadius: 1,
+                backgroundColor: "rgba(0,0,0,0.04)",
+                "&:hover": {
+                  backgroundColor: "rgba(0,0,0,0.08)"
+                },
+                minHeight: 24,
+                display: "flex",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    fontFamily: "monospace",
+                    wordBreak: "break-all"
+                  },
+                  title: pair.value,
+                  children: formatValueForDisplay(pair.value) || "Click to add value"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => onDelete(pair.id),
+            color: "error",
+            children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "small" })
+          }
+        ) })
+      ] }) })
+    }
+  );
+};
+const JsonEdit = (props) => {
+  const { attribute } = props;
+  const record = useRecordContext();
+  const { setValue, getValues } = useFormContext();
+  const attributePath = attribute.attribute;
+  const isNestedSetting = attributePath.startsWith("settings.");
+  const settingsPath = isNestedSetting ? attributePath.split(".").slice(1).join(".") : attributePath;
+  const [pairs, setPairs] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const filteredPairs = useMemo(() => {
+    if (!searchTerm.trim()) return pairs;
+    return pairs.filter(
+      (pair) => pair.key.toLowerCase().includes(searchTerm.toLowerCase()) || pair.value.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [pairs, searchTerm]);
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+  const handleClearSearch = () => {
+    setSearchTerm("");
+  };
+  useEffect(() => {
+    const loadInitialData = () => __async(null, null, function* () {
+      setIsLoading(true);
+      try {
+        let initialValue = {};
+        let defaultValues = {};
+        try {
+          defaultValues = (attribute == null ? void 0 : attribute.default_value) || {};
+        } catch (e) {
+          defaultValues = {};
+        }
+        if (isNestedSetting && (record == null ? void 0 : record.settings)) {
+          const settings = record.settings || {};
+          initialValue = __spreadValues(__spreadValues({}, defaultValues), getNestedValue(settings, settingsPath));
+        } else if (record == null ? void 0 : record[attributePath]) {
+          initialValue = __spreadValues(__spreadValues({}, defaultValues), record[attributePath]);
+        } else {
+          initialValue = defaultValues;
+        }
+        const initialPairs = Object.entries(initialValue).map(([key, value]) => ({
+          key,
+          value: String(value),
+          id: generateId()
+        }));
+        setPairs(initialPairs);
+      } catch (error) {
+        console.error("Error loading initial data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    });
+    loadInitialData();
+  }, [record, attributePath]);
+  const getNestedValue = (obj, path) => {
+    if (!path) return obj;
+    const keys = path.split(".");
+    return keys.reduce((o, key) => o && o[key] !== void 0 ? o[key] : {}, obj);
+  };
+  const setNestedValue = (obj, path, value) => {
+    if (!path) return value;
+    const keys = path.split(".");
+    const lastKey = keys.pop();
+    const lastObj = keys.reduce((o, key) => {
+      if (o[key] === void 0) o[key] = {};
+      return o[key];
+    }, obj);
+    if (lastKey) {
+      lastObj[lastKey] = value;
+    }
+    return obj;
+  };
+  const generateId = () => {
+    return Math.random().toString(36).substring(2, 11);
+  };
+  const addPair = () => {
+    const newPair = { key: "", value: "", id: generateId() };
+    const updatedPairs = [...pairs, newPair];
+    setPairs(updatedPairs);
+    updateFormValue(updatedPairs);
+  };
+  const handleUpdatePair = (updatedPair) => {
+    const updatedPairs = pairs.map((p) => p.id === updatedPair.id ? updatedPair : p);
+    setPairs(updatedPairs);
+    updateFormValue(updatedPairs);
+  };
+  const handleDeletePair = (id) => {
+    const updatedPairs = pairs.filter((pair) => pair.id !== id);
+    setPairs(updatedPairs);
+    updateFormValue(updatedPairs);
+  };
+  const updateFormValue = (currentPairs) => {
+    const obj = currentPairs.reduce((acc, pair) => {
+      if (pair.key.trim()) {
+        const valueType = detectValueType(pair.value);
+        let parsedValue = pair.value;
+        try {
+          switch (valueType) {
+            case "number":
+              parsedValue = Number(pair.value);
+              break;
+            case "boolean":
+              parsedValue = pair.value.toLowerCase() === "true";
+              break;
+            case "json":
+              parsedValue;
+              parsedValue = JSON.parse(pair.value);
+              break;
+            case "string":
+            default:
+              parsedValue = pair.value;
+              break;
+          }
+        } catch (e) {
+          parsedValue = pair.value;
+        }
+        acc[pair.key] = parsedValue;
+      }
+      return acc;
+    }, {});
+    if (isNestedSetting) {
+      const currentSettings = getValues("settings") || {};
+      const updatedSettings = setNestedValue(__spreadValues({}, currentSettings), settingsPath, obj);
+      setValue("settings", updatedSettings, { shouldDirty: true });
+    } else {
+      setValue(attributePath, obj, { shouldDirty: true });
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Box, { sx: { mt: 1, mb: 2, display: "flex", justifyContent: "center", alignItems: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Loading values..." }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, mb: 2 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: attribute.label || "Key-Value Pairs" }),
+    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 }, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+        variant: "outlined",
+        size: "small",
+        onClick: addPair,
+        children: "Add Pair"
+      }
+    ) }),
+    pairs.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { mb: 3 }, children: /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        size: "small",
+        placeholder: "Search by key or value...",
+        value: searchTerm,
+        onChange: handleSearchChange,
+        InputProps: {
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+          endAdornment: searchTerm && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleClearSearch,
+              edge: "end",
+              children: /* @__PURE__ */ jsx(ClearIcon, {})
+            }
+          ) })
+        }
+      }
+    ) }),
+    searchTerm && /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: `${filteredPairs.length} of ${pairs.length} pairs`,
+        size: "small",
+        variant: "outlined",
+        onDelete: handleClearSearch
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: filteredPairs.map((pair) => /* @__PURE__ */ jsx(
+      ValueItem,
+      {
+        pair,
+        onUpdate: handleUpdatePair,
+        onDelete: handleDeletePair,
+        existingKeys: pairs.map((p) => p.key)
+      },
+      pair.id
+    )) }),
+    searchTerm && filteredPairs.length === 0 && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center", py: 4 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No pairs found matching your search" }),
+      /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClearSearch, sx: { mt: 1 }, children: "Clear search" })
+    ] }),
+    pairs.length === 0 && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center", py: 4 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true, children: "No key-value pairs configured yet" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+          variant: "contained",
+          onClick: addPair,
+          children: "Add Your First Pair"
+        }
+      )
+    ] })
+  ] });
+};
+const JsonView = (props) => {
+  const { attribute } = props;
+  const record = useRecordContext();
+  const attributePath = attribute.attribute;
+  const isNestedSetting = attributePath.startsWith("settings.");
+  const settingsPath = isNestedSetting ? attributePath.split(".").slice(1).join(".") : attributePath;
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [displayValue, setDisplayValue] = useState({});
+  const displayPairs = useMemo(() => {
+    return Object.entries(displayValue).map(([key, value]) => ({
+      key,
+      value: String(value),
+      id: key
+    }));
+  }, [displayValue]);
+  useEffect(() => {
+    const loadViewData = () => __async(null, null, function* () {
+      setIsLoading(true);
+      try {
+        let viewValue = {};
+        let defaultValues = {};
+        try {
+          defaultValues = (attribute == null ? void 0 : attribute.default_value) || {};
+        } catch (e) {
+          defaultValues = {};
+        }
+        if (isNestedSetting && (record == null ? void 0 : record.settings)) {
+          const settings = record.settings || {};
+          if (settingsPath) {
+            const keys = settingsPath.split(".");
+            viewValue = __spreadValues(__spreadValues({}, defaultValues), keys.reduce((o, key) => o && o[key] !== void 0 ? o[key] : {}, settings));
+          } else {
+            viewValue = __spreadValues(__spreadValues({}, defaultValues), settings);
+          }
+        } else if (record == null ? void 0 : record[attributePath]) {
+          viewValue = __spreadValues(__spreadValues({}, defaultValues), record[attributePath]);
+        } else {
+          viewValue = defaultValues;
+        }
+        setDisplayValue(viewValue);
+      } catch (error) {
+        console.error("Error loading view data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    });
+    loadViewData();
+  }, [record, attributePath, attribute, isNestedSetting, settingsPath]);
+  const filteredDisplayValue = useMemo(() => {
+    if (!searchTerm.trim()) return displayValue;
+    return Object.entries(displayValue).filter(
+      ([key, value]) => key.toLowerCase().includes(searchTerm.toLowerCase()) || String(value).toLowerCase().includes(searchTerm.toLowerCase())
+    ).reduce((acc, [key, value]) => {
+      acc[key] = value;
+      return acc;
+    }, {});
+  }, [displayValue, searchTerm]);
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+  const handleClearSearch = () => {
+    setSearchTerm("");
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Box, { sx: { mt: 1, mb: 2, display: "flex", justifyContent: "center", alignItems: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Loading values..." }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, mb: 2 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: attribute.label || "Key-Value Pairs" }),
+    Object.keys(displayValue).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { sx: { mb: 3 }, children: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          size: "small",
+          placeholder: "Search by key or value...",
+          value: searchTerm,
+          onChange: handleSearchChange,
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+            endAdornment: searchTerm && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: handleClearSearch,
+                edge: "end",
+                children: /* @__PURE__ */ jsx(ClearIcon, {})
+              }
+            ) })
+          }
+        }
+      ) }),
+      searchTerm && /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: `${Object.keys(filteredDisplayValue).length} of ${Object.keys(displayValue).length} pairs`,
+          size: "small",
+          variant: "outlined",
+          onDelete: handleClearSearch
+        }
+      ) }),
+      Object.keys(filteredDisplayValue).length > 0 ? /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: Object.entries(filteredDisplayValue).map(([key, value]) => {
+        const valueType = detectValueType(String(value));
+        const getTypeColor = (type) => {
+          switch (type) {
+            case "string":
+              return "#2196f3";
+            // Blue
+            case "number":
+              return "#4caf50";
+            // Green
+            case "boolean":
+              return "#ff9800";
+            // Orange
+            case "json":
+              return "#9c27b0";
+            // Purple
+            default:
+              return "#757575";
+          }
+        };
+        return /* @__PURE__ */ jsx(
+          Card,
+          {
+            variant: "outlined",
+            sx: {
+              mb: 1,
+              border: `2px solid ${getTypeColor(valueType)}`
+            },
+            children: /* @__PURE__ */ jsx(CardContent, { sx: { p: 2, "&:last-child": { pb: 2 } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 2 }, children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", sx: { display: "block", mb: 0.5 }, children: "Key" }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      p: 1,
+                      borderRadius: 1,
+                      backgroundColor: "rgba(0,0,0,0.04)",
+                      minHeight: 24,
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          fontFamily: "monospace",
+                          wordBreak: "break-all"
+                        },
+                        children: key
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: "Value" }),
+                  /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      label: valueType.toUpperCase(),
+                      size: "small",
+                      sx: {
+                        height: 16,
+                        fontSize: "0.6rem",
+                        backgroundColor: getTypeColor(valueType),
+                        color: "#fff",
+                        "& .MuiChip-label": {
+                          padding: "0 4px"
+                        }
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      p: 1,
+                      borderRadius: 1,
+                      backgroundColor: "rgba(0,0,0,0.04)",
+                      minHeight: 24,
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          fontFamily: "monospace",
+                          wordBreak: "break-all"
+                        },
+                        title: String(value),
+                        children: formatValueForDisplay(String(value))
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }) })
+          },
+          key
+        );
+      }) }) : /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center", py: 4 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No pairs found matching your search" }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClearSearch, sx: { mt: 1 }, children: "Clear search" })
+      ] })
+    ] }),
+    Object.keys(displayValue).length === 0 && /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", py: 4 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No key-value pairs configured" }) })
+  ] });
+};
+const JsonCssVarValues = ({ method, attribute, resourceConfig }) => {
+  const [componentLoading, setComponentLoading] = useState(true);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setComponentLoading(false);
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []);
+  if (componentLoading) {
+    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 100 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Initializing key-value editor..." }) });
+  }
+  switch (method) {
+    case "edit":
+      return /* @__PURE__ */ jsx(JsonEdit, { attribute, method, resourceConfig });
+    case "create":
+      return /* @__PURE__ */ jsx(JsonEdit, { attribute, method, resourceConfig });
+    case "view":
+      return /* @__PURE__ */ jsx(JsonView, { attribute, method, resourceConfig });
+    default:
+      return null;
+  }
+};
+var JsonCssVarValues_default = JsonCssVarValues;
+export {
+  JsonEdit,
+  JsonView,
+  JsonCssVarValues_default as default
+};