@dashadmin/dash-components 1.3.24 → 1.3.26

package/dist/components/JsonColorSelector/JsonColorSelector.js

@@ -1 +1,1172 @@
-import{Fragment as Ie,jsx as e,jsxs as s}from"react/jsx-runtime";import{useRecordContext as me}from"react-admin";import{useFormContext as De}from"react-hook-form";import{Box as a,Button as j,IconButton as Y,TextField as U,Typography as S,Dialog as Re,DialogTitle as ze,DialogContent as Ee,DialogActions as Fe,Card as Ve,Chip as z,InputAdornment as F,FormControl as ne,InputLabel as oe,Select as ae,MenuItem as V,Tabs as Le,Tab as pe,Pagination as je,Link as We}from"@mui/material";import $e from"@mui/icons-material/Delete";import he from"@mui/icons-material/Add";import Ke from"@mui/icons-material/Edit";import Oe from"@mui/icons-material/Preview";import fe from"@mui/icons-material/Search";import X from"@mui/icons-material/Clear";import ye from"@mui/icons-material/FilterList";import{ChromePicker as Ne}from"react-color";import{useState as C,useEffect as W,useRef as xe,useCallback as be,useMemo as q}from"react";import{updateDomCssVariables as He}from"@dashadmin/dash-utils";import{AuthPersistenceService as Ge}from"@dashadmin/dash-auth";const re=n=>{let r,d,h,f=1;if(n.startsWith("#")){const o=n.replace("#","");o.length===8?(r=parseInt(o.substr(0,2),16),d=parseInt(o.substr(2,2),16),h=parseInt(o.substr(4,2),16),f=parseInt(o.substr(6,2),16)/255):(r=parseInt(o.substr(0,2),16),d=parseInt(o.substr(2,2),16),h=parseInt(o.substr(4,2),16))}else if(n.startsWith("rgb")){const o=n.match(/rgba?\(([^)]+)\)/);if(o){const p=o[1].split(",").map(k=>parseFloat(k.trim()));[r,d,h,f=1]=p}else return"#000000"}else return n.startsWith("hsl"),"#000000";return(.299*r+.587*d+.114*h)/255*f+(1-f)>.5?"#000000":"#ffffff"},qe=(n,r)=>{switch(r){case"hex":return n.hex;case"rgb":return`rgb(${Math.round(n.rgb.r)}, ${Math.round(n.rgb.g)}, ${Math.round(n.rgb.b)})`;case"rgba":return`rgba(${Math.round(n.rgb.r)}, ${Math.round(n.rgb.g)}, ${Math.round(n.rgb.b)}, ${n.rgb.a||1})`;case"hsl":return`hsl(${Math.round(n.hsl.h)}, ${Math.round(n.hsl.s*100)}%, ${Math.round(n.hsl.l*100)}%)`;case"hsla":return`hsla(${Math.round(n.hsl.h)}, ${Math.round(n.hsl.s*100)}%, ${Math.round(n.hsl.l*100)}%, ${n.hsl.a||1})`;default:return n.hex}},_=n=>{const r=n.split("--"),d=r[0],h=r[1];return{baseChips:d.split("-").filter(v=>v.length>0),mode:h}},Ce=n=>{const r=new Set;return n.forEach(d=>{const{mode:h}=_(d.key);h&&r.add(h)}),Array.from(r).sort()},G=n=>{if(!n)return"";switch(n.toLowerCase()){case"light":return"\u2600\uFE0F";case"dark":return"\u{1F319}";default:return n}},_e=({pair:n,onEdit:r,onDelete:d})=>{const h=re(n.value),{baseChips:f,mode:v}=_(n.key),I=G(v);return s(Ve,{onClick:()=>r(n),elevation:1,sx:{width:"100%",display:"flex",alignItems:"stretch",cursor:"pointer",transition:"all 0.2s ease-in-out","&:hover":{transform:"translateY(-2px)",boxShadow:3},borderRadius:2,overflow:"hidden",position:"relative",height:80,backgroundColor:"background.paper"},children:[e(a,{sx:{width:80,backgroundColor:n.value,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",position:"relative"},children:e(a,{sx:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0,0,0,0.3)",opacity:0,transition:"opacity 0.2s","&:hover":{opacity:1},display:"flex",alignItems:"center",justifyContent:"center"},children:e(Ke,{sx:{color:"#fff"}})})}),s(a,{sx:{flexGrow:1,p:1.5,display:"flex",flexDirection:"column",justifyContent:"space-between",overflow:"hidden"},children:[s(a,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",mb:.5},children:[e(S,{variant:"caption",sx:{fontFamily:"monospace",fontWeight:"bold",color:"text.secondary"},children:n.value}),v&&e(z,{label:v,size:"small",icon:e("span",{style:{marginLeft:6,fontSize:"0.8rem"},children:I}),sx:{height:18,fontSize:"0.65rem","& .MuiChip-label":{padding:"0 6px"}}})]}),e(a,{sx:{display:"flex",flexWrap:"wrap",gap:.5},children:f.map((o,p)=>e(z,{label:o,size:"small",variant:"outlined",sx:{height:20,fontSize:"0.7rem",maxWidth:"100%","& .MuiChip-label":{padding:"0 6px",overflow:"hidden",textOverflow:"ellipsis"}}},p))})]})]})},Je=({open:n,pair:r,onClose:d,onSave:h,onDelete:f,existingKeys:v,updateSingleDomColor:I})=>{const[o,p]=C(null),[k,g]=C("hex"),[T,B]=C(""),[D,y]=C(0);W(()=>{r&&(p({...r}),r.value.startsWith("rgba(")?g("rgba"):r.value.startsWith("rgb(")?g("rgb"):r.value.startsWith("hsla(")?g("hsla"):r.value.startsWith("hsl(")?g("hsl"):g("hex")),B("")},[r]);const $=x=>{if(!o)return;const R=v.some(E=>E===x&&x!==r?.key);B(R?"Key already exists":""),p({...o,key:x})},A=x=>{if(!o)return;const R=qe(x,k);p({...o,value:R}),I(o.key,R)},K=()=>{!o||T||!o.key.trim()||(h(o),d())},N=()=>{o&&(f(o.id),d())};return o?s(Re,{open:n,onClose:d,maxWidth:"sm",fullWidth:!0,PaperProps:{sx:{minHeight:600}},children:[e(ze,{children:r?.key?`Edit Color: ${r.key}`:"Add New Color"}),e(Ee,{children:s(a,{sx:{display:"flex",flexDirection:"column",gap:3,pt:1},children:[e(U,{fullWidth:!0,label:"Color Name",value:o.key,onChange:x=>$(x.target.value),error:!!T,helperText:T,placeholder:"e.g., primary-color--light, background-dark--dark"}),s(ne,{fullWidth:!0,children:[e(oe,{children:"Color Format"}),s(ae,{value:k,label:"Color Format",onChange:x=>g(x.target.value),children:[e(V,{value:"hex",children:"HEX"}),e(V,{value:"rgb",children:"RGB"}),e(V,{value:"rgba",children:"RGBA (with alpha)"}),e(V,{value:"hsl",children:"HSL"}),e(V,{value:"hsla",children:"HSLA (with alpha)"})]})]}),s(a,{children:[s(Le,{value:D,onChange:(x,R)=>y(R),children:[e(pe,{label:"Color Picker"}),e(pe,{label:"Manual Input"})]}),D===0&&e(a,{sx:{mt:2,display:"flex",justifyContent:"center"},children:e(Ne,{color:o.value,onChange:A,disableAlpha:!["rgba","hsla"].includes(k)})}),D===1&&e(a,{sx:{mt:2},children:e(U,{fullWidth:!0,label:`Color Value (${k.toUpperCase()})`,value:o.value,onChange:x=>p({...o,value:x.target.value}),placeholder:k==="hex"?"#ff0000":k==="rgb"?"rgb(255, 0, 0)":k==="rgba"?"rgba(255, 0, 0, 1)":k==="hsl"?"hsl(0, 100%, 50%)":"hsla(0, 100%, 50%, 1)",InputProps:{startAdornment:e(F,{position:"start",children:e(a,{sx:{width:20,height:20,backgroundColor:o.value,border:"1px solid #ccc",borderRadius:1}})})}})})]}),s(a,{children:[e(S,{variant:"subtitle2",gutterBottom:!0,children:"Preview"}),e(a,{sx:{width:"100%",height:80,backgroundColor:o.value,border:"1px solid #ccc",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",position:"relative"},children:e(S,{variant:"body2",sx:{color:re(o.value),fontWeight:"bold",backgroundColor:"rgba(0,0,0,0.1)",padding:"4px 8px",borderRadius:1},children:o.key||"Color Preview"})})]})]})}),s(Fe,{children:[r?.key&&e(j,{onClick:N,color:"error",startIcon:e($e,{}),children:"Delete"}),e(a,{sx:{flexGrow:1}}),e(j,{onClick:d,children:"Cancel"}),e(j,{onClick:K,variant:"contained",disabled:!!T||!o.key.trim(),children:"Save"})]})]}):null},ve=n=>{const{method:r,attribute:d,resourceConfig:h}=n,f=me(),{setValue:v,getValues:I}=De(),o=d.attribute,p=o.startsWith("settings."),k=p?o.split(".").slice(1).join("."):o,[g,T]=C([]),[B,D]=C(""),[y,$]=C(""),[A,K]=C(!0),[N,x]=C(!0),[R,E]=C(!1),[Q,O]=C(null),[i,m]=C(1),[b]=C(24),M=xe(null),J=xe(new Map),P=be(t=>{window.dispatchEvent(new MessageEvent("auto-admin-loading-state",{data:t}))},[]),H=q(()=>Ce(g),[g]),L=q(()=>{let t=g;return B.trim()&&(t=t.filter(l=>l.key.toLowerCase().includes(B.toLowerCase()))),y&&(t=t.filter(l=>{const{mode:u}=_(l.key);return u===y})),t},[g,B,y]),ke=t=>{D(t.target.value)},se=()=>{D("")},Se=t=>{$(t.target.value)},le=()=>{$("")};W(()=>{(async()=>{K(!0),P(!0);try{let l={},u={};try{u=d?.default_value||{}}catch{u={}}if(p&&f?.settings){const w=f.settings||{};l={...u,...we(w,k)}}else f?.[o]?l={...u,...f[o]}:l=u;const c=Object.entries(l).map(([w,Z])=>({key:w,value:String(Z),id:ie()}));T(c),c.length>50&&await new Promise(w=>setTimeout(w,100))}catch(l){console.error("Error loading initial data:",l)}finally{K(!1)}})()},[f,o]),W(()=>{!A&&g.length>=0&&(x(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{x(!1),P(!1)})}))},[A,g.length,P]),W(()=>()=>{M.current&&clearTimeout(M.current),P(!1)},[P]);const we=(t,l)=>l?l.split(".").reduce((c,w)=>c&&c[w]!==void 0?c[w]:{},t):t,Be=(t,l,u)=>{if(!l)return u;const c=l.split("."),w=c.pop(),Z=c.reduce((ee,te)=>(ee[te]===void 0&&(ee[te]={}),ee[te]),t);return w&&(Z[w]=u),t},ie=()=>Math.random().toString(36).substring(2,11),de=()=>{const t={key:"",value:"#000000",id:ie()};O(t),E(!0)},Me=t=>{O(t),E(!0)},Ae=t=>{const l=g.findIndex(c=>c.id===t.id);let u;l>=0?u=g.map(c=>c.id===t.id?t:c):u=[...g,t],T(u),ge(u),ce(t.key,t.value)},ue=t=>{const l=g.filter(u=>u.id!==t);T(l),ge(l)},ce=(t,l)=>{if(!t.trim())return;const c=`--${document.documentElement.getAttribute("data-theme")}`;if(t.endsWith(c)){const w=t.slice(0,-c.length);document.documentElement.style.setProperty(`--${w}`,l)}},Te=()=>{const t=Ge.getTenantSettings();return t?t?.values||{}:{}},Pe=t=>{const l=g.reduce((u,c)=>(c.key.trim()&&(u[c.key]=c.value),u),{});He(t,l,Te())},ge=t=>{const l=t.reduce((u,c)=>(c.key.trim()&&(u[c.key]=c.value),u),{});if(p){const u=I("settings")||{},c=Be({...u},k,l);v("settings",c,{shouldDirty:!0})}else v(o,l,{shouldDirty:!0})};return A||N?e(a,{sx:{mt:1,mb:2,display:"flex",justifyContent:"center",alignItems:"center",minHeight:200},children:e(S,{variant:"body2",color:"textSecondary",children:A?"Loading color settings...":"Rendering colors..."})}):s(a,{sx:{mt:1,mb:2},children:[e(S,{variant:"subtitle1",gutterBottom:!0,children:d.label||"Color Palette"}),s(a,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:3},children:[e(j,{startIcon:e(Oe,{}),variant:"contained",size:"small",onClick:()=>Pe(document.documentElement.getAttribute("data-theme")),color:"primary",children:"Preview Colors TEST"}),e(j,{startIcon:e(he,{}),variant:"outlined",size:"small",onClick:de,children:"Add Color"})]}),s(a,{sx:{mb:3,display:"flex",gap:2,alignItems:"flex-end"},children:[e(U,{fullWidth:!0,size:"small",placeholder:"Search colors by name...",value:B,onChange:ke,InputProps:{startAdornment:e(F,{position:"start",children:e(fe,{})}),endAdornment:B&&e(F,{position:"end",children:e(Y,{size:"small",onClick:se,edge:"end",children:e(X,{})})})}}),s(ne,{size:"small",sx:{minWidth:150},children:[e(oe,{children:"Mode"}),s(ae,{value:y,label:"Mode",onChange:Se,startAdornment:e(F,{position:"start",children:e(ye,{fontSize:"small"})}),endAdornment:y&&e(F,{position:"end",children:e(Y,{size:"small",onClick:le,edge:"end",sx:{mr:1},children:e(X,{fontSize:"small"})})}),children:[e(V,{value:"",children:e("em",{children:"All Modes"})}),H.map(t=>e(V,{value:t,children:s(a,{sx:{display:"flex",alignItems:"center",gap:1},children:[e("span",{children:G(t)}),e("span",{children:t})]})},t))]})]})]}),(B||y)&&s(a,{sx:{mb:2,display:"flex",alignItems:"center",gap:1,flexWrap:"wrap"},children:[e(z,{label:`${L.length} of ${g.length} colors`,size:"small",variant:"outlined"}),y&&e(z,{label:`Mode: ${y}`,size:"small",variant:"filled",color:"primary",onDelete:le,avatar:e("span",{style:{paddingLeft:6},children:G(y)})}),B&&e(z,{label:`Search: "${B}"`,size:"small",variant:"filled",color:"secondary",onDelete:se})]}),N?e(a,{sx:{display:"flex",justifyContent:"center",p:4,alignItems:"center",flexDirection:"column",gap:2},children:e(S,{children:"Rendering Grid..."})}):L.length>0?s(Ie,{children:[e(a,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(300px, 1fr))",gap:2,width:"100%"},children:L.slice((i-1)*b,i*b).map(t=>e(a,{sx:{minWidth:0},children:e(_e,{pair:t,onEdit:Me,onDelete:ue})},t.id))}),L.length>b&&e(a,{sx:{mt:4,display:"flex",justifyContent:"center"},children:e(je,{count:Math.ceil(L.length/b),page:i,onChange:(t,l)=>m(l),color:"primary",size:"large",showFirstButton:!0,showLastButton:!0})}),s(S,{variant:"caption",sx:{display:"block",textAlign:"center",mt:2,color:"text.secondary"},children:["Showing ",Math.min((i-1)*b+1,L.length)," - ",Math.min(i*b,L.length)," of ",L.length," colors"]})]}):s(a,{sx:{p:4,textAlign:"center",bgcolor:"background.paper",borderRadius:1,border:"1px dashed #ccc"},children:[e(S,{color:"textSecondary",children:"No colors found using current filters."}),e(a,{sx:{mt:1},children:e(We,{component:"button",variant:"body2",onClick:()=>{D(""),$(""),m(1)},children:"Clear filters"})})]}),g.length===0&&s(a,{sx:{textAlign:"center",py:4},children:[e(S,{variant:"body2",color:"textSecondary",gutterBottom:!0,children:"No colors in your palette yet"}),e(j,{startIcon:e(he,{}),variant:"contained",onClick:de,children:"Add Your First Color"})]}),e(Je,{open:R,pair:Q,onClose:()=>{E(!1),O(null)},onSave:Ae,onDelete:ue,existingKeys:g.map(t=>t.key),updateSingleDomColor:ce})]})},Ye=n=>{const{attribute:r}=n,d=me(),h=r.attribute,f=h.startsWith("settings."),v=f?h.split(".").slice(1).join("."):h,[I,o]=C(""),[p,k]=C(""),[g,T]=C(!0),[B,D]=C(!0),[y,$]=C({}),A=be(i=>{window.dispatchEvent(new MessageEvent("auto-admin-loading-state",{data:i}))},[]),K=q(()=>Object.entries(y).map(([i,m])=>({key:i,value:String(m),id:i})),[y]),N=q(()=>Ce(K),[K]);W(()=>{(async()=>{T(!0),A(!0);try{let m={},b={};try{b=r?.default_value||{}}catch{b={}}if(f&&d?.settings){const M=d.settings||{};if(v){const J=v.split(".");m={...b,...J.reduce((P,H)=>P&&P[H]!==void 0?P[H]:{},M)}}else m={...b,...M}}else d?.[h]?m={...b,...d[h]}:m=b;$(m),Object.keys(m).length>50&&await new Promise(M=>setTimeout(M,100))}catch(m){console.error("Error loading view data:",m)}finally{T(!1)}})()},[d,h,r,f,v]),W(()=>{!g&&Object.keys(y).length>=0&&(D(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{D(!1),A(!1)})}))},[g,y,A]),W(()=>()=>{A(!1)},[A]);const x=q(()=>{let i=Object.entries(y);return I.trim()&&(i=i.filter(([m])=>m.toLowerCase().includes(I.toLowerCase()))),p&&(i=i.filter(([m])=>{const{mode:b}=_(m);return b===p})),i.reduce((m,[b,M])=>(m[b]=M,m),{})},[y,I,p]),R=i=>{o(i.target.value)},E=()=>{o("")},Q=i=>{k(i.target.value)},O=()=>{k("")};return g||B?e(a,{sx:{mt:1,mb:2,display:"flex",justifyContent:"center",alignItems:"center",minHeight:200},children:e(S,{variant:"body2",color:"textSecondary",children:g?"Loading color settings...":"Rendering colors..."})}):s(a,{sx:{mt:1,mb:2},children:[e(S,{variant:"subtitle1",gutterBottom:!0,children:r.label||"Color Palette"}),Object.keys(y).length>0&&s(Ie,{children:[s(a,{sx:{mb:3,display:"flex",gap:2,alignItems:"flex-end"},children:[e(U,{fullWidth:!0,size:"small",placeholder:"Search colors by name...",value:I,onChange:R,InputProps:{startAdornment:e(F,{position:"start",children:e(fe,{})}),endAdornment:I&&e(F,{position:"end",children:e(Y,{size:"small",onClick:E,edge:"end",children:e(X,{})})})}}),s(ne,{size:"small",sx:{minWidth:150},children:[e(oe,{children:"Mode"}),s(ae,{value:p,label:"Mode",onChange:Q,startAdornment:e(F,{position:"start",children:e(ye,{fontSize:"small"})}),endAdornment:p&&e(F,{position:"end",children:e(Y,{size:"small",onClick:O,edge:"end",sx:{mr:1},children:e(X,{fontSize:"small"})})}),children:[e(V,{value:"",children:e("em",{children:"All Modes"})}),N.map(i=>e(V,{value:i,children:s(a,{sx:{display:"flex",alignItems:"center",gap:1},children:[e("span",{children:G(i)}),e("span",{children:i})]})},i))]})]})]}),(I||p)&&s(a,{sx:{mb:2,display:"flex",alignItems:"center",gap:1,flexWrap:"wrap"},children:[e(z,{label:`${Object.keys(x).length} of ${Object.keys(y).length} colors`,size:"small",variant:"outlined"}),p&&e(z,{label:`Mode: ${G(p)} ${p}`,size:"small",variant:"filled",color:"primary",onDelete:O}),I&&e(z,{label:`Search: "${I}"`,size:"small",variant:"filled",color:"secondary",onDelete:E})]}),Object.keys(x).length>0?e(a,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(240px, 1fr))",gap:0,border:"1px solid #e0e0e0"},children:Object.entries(x).map(([i,m])=>{const{baseChips:b,mode:M}=_(i),J=G(M);return s(a,{sx:{aspectRatio:"unset",height:"30px",transition:"all 0.2s ease-in-out","&:hover":{transform:"translateY(-2px)",boxShadow:3},position:"relative",overflow:"hidden",backgroundColor:m,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-start",border:"1px solid rgba(255,255,255,0.1)",padding:"0 8px",gap:.5},children:[e(a,{sx:{display:"flex",flexWrap:"wrap",gap:.25,justifyContent:"center"},children:b.map((P,H)=>e(z,{label:P,size:"small",sx:{height:16,fontSize:"0.6rem",backgroundColor:"rgba(255,255,255,0.1)",color:"#fff","& .MuiChip-label":{padding:"0 4px"}}},H))}),M&&e(z,{label:J,size:"small",sx:{height:16,fontSize:"0.6rem",backgroundColor:"rgba(0,0,0,0.7)",color:"#fff","& .MuiChip-label":{padding:"0 4px"}}}),e(S,{variant:"caption",sx:{color:re(m),backgroundColor:"rgba(0,0,0,0.1)",padding:"1px 4px",borderRadius:.5,fontSize:"0.5rem",fontFamily:"monospace",textAlign:"center",mt:"auto"},children:m})]},i)})}):s(a,{sx:{textAlign:"center",py:4},children:[e(S,{variant:"body2",color:"textSecondary",children:"No colors found matching your filters"}),s(a,{sx:{mt:1,display:"flex",justifyContent:"center",gap:1},children:[I&&e(j,{size:"small",onClick:E,children:"Clear search"}),p&&e(j,{size:"small",onClick:O,children:"Clear mode filter"})]})]})]}),Object.keys(y).length===0&&e(a,{sx:{textAlign:"center",py:4},children:e(S,{variant:"body2",color:"textSecondary",children:"No colors configured in this palette"})})]})},Ue=({method:n,attribute:r,resourceConfig:d})=>{const[h,f]=C(!0);if(W(()=>{window.dispatchEvent(new MessageEvent("auto-admin-loading-state",{data:!0}));const v=setTimeout(()=>{f(!1)},50);return()=>{clearTimeout(v),window.dispatchEvent(new MessageEvent("auto-admin-loading-state",{data:!1}))}},[]),h)return e(a,{sx:{display:"flex",justifyContent:"center",alignItems:"center",minHeight:100},children:e(S,{variant:"body2",color:"textSecondary",children:"Initializing color palette..."})});switch(n){case"edit":return e(ve,{attribute:r,method:n,resourceConfig:d});case"create":return e(ve,{attribute:r,method:n,resourceConfig:d});case"view":return e(Ye,{attribute:r,method:n,resourceConfig:d});default:return null}};var yt=Ue;export{ve as JsonEdit,Ye as JsonView,yt 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,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Card,
+  Chip,
+  InputAdornment,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Tabs,
+  Tab,
+  Pagination,
+  Link
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddIcon from "@mui/icons-material/Add";
+import EditIcon from "@mui/icons-material/Edit";
+import PreviewIcon from "@mui/icons-material/Preview";
+import SearchIcon from "@mui/icons-material/Search";
+import ClearIcon from "@mui/icons-material/Clear";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import { ChromePicker } from "react-color";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { updateDomCssVariables } from "dash-utils";
+import { AuthPersistenceService } from "dash-auth";
+const getContrastColor = (color) => {
+  let r, g, b, a = 1;
+  if (color.startsWith("#")) {
+    const hex = color.replace("#", "");
+    if (hex.length === 8) {
+      r = parseInt(hex.substr(0, 2), 16);
+      g = parseInt(hex.substr(2, 2), 16);
+      b = parseInt(hex.substr(4, 2), 16);
+      a = parseInt(hex.substr(6, 2), 16) / 255;
+    } else {
+      r = parseInt(hex.substr(0, 2), 16);
+      g = parseInt(hex.substr(2, 2), 16);
+      b = parseInt(hex.substr(4, 2), 16);
+    }
+  } else if (color.startsWith("rgb")) {
+    const match = color.match(/rgba?\(([^)]+)\)/);
+    if (match) {
+      const values = match[1].split(",").map((v) => parseFloat(v.trim()));
+      [r, g, b, a = 1] = values;
+    } else {
+      return "#000000";
+    }
+  } else if (color.startsWith("hsl")) {
+    return "#000000";
+  } else {
+    return "#000000";
+  }
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  const effectiveLuminance = luminance * a + (1 - a);
+  return effectiveLuminance > 0.5 ? "#000000" : "#ffffff";
+};
+const convertColor = (color, format) => {
+  switch (format) {
+    case "hex":
+      return color.hex;
+    case "rgb":
+      return `rgb(${Math.round(color.rgb.r)}, ${Math.round(color.rgb.g)}, ${Math.round(color.rgb.b)})`;
+    case "rgba":
+      return `rgba(${Math.round(color.rgb.r)}, ${Math.round(color.rgb.g)}, ${Math.round(color.rgb.b)}, ${color.rgb.a || 1})`;
+    case "hsl":
+      return `hsl(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%)`;
+    case "hsla":
+      return `hsla(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%, ${color.hsl.a || 1})`;
+    default:
+      return color.hex;
+  }
+};
+const parseColorKey = (key) => {
+  const parts = key.split("--");
+  const baseName = parts[0];
+  const mode = parts[1];
+  const baseChips = baseName.split("-").filter((part) => part.length > 0);
+  return { baseChips, mode };
+};
+const extractAvailableModes = (pairs) => {
+  const modes = /* @__PURE__ */ new Set();
+  pairs.forEach((pair) => {
+    const { mode } = parseColorKey(pair.key);
+    if (mode) {
+      modes.add(mode);
+    }
+  });
+  return Array.from(modes).sort();
+};
+const getModeIcon = (mode) => {
+  if (!mode) return "";
+  switch (mode.toLowerCase()) {
+    case "light":
+      return "\u2600\uFE0F";
+    // Sun icon
+    case "dark":
+      return "\u{1F319}";
+    // Moon icon
+    default:
+      return mode;
+  }
+};
+const ColorPaletteItem = ({ pair, onEdit, onDelete }) => {
+  const textColor = getContrastColor(pair.value);
+  const { baseChips, mode } = parseColorKey(pair.key);
+  const modeIcon = getModeIcon(mode);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      onClick: () => onEdit(pair),
+      elevation: 1,
+      sx: {
+        width: "100%",
+        display: "flex",
+        alignItems: "stretch",
+        // Ensure stretch for full height
+        cursor: "pointer",
+        transition: "all 0.2s ease-in-out",
+        "&:hover": {
+          transform: "translateY(-2px)",
+          boxShadow: 3
+        },
+        borderRadius: 2,
+        overflow: "hidden",
+        position: "relative",
+        height: 80,
+        // Fixed height for consistency
+        backgroundColor: "background.paper"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: 80,
+              // Fixed square width
+              backgroundColor: pair.value,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  backgroundColor: "rgba(0,0,0,0.3)",
+                  opacity: 0,
+                  transition: "opacity 0.2s",
+                  "&:hover": { opacity: 1 },
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx(EditIcon, { sx: { color: "#fff" } })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: {
+          flexGrow: 1,
+          p: 1.5,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          // Space key and chips
+          overflow: "hidden"
+        }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", mb: 0.5 }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { fontFamily: "monospace", fontWeight: "bold", color: "text.secondary" }, children: pair.value }),
+            mode && /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: mode,
+                size: "small",
+                icon: /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: "0.8rem" }, children: modeIcon }),
+                sx: {
+                  height: 18,
+                  fontSize: "0.65rem",
+                  "& .MuiChip-label": { padding: "0 6px" }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: baseChips.map((chip, index) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: chip,
+              size: "small",
+              variant: "outlined",
+              sx: {
+                height: 20,
+                fontSize: "0.7rem",
+                maxWidth: "100%",
+                "& .MuiChip-label": {
+                  padding: "0 6px",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                }
+              }
+            },
+            index
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+const ColorEditDialog = ({ open, pair, onClose, onSave, onDelete, existingKeys, updateSingleDomColor }) => {
+  const [editedPair, setEditedPair] = useState(null);
+  const [colorFormat, setColorFormat] = useState("hex");
+  const [keyError, setKeyError] = useState("");
+  const [tabValue, setTabValue] = useState(0);
+  useEffect(() => {
+    if (pair) {
+      setEditedPair(__spreadValues({}, pair));
+      if (pair.value.startsWith("rgba(")) {
+        setColorFormat("rgba");
+      } else if (pair.value.startsWith("rgb(")) {
+        setColorFormat("rgb");
+      } else if (pair.value.startsWith("hsla(")) {
+        setColorFormat("hsla");
+      } else if (pair.value.startsWith("hsl(")) {
+        setColorFormat("hsl");
+      } else {
+        setColorFormat("hex");
+      }
+    }
+    setKeyError("");
+  }, [pair]);
+  const handleKeyChange = (newKey) => {
+    if (!editedPair) return;
+    const isDuplicate = existingKeys.some((key) => key === newKey && newKey !== (pair == null ? void 0 : pair.key));
+    setKeyError(isDuplicate ? "Key already exists" : "");
+    setEditedPair(__spreadProps(__spreadValues({}, editedPair), { key: newKey }));
+  };
+  const handleColorChange = (color) => {
+    if (!editedPair) return;
+    const newValue = convertColor(color, colorFormat);
+    setEditedPair(__spreadProps(__spreadValues({}, editedPair), { value: newValue }));
+    updateSingleDomColor(editedPair.key, newValue);
+  };
+  const handleSave = () => {
+    if (!editedPair || keyError || !editedPair.key.trim()) return;
+    onSave(editedPair);
+    onClose();
+  };
+  const handleDelete = () => {
+    if (!editedPair) return;
+    onDelete(editedPair.id);
+    onClose();
+  };
+  if (!editedPair) return null;
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      maxWidth: "sm",
+      fullWidth: true,
+      PaperProps: {
+        sx: { minHeight: 600 }
+      },
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: (pair == null ? void 0 : pair.key) ? `Edit Color: ${pair.key}` : "Add New Color" }),
+        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 3, pt: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              label: "Color Name",
+              value: editedPair.key,
+              onChange: (e) => handleKeyChange(e.target.value),
+              error: !!keyError,
+              helperText: keyError,
+              placeholder: "e.g., primary-color--light, background-dark--dark"
+            }
+          ),
+          /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+            /* @__PURE__ */ jsx(InputLabel, { children: "Color Format" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: colorFormat,
+                label: "Color Format",
+                onChange: (e) => setColorFormat(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx(MenuItem, { value: "hex", children: "HEX" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "rgb", children: "RGB" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "rgba", children: "RGBA (with alpha)" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "hsl", children: "HSL" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "hsla", children: "HSLA (with alpha)" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Tabs, { value: tabValue, onChange: (_, newValue) => setTabValue(newValue), children: [
+              /* @__PURE__ */ jsx(Tab, { label: "Color Picker" }),
+              /* @__PURE__ */ jsx(Tab, { label: "Manual Input" })
+            ] }),
+            tabValue === 0 && /* @__PURE__ */ jsx(Box, { sx: { mt: 2, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+              ChromePicker,
+              {
+                color: editedPair.value,
+                onChange: handleColorChange,
+                disableAlpha: !["rgba", "hsla"].includes(colorFormat)
+              }
+            ) }),
+            tabValue === 1 && /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(
+              TextField,
+              {
+                fullWidth: true,
+                label: `Color Value (${colorFormat.toUpperCase()})`,
+                value: editedPair.value,
+                onChange: (e) => setEditedPair(__spreadProps(__spreadValues({}, editedPair), { value: e.target.value })),
+                placeholder: colorFormat === "hex" ? "#ff0000" : colorFormat === "rgb" ? "rgb(255, 0, 0)" : colorFormat === "rgba" ? "rgba(255, 0, 0, 1)" : colorFormat === "hsl" ? "hsl(0, 100%, 50%)" : "hsla(0, 100%, 50%, 1)",
+                InputProps: {
+                  startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      sx: {
+                        width: 20,
+                        height: 20,
+                        backgroundColor: editedPair.value,
+                        border: "1px solid #ccc",
+                        borderRadius: 1
+                      }
+                    }
+                  ) })
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Preview" }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  width: "100%",
+                  height: 80,
+                  backgroundColor: editedPair.value,
+                  border: "1px solid #ccc",
+                  borderRadius: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  position: "relative"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      color: getContrastColor(editedPair.value),
+                      fontWeight: "bold",
+                      backgroundColor: "rgba(0,0,0,0.1)",
+                      padding: "4px 8px",
+                      borderRadius: 1
+                    },
+                    children: editedPair.key || "Color Preview"
+                  }
+                )
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          (pair == null ? void 0 : pair.key) && /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleDelete,
+              color: "error",
+              startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+          /* @__PURE__ */ jsx(Button, { onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleSave,
+              variant: "contained",
+              disabled: !!keyError || !editedPair.key.trim(),
+              children: "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const JsonEdit = (props) => {
+  const { method, attribute, resourceConfig } = 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 [selectedMode, setSelectedMode] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRendering, setIsRendering] = useState(true);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [editingPair, setEditingPair] = useState(null);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(24);
+  const throttleTimeoutRef = useRef(null);
+  const pendingUpdatesRef = useRef(/* @__PURE__ */ new Map());
+  const dispatchLoadingEvent = useCallback((loading) => {
+    window.dispatchEvent(new MessageEvent("auto-admin-loading-state", { data: loading }));
+  }, []);
+  const availableModes = useMemo(() => {
+    return extractAvailableModes(pairs);
+  }, [pairs]);
+  const filteredPairs = useMemo(() => {
+    let filtered = pairs;
+    if (searchTerm.trim()) {
+      filtered = filtered.filter(
+        (pair) => pair.key.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+    if (selectedMode) {
+      filtered = filtered.filter((pair) => {
+        const { mode } = parseColorKey(pair.key);
+        return mode === selectedMode;
+      });
+    }
+    return filtered;
+  }, [pairs, searchTerm, selectedMode]);
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+  const handleClearSearch = () => {
+    setSearchTerm("");
+  };
+  const handleModeChange = (event) => {
+    setSelectedMode(event.target.value);
+  };
+  const handleClearMode = () => {
+    setSelectedMode("");
+  };
+  useEffect(() => {
+    const loadInitialData = () => __async(null, null, function* () {
+      setIsLoading(true);
+      dispatchLoadingEvent(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);
+        if (initialPairs.length > 50) {
+          yield new Promise((resolve) => setTimeout(resolve, 100));
+        }
+      } catch (error) {
+        console.error("Error loading initial data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    });
+    loadInitialData();
+  }, [record, attributePath]);
+  useEffect(() => {
+    if (!isLoading && pairs.length >= 0) {
+      setIsRendering(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsRendering(false);
+          dispatchLoadingEvent(false);
+        });
+      });
+    }
+  }, [isLoading, pairs.length, dispatchLoadingEvent]);
+  useEffect(() => {
+    return () => {
+      if (throttleTimeoutRef.current) {
+        clearTimeout(throttleTimeoutRef.current);
+      }
+      dispatchLoadingEvent(false);
+    };
+  }, [dispatchLoadingEvent]);
+  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: "#000000", id: generateId() };
+    setEditingPair(newPair);
+    setEditDialogOpen(true);
+  };
+  const handleEditPair = (pair) => {
+    setEditingPair(pair);
+    setEditDialogOpen(true);
+  };
+  const handleSavePair = (editedPair) => {
+    const existingIndex = pairs.findIndex((p) => p.id === editedPair.id);
+    let updatedPairs;
+    if (existingIndex >= 0) {
+      updatedPairs = pairs.map((p) => p.id === editedPair.id ? editedPair : p);
+    } else {
+      updatedPairs = [...pairs, editedPair];
+    }
+    setPairs(updatedPairs);
+    updateFormValue(updatedPairs);
+    updateSingleDomColor(editedPair.key, editedPair.value);
+  };
+  const handleDeletePair = (id) => {
+    const updatedPairs = pairs.filter((pair) => pair.id !== id);
+    setPairs(updatedPairs);
+    updateFormValue(updatedPairs);
+  };
+  const updateSingleDomColor = (key, color) => {
+    if (!key.trim()) return;
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    const themeSuffix = `--${currentTheme}`;
+    if (key.endsWith(themeSuffix)) {
+      const baseKey = key.slice(0, -themeSuffix.length);
+      document.documentElement.style.setProperty(`--${baseKey}`, color);
+    }
+  };
+  const getTenantSettingsValues = () => {
+    const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
+    if (persistedTenantSettings) {
+      return (persistedTenantSettings == null ? void 0 : persistedTenantSettings.values) || {};
+    }
+    return {};
+  };
+  const handlePreview = (m) => {
+    const colorsObj = pairs.reduce((acc, pair) => {
+      if (pair.key.trim()) {
+        acc[pair.key] = pair.value;
+      }
+      return acc;
+    }, {});
+    updateDomCssVariables(m, colorsObj, getTenantSettingsValues());
+  };
+  const updateFormValue = (currentPairs) => {
+    const obj = currentPairs.reduce((acc, pair) => {
+      if (pair.key.trim()) {
+        acc[pair.key] = pair.value;
+      }
+      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 || isRendering) {
+    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: isLoading ? "Loading color settings..." : "Rendering colors..." }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, mb: 2 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: attribute.label || "Color Palette" }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3 }, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(PreviewIcon, {}),
+          variant: "contained",
+          size: "small",
+          onClick: () => handlePreview(document.documentElement.getAttribute("data-theme")),
+          color: "primary",
+          children: "Preview Colors TEST"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+          variant: "outlined",
+          size: "small",
+          onClick: addPair,
+          children: "Add Color"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 3, display: "flex", gap: 2, alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          fullWidth: true,
+          size: "small",
+          placeholder: "Search colors by name...",
+          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, {})
+              }
+            ) })
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(FormControl, { size: "small", sx: { minWidth: 150 }, children: [
+        /* @__PURE__ */ jsx(InputLabel, { children: "Mode" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: selectedMode,
+            label: "Mode",
+            onChange: handleModeChange,
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(FilterListIcon, { fontSize: "small" }) }),
+            endAdornment: selectedMode && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: handleClearMode,
+                edge: "end",
+                sx: { mr: 1 },
+                children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+              }
+            ) }),
+            children: [
+              /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: "All Modes" }) }),
+              availableModes.map((mode) => /* @__PURE__ */ jsx(MenuItem, { value: mode, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ jsx("span", { children: getModeIcon(mode) }),
+                /* @__PURE__ */ jsx("span", { children: mode })
+              ] }) }, mode))
+            ]
+          }
+        )
+      ] })
+    ] }),
+    (searchTerm || selectedMode) && /* @__PURE__ */ jsxs(Box, { sx: { mb: 2, display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: `${filteredPairs.length} of ${pairs.length} colors`,
+          size: "small",
+          variant: "outlined"
+        }
+      ),
+      selectedMode && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: `Mode: ${selectedMode}`,
+          size: "small",
+          variant: "filled",
+          color: "primary",
+          onDelete: handleClearMode,
+          avatar: /* @__PURE__ */ jsx("span", { style: { paddingLeft: 6 }, children: getModeIcon(selectedMode) })
+        }
+      ),
+      searchTerm && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: `Search: "${searchTerm}"`,
+          size: "small",
+          variant: "filled",
+          color: "secondary",
+          onDelete: handleClearSearch
+        }
+      )
+    ] }),
+    isRendering ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", p: 4, alignItems: "center", flexDirection: "column", gap: 2 }, children: /* @__PURE__ */ jsx(Typography, { children: "Rendering Grid..." }) }) : filteredPairs.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { sx: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+        gap: 2,
+        width: "100%"
+      }, children: filteredPairs.slice((page - 1) * pageSize, page * pageSize).map((pair) => /* @__PURE__ */ jsx(Box, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx(
+        ColorPaletteItem,
+        {
+          pair,
+          onEdit: handleEditPair,
+          onDelete: handleDeletePair
+        }
+      ) }, pair.id)) }),
+      filteredPairs.length > pageSize && /* @__PURE__ */ jsx(Box, { sx: { mt: 4, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          count: Math.ceil(filteredPairs.length / pageSize),
+          page,
+          onChange: (_, value) => setPage(value),
+          color: "primary",
+          size: "large",
+          showFirstButton: true,
+          showLastButton: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { display: "block", textAlign: "center", mt: 2, color: "text.secondary" }, children: [
+        "Showing ",
+        Math.min((page - 1) * pageSize + 1, filteredPairs.length),
+        " - ",
+        Math.min(page * pageSize, filteredPairs.length),
+        " of ",
+        filteredPairs.length,
+        " colors"
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Box, { sx: {
+      p: 4,
+      textAlign: "center",
+      bgcolor: "background.paper",
+      borderRadius: 1,
+      border: "1px dashed #ccc"
+    }, children: [
+      /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: "No colors found using current filters." }),
+      /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          component: "button",
+          variant: "body2",
+          onClick: () => {
+            setSearchTerm("");
+            setSelectedMode("");
+            setPage(1);
+          },
+          children: "Clear filters"
+        }
+      ) })
+    ] }),
+    pairs.length === 0 && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center", py: 4 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true, children: "No colors in your palette yet" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+          variant: "contained",
+          onClick: addPair,
+          children: "Add Your First Color"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ColorEditDialog,
+      {
+        open: editDialogOpen,
+        pair: editingPair,
+        onClose: () => {
+          setEditDialogOpen(false);
+          setEditingPair(null);
+        },
+        onSave: handleSavePair,
+        onDelete: handleDeletePair,
+        existingKeys: pairs.map((p) => p.key),
+        updateSingleDomColor
+      }
+    )
+  ] });
+};
+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 [selectedMode, setSelectedMode] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRendering, setIsRendering] = useState(true);
+  const [displayValue, setDisplayValue] = useState({});
+  const dispatchLoadingEvent = useCallback((loading) => {
+    window.dispatchEvent(new MessageEvent("auto-admin-loading-state", { data: loading }));
+  }, []);
+  const displayPairs = useMemo(() => {
+    return Object.entries(displayValue).map(([key, value]) => ({
+      key,
+      value: String(value),
+      id: key
+    }));
+  }, [displayValue]);
+  const availableModes = useMemo(() => {
+    return extractAvailableModes(displayPairs);
+  }, [displayPairs]);
+  useEffect(() => {
+    const loadViewData = () => __async(null, null, function* () {
+      setIsLoading(true);
+      dispatchLoadingEvent(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);
+        if (Object.keys(viewValue).length > 50) {
+          yield new Promise((resolve) => setTimeout(resolve, 100));
+        }
+      } catch (error) {
+        console.error("Error loading view data:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    });
+    loadViewData();
+  }, [record, attributePath, attribute, isNestedSetting, settingsPath]);
+  useEffect(() => {
+    if (!isLoading && Object.keys(displayValue).length >= 0) {
+      setIsRendering(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsRendering(false);
+          dispatchLoadingEvent(false);
+        });
+      });
+    }
+  }, [isLoading, displayValue, dispatchLoadingEvent]);
+  useEffect(() => {
+    return () => {
+      dispatchLoadingEvent(false);
+    };
+  }, [dispatchLoadingEvent]);
+  const filteredDisplayValue = useMemo(() => {
+    let filtered = Object.entries(displayValue);
+    if (searchTerm.trim()) {
+      filtered = filtered.filter(
+        ([key]) => key.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+    if (selectedMode) {
+      filtered = filtered.filter(([key]) => {
+        const { mode } = parseColorKey(key);
+        return mode === selectedMode;
+      });
+    }
+    return filtered.reduce((acc, [key, value]) => {
+      acc[key] = value;
+      return acc;
+    }, {});
+  }, [displayValue, searchTerm, selectedMode]);
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+  };
+  const handleClearSearch = () => {
+    setSearchTerm("");
+  };
+  const handleModeChange = (event) => {
+    setSelectedMode(event.target.value);
+  };
+  const handleClearMode = () => {
+    setSelectedMode("");
+  };
+  if (isLoading || isRendering) {
+    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: isLoading ? "Loading color settings..." : "Rendering colors..." }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, mb: 2 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: attribute.label || "Color Palette" }),
+    Object.keys(displayValue).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { mb: 3, display: "flex", gap: 2, alignItems: "flex-end" }, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            size: "small",
+            placeholder: "Search colors by name...",
+            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, {})
+                }
+              ) })
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(FormControl, { size: "small", sx: { minWidth: 150 }, children: [
+          /* @__PURE__ */ jsx(InputLabel, { children: "Mode" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: selectedMode,
+              label: "Mode",
+              onChange: handleModeChange,
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(FilterListIcon, { fontSize: "small" }) }),
+              endAdornment: selectedMode && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  onClick: handleClearMode,
+                  edge: "end",
+                  sx: { mr: 1 },
+                  children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+                }
+              ) }),
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { value: "", children: /* @__PURE__ */ jsx("em", { children: "All Modes" }) }),
+                availableModes.map((mode) => /* @__PURE__ */ jsx(MenuItem, { value: mode, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  /* @__PURE__ */ jsx("span", { children: getModeIcon(mode) }),
+                  /* @__PURE__ */ jsx("span", { children: mode })
+                ] }) }, mode))
+              ]
+            }
+          )
+        ] })
+      ] }),
+      (searchTerm || selectedMode) && /* @__PURE__ */ jsxs(Box, { sx: { mb: 2, display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: `${Object.keys(filteredDisplayValue).length} of ${Object.keys(displayValue).length} colors`,
+            size: "small",
+            variant: "outlined"
+          }
+        ),
+        selectedMode && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: `Mode: ${getModeIcon(selectedMode)} ${selectedMode}`,
+            size: "small",
+            variant: "filled",
+            color: "primary",
+            onDelete: handleClearMode
+          }
+        ),
+        searchTerm && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: `Search: "${searchTerm}"`,
+            size: "small",
+            variant: "filled",
+            color: "secondary",
+            onDelete: handleClearSearch
+          }
+        )
+      ] }),
+      Object.keys(filteredDisplayValue).length > 0 ? /* @__PURE__ */ jsx(Box, { sx: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+        // Double the width
+        gap: 0,
+        border: "1px solid #e0e0e0"
+      }, children: Object.entries(filteredDisplayValue).map(([key, value]) => {
+        const { baseChips, mode } = parseColorKey(key);
+        const modeIcon = getModeIcon(mode);
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              aspectRatio: "unset",
+              // Remove aspect ratio
+              height: "30px",
+              // Set fixed height
+              transition: "all 0.2s ease-in-out",
+              "&:hover": {
+                transform: "translateY(-2px)",
+                boxShadow: 3
+              },
+              position: "relative",
+              overflow: "hidden",
+              backgroundColor: value,
+              display: "flex",
+              flexDirection: "row",
+              // Change to row
+              alignItems: "center",
+              justifyContent: "flex-start",
+              // Align to start
+              border: "1px solid rgba(255,255,255,0.1)",
+              padding: "0 8px",
+              // Horizontal padding only
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.25, justifyContent: "center" }, children: baseChips.map((chip, index) => /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: chip,
+                  size: "small",
+                  sx: {
+                    height: 16,
+                    fontSize: "0.6rem",
+                    backgroundColor: "rgba(255,255,255,0.1)",
+                    color: "#fff",
+                    "& .MuiChip-label": {
+                      padding: "0 4px"
+                    }
+                  }
+                },
+                index
+              )) }),
+              mode && /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  label: modeIcon,
+                  size: "small",
+                  sx: {
+                    height: 16,
+                    fontSize: "0.6rem",
+                    backgroundColor: "rgba(0,0,0,0.7)",
+                    color: "#fff",
+                    "& .MuiChip-label": {
+                      padding: "0 4px"
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  sx: {
+                    color: getContrastColor(value),
+                    backgroundColor: "rgba(0,0,0,0.1)",
+                    padding: "1px 4px",
+                    borderRadius: 0.5,
+                    fontSize: "0.5rem",
+                    fontFamily: "monospace",
+                    textAlign: "center",
+                    mt: "auto"
+                  },
+                  children: value
+                }
+              )
+            ]
+          },
+          key
+        );
+      }) }) : /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center", py: 4 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No colors found matching your filters" }),
+        /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, display: "flex", justifyContent: "center", gap: 1 }, children: [
+          searchTerm && /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClearSearch, children: "Clear search" }),
+          selectedMode && /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClearMode, children: "Clear mode filter" })
+        ] })
+      ] })
+    ] }),
+    Object.keys(displayValue).length === 0 && /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", py: 4 }, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No colors configured in this palette" }) })
+  ] });
+};
+const JsonColorSelector = ({ method, attribute, resourceConfig }) => {
+  const [componentLoading, setComponentLoading] = useState(true);
+  useEffect(() => {
+    window.dispatchEvent(new MessageEvent("auto-admin-loading-state", { data: true }));
+    const timer = setTimeout(() => {
+      setComponentLoading(false);
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+      window.dispatchEvent(new MessageEvent("auto-admin-loading-state", { data: false }));
+    };
+  }, []);
+  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 color palette..." }) });
+  }
+  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 JsonColorSelector_default = JsonColorSelector;
+export {
+  JsonEdit,
+  JsonView,
+  JsonColorSelector_default as default
+};