@dashadmin/dash-components 1.3.25 → 1.3.28

package/dist/components/JsonColorSelector/JsonColorSelectorEnhanced.js

@@ -1,2 +1,863 @@
-import{Fragment as xe,jsx as t,jsxs as c}from"react/jsx-runtime";import{useRecordContext as Oe}from"react-admin";import{useFormContext as $e}from"react-hook-form";import{Box as a,Button as T,IconButton as ue,TextField as Ne,Typography as C,Chip as R,InputAdornment as K,FormControl as je,InputLabel as We,Select as _e,MenuItem as me,Pagination as Ue,Card as Ge,Link as U}from"@mui/material";import pe from"@mui/icons-material/Add";import He from"@mui/icons-material/Edit";import Je from"@mui/icons-material/Preview";import qe from"@mui/icons-material/Search";import ge from"@mui/icons-material/Clear";import Ye from"@mui/icons-material/FilterList";import Qe from"@mui/icons-material/Download";import Xe from"@mui/icons-material/Upload";import{useState as u,useEffect as M,useRef as G,useCallback as b,useMemo as fe}from"react";import{extractAvailableModes as Ze,getContrastColor as et,getModeIcon as H,parseColorKey as J}from"./helpers/functions";import tt from"./components/ImageColorExtractor";import ot from"./components/ColorEditDialog";import{updateDomCssVariables as he}from"@dashadmin/dash-utils";import{AuthPersistenceService as nt}from"@dashadmin/dash-auth";const q=!1,rt=!1,Rt={"primary-color":"Primary Color","secondary-color":"Secondary Color","highlight-color":"Highlight Color","contrast-color":"Contrast Color"},st=({pair:m,onEdit:P,onDelete:v})=>{const O=et(m.value),{baseChips:f,mode:y}=J(m.key),E=H(y);return c(Ge,{onClick:()=>P(m),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:[t(a,{sx:{width:80,backgroundColor:m.value,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",position:"relative"},children:t(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:t(He,{sx:{color:"#fff"}})})}),c(a,{sx:{flexGrow:1,p:1.5,display:"flex",flexDirection:"column",justifyContent:"space-between",overflow:"hidden"},children:[c(a,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",mb:.5},children:[t(C,{variant:"caption",sx:{fontFamily:"monospace",fontWeight:"bold",color:"text.secondary"},children:m.value}),y&&t(R,{label:y,size:"small",icon:t("span",{style:{marginLeft:6,fontSize:"0.8rem"},children:E}),sx:{height:18,fontSize:"0.65rem","& .MuiChip-label":{padding:"0 6px"}}})]}),t(a,{sx:{display:"flex",flexWrap:"wrap",gap:.5},children:f.map((p,S)=>t(R,{label:p,size:"small",variant:"outlined",sx:{height:20,fontSize:"0.7rem",maxWidth:"100%","& .MuiChip-label":{padding:"0 6px",overflow:"hidden",textOverflow:"ellipsis"}}},S))})]})]})},ye=m=>{const{method:P,attribute:v,resourceConfig:O}=m,f=Oe(),{setValue:y,getValues:E}=$e(),p=v.attribute,S=p.startsWith("settings."),V=S?p.split(".").slice(1).join("."):p,[i,k]=u([]),[x,$]=u(""),[h,N]=u(""),[D,Y]=u(!0),[Q,X]=u(!0),[Ce,j]=u(!1),[be,W]=u(null),[ve,Se]=u([]),[A,I]=u(1),[w]=u(50),[F,Z]=u(!q),ee=G(null),te=G(null),it=G(new Map),L=b(e=>{window.dispatchEvent(new MessageEvent("auto-admin-loading-state",{data:e}))},[]),Ie=b(e=>{Se(e)},[]),we=fe(()=>Ze(i),[i]),g=fe(()=>{let e=i;return x.trim()&&(e=e.filter(o=>o.key.toLowerCase().includes(x.toLowerCase()))),h&&(e=e.filter(o=>{const{mode:r}=J(o.key);return r===h})),e},[i,x,h]),Ee=b(()=>{try{const e=Ae(i),o=new Blob([e],{type:"text/css"}),r=URL.createObjectURL(o),n=document.createElement("a");n.href=r,n.download="color-variables.css",document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(r),console.log("CSS variables exported successfully")}catch(e){console.error("Error exporting CSS variables:",e)}},[i]),Pe=b(()=>{ee.current?.click()},[]),ke=b(e=>{const o=e.target.files?.[0];if(!o)return;const r=new FileReader;r.onload=n=>{try{const s=n.target?.result,l=Le(s);if(l.length>0){const d=Te(i,l);k(d),z(d),console.log(`Imported ${l.length} color variables from CSS`)}else console.warn("No valid CSS variables found in the imported file")}catch(s){console.error("Error importing CSS file:",s)}},r.readAsText(o),e.target.value=""},[i]),Ae=e=>{const o=["/* Color Variables - Generated by JsonColorSelector */","/* Import this file or copy these variables to your CSS */","",":root {"],r=e.reduce((n,s)=>{if(!s.key.trim())return n;const{mode:l}=J(s.key),d=l||"default";return n[d]||(n[d]=[]),n[d].push(s),n},{});return Object.entries(r).forEach(([n,s])=>{s.length>0&&(o.push(`  /* ${n} mode colors */`),s.forEach(l=>{const d=l.key.startsWith("--")?l.key:`--${l.key}`;o.push(`  ${d}: ${l.value};`)}),o.push(""))}),o.push("}"),o.push(""),o.push("/* Usage example: */"),o.push("/* .my-element { background-color: var(--primary-color); } */"),o.join(`
-`)},Le=e=>{const o=[],r=e.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s+/g," ").trim(),n=/--([^:]+):\s*([^;]+);/g;let s;for(;(s=n.exec(r))!==null;){const[,l,d]=s,B=l.trim(),de=d.trim();Be(de)&&o.push({key:B,value:de,id:_()})}return o},Be=e=>[/^#[0-9a-fA-F]{3,8}$/,/^rgb\(/i,/^rgba\(/i,/^hsl\(/i,/^hsla\(/i,/^(red|blue|green|yellow|purple|orange|pink|brown|black|white|gray|grey)$/i].some(r=>r.test(e.trim())),Te=(e,o)=>{const r=[...e];return o.forEach(n=>{const s=r.findIndex(l=>l.key===n.key);s>=0?r[s]={...r[s],value:n.value}:r.push(n)}),r},Re=e=>{$(e.target.value),I(1)},oe=()=>{$(""),I(1)},Me=e=>{N(e.target.value),I(1)},ne=()=>{N(""),I(1)};M(()=>{(async()=>{Y(!0),L(!0);try{let o={},r={};try{r=v?.default_value||{}}catch{r={}}if(S&&f?.settings){const s=f.settings||{};o={...r,...re(s,V)}}else f?.[p]?o={...r,...f[p]}:o=r;const n=Object.entries(o).map(([s,l])=>({key:s,value:String(l),id:_()}));k(n),n.length>50&&await new Promise(s=>setTimeout(s,100))}catch(o){console.error("Error loading initial data:",o)}finally{Y(!1)}})()},[f,p]),M(()=>{!D&&i.length>=0&&(X(!0),requestAnimationFrame(()=>{requestAnimationFrame(()=>{X(!1),L(!1)})}))},[D,i.length,L]),M(()=>()=>{te.current&&clearTimeout(te.current),L(!1)},[L]);const re=(e,o)=>o?o.split(".").reduce((n,s)=>n&&n[s]!==void 0?n[s]:{},e):e,Ve=(e,o,r)=>{if(!o)return r;const n=o.split("."),s=n.pop(),l=n.reduce((d,B)=>(d[B]===void 0&&(d[B]={}),d[B]),e);return s&&(l[s]=r),e},_=()=>Math.random().toString(36).substring(2,11),se=()=>{const e={key:"",value:"#000000",id:_()};W(e),j(!0)},De=e=>{W(e),j(!0)},Fe=e=>{const o=i.findIndex(n=>n.id===e.id);let r;o>=0?r=i.map(n=>n.id===e.id?e:n):r=[...i,e],k(r),z(r),ie(e.key,e.value)},ae=e=>{const o=i.filter(r=>r.id!==e);k(o),z(o)},ze=e=>{k(e),z(e)},ie=b((e,o)=>{e.trim()&&requestAnimationFrame(()=>{const r=document.documentElement.getAttribute("data-theme")||"",n=r?`--${r}`:"";if(n&&e.endsWith(n)){const s=e.slice(0,-n.length);document.documentElement.style.setProperty(`--${s}`,o),document.documentElement.style.setProperty(`--${s}${n}`,o)}else{const s=e.startsWith("--")?e:`--${e}`;document.documentElement.style.setProperty(s,o)}})},[]),lt=e=>{const r=`--${document.documentElement.getAttribute("data-theme")}`;requestAnimationFrame(()=>{Object.entries(e).forEach(([n,s])=>{if(n.endsWith(r)){const l=n.slice(0,-r.length);document.documentElement.style.setProperty(`--${l}`,String(s))}})})},Ke=b(e=>{const o=i.reduce((r,n)=>(n.key.trim()&&(r[n.key]=n.value),r),{});he(e,o,ce())},[i]),le=b(()=>{try{let e={};if(S){const o=E("settings")||{};e=re(o,V)||{}}else e=E(p)||{};return e}catch(e){return console.error("Error syncing pairs from form values:",e),{}}},[E,S,V,p]),ce=()=>{const e=nt.getTenantSettings();return e?e?.values||{}:{}};M(()=>{const e=o=>{console.log("Theme switch event received:",o.detail.mode);const r=le();console.log("Current colors from form:",r),he(o.detail.mode,r,ce())};return window.addEventListener("dash-theme-mode-switched",e),()=>{window.removeEventListener("dash-theme-mode-switched",e)}},[le]);const z=e=>{const o=e.reduce((r,n)=>(n.key.trim()&&(r[n.key]=n.value),r),{});if(S){const r=E("settings")||{},n=Ve({...r},V,o);y("settings",n,{shouldDirty:!0})}else y(p,o,{shouldDirty:!0})};return D||Q?t(a,{sx:{mt:1,mb:2,display:"flex",justifyContent:"center",alignItems:"center",minHeight:200},children:t(C,{variant:"body2",color:"textSecondary",children:D?"Loading color settings...":"Rendering colors..."})}):c(a,{sx:{mt:1,mb:2},children:[t(C,{variant:"subtitle1",gutterBottom:!0,children:v.label||"Color Palette"}),t("input",{type:"file",ref:ee,accept:".css",style:{display:"none"},onChange:ke}),t(tt,{onColorsExtracted:Ie,onColorsUpdate:ze,existingPairs:i}),c(a,{sx:{mb:3,display:"flex",gap:2,alignItems:"flex-end"},children:[t(Ne,{fullWidth:!0,size:"small",placeholder:"Search colors by name...",value:x,onChange:Re,InputProps:{startAdornment:t(K,{position:"start",children:t(qe,{})}),endAdornment:x&&t(K,{position:"end",children:t(ue,{size:"small",onClick:oe,edge:"end",children:t(ge,{})})})}}),c(je,{size:"small",sx:{minWidth:150},children:[t(We,{children:"Mode"}),c(_e,{value:h,label:"Mode",onChange:Me,startAdornment:t(K,{position:"start",children:t(Ye,{fontSize:"small"})}),endAdornment:h&&t(K,{position:"end",children:t(ue,{size:"small",onClick:ne,edge:"end",sx:{mr:1},children:t(ge,{fontSize:"small"})})}),children:[t(me,{value:"",children:t("em",{children:"All Modes"})}),we.map(e=>t(me,{value:e,children:c(a,{sx:{display:"flex",alignItems:"center",gap:1},children:[t("span",{children:H(e)}),t("span",{children:e})]})},e))]})]})]}),c(a,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:3,flexWrap:"wrap",gap:1},children:[c(a,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[t(T,{startIcon:t(Je,{}),variant:"contained",size:"small",onClick:()=>Ke(document.documentElement.getAttribute("data-theme")),color:"primary",children:"Preview Colors"}),t(T,{startIcon:t(Qe,{}),variant:"outlined",size:"small",onClick:Ee,color:"secondary",disabled:i.length===0,children:"Export CSS"}),t(T,{startIcon:t(Xe,{}),variant:"outlined",size:"small",onClick:Pe,color:"secondary",children:"Import CSS"})]}),t(T,{startIcon:t(pe,{}),variant:"outlined",size:"small",onClick:se,children:"Add Color"})]}),(x||h)&&c(a,{sx:{mb:2,display:"flex",alignItems:"center",gap:1,flexWrap:"wrap"},children:[t(R,{label:`${g.length} of ${i.length} colors`,size:"small",variant:"outlined"}),h&&t(R,{label:`Mode: ${h}`,size:"small",variant:"filled",color:"primary",onDelete:ne,avatar:t("span",{style:{paddingLeft:6},children:H(h)})}),x&&t(R,{label:`Search: "${x}"`,size:"small",variant:"filled",color:"secondary",onDelete:oe})]}),t(a,{sx:{flexGrow:1,my:2},children:Q?t(a,{sx:{display:"flex",justifyContent:"center",p:4,alignItems:"center",flexDirection:"column",gap:2},children:t(C,{children:"Rendering Grid..."})}):g.length>0?c(xe,{children:[t(a,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(300px, 1fr))",gap:2,width:"100%"},children:(F?g:g.slice((A-1)*w,A*w)).map(e=>t(a,{sx:{minWidth:0},children:t(st,{pair:e,onEdit:De,onDelete:ae})},e.id))}),q&&!F&&g.length>w&&c(a,{sx:{mt:4,display:"flex",flexDirection:"column",alignItems:"center",gap:1},children:[t(Ue,{count:Math.ceil(g.length/w),page:A,onChange:(e,o)=>I(o),color:"primary",size:"large",showFirstButton:!0,showLastButton:!0}),rt&&t(U,{component:"button",variant:"body2",underline:"always",onClick:()=>Z(!0),sx:{mt:.5,fontSize:"0.8rem",cursor:"pointer"},children:"Show all"})]}),t(C,{variant:"caption",sx:{display:"block",textAlign:"center",mt:2,color:"text.secondary"},children:F?`Showing all ${g.length} colors`:`Showing ${Math.min((A-1)*w+1,g.length)} - ${Math.min(A*w,g.length)} of ${g.length} colors`}),q&&F&&g.length>w&&t(a,{sx:{display:"flex",justifyContent:"center",mt:1},children:t(U,{component:"button",variant:"body2",underline:"always",onClick:()=>{Z(!1),I(1)},sx:{fontSize:"0.8rem",cursor:"pointer"},children:"Show paginated"})})]}):c(a,{sx:{p:4,textAlign:"center",bgcolor:"background.paper",borderRadius:1,border:"1px dashed #ccc"},children:[t(C,{color:"textSecondary",children:"No colors found using current filters."}),t(a,{sx:{mt:1},children:t(U,{component:"button",variant:"body2",onClick:()=>{$(""),N(""),I(1)},children:"Clear filters"})})]})}),i.length===0&&c(a,{sx:{textAlign:"center",py:4},children:[t(C,{variant:"body2",color:"textSecondary",gutterBottom:!0,children:"No colors in your palette yet"}),t(T,{startIcon:t(pe,{}),variant:"contained",onClick:se,children:"Add Your First Color"})]}),t(ot,{open:Ce,pair:be,onClose:()=>{j(!1),W(null)},onSave:Fe,onDelete:ae,existingKeys:i.map(e=>e.key),updateSingleDomColor:ie,extractedColors:ve})]})},at=({method:m,attribute:P,resourceConfig:v})=>{const[O,f]=u(!0);if(M(()=>{window.dispatchEvent(new MessageEvent("auto-admin-loading-state",{data:!0}));const y=setTimeout(()=>{f(!1)},50);return()=>{clearTimeout(y),window.dispatchEvent(new MessageEvent("auto-admin-loading-state",{data:!1}))}},[]),O)return t(a,{sx:{display:"flex",justifyContent:"center",alignItems:"center",minHeight:100},children:t(C,{variant:"body2",color:"textSecondary",children:"Initializing color palette..."})});switch(m){case"edit":return t(ye,{attribute:P,method:m,resourceConfig:v});case"create":return t(ye,{attribute:P,method:m,resourceConfig:v});default:return t(xe,{children:"Not implemented"})}};var Mt=at;export{ye as JsonEdit,Mt 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,
+  Chip,
+  InputAdornment,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Pagination,
+  Card,
+  Link
+} from "@mui/material";
+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 DownloadIcon from "@mui/icons-material/Download";
+import UploadIcon from "@mui/icons-material/Upload";
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { extractAvailableModes, getContrastColor, getModeIcon, parseColorKey } from "./helpers/functions";
+import ImageColorExtractor from "./components/ImageColorExtractor";
+import ColorEditDialog from "./components/ColorEditDialog";
+import { updateDomCssVariables } from "dash-utils";
+import { AuthPersistenceService } from "dash-auth";
+const JSON_COLOR_SELECTOR_PAGINATION_ENABLED = false;
+const JSON_COLOR_SELECTOR_PAGINATION_SHOW_ALL = false;
+const DEFAULT_COLOR_MAPPINGS = {
+  "primary-color": "Primary Color",
+  "secondary-color": "Secondary Color",
+  "highlight-color": "Highlight Color",
+  "contrast-color": "Contrast Color"
+};
+const LocalColorPaletteItem = ({ 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",
+          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 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 [extractedColors, setExtractedColors] = useState([]);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(50);
+  const [showAll, setShowAll] = useState(!JSON_COLOR_SELECTOR_PAGINATION_ENABLED);
+  const fileInputRef = useRef(null);
+  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 handleColorsExtracted = useCallback((colors) => {
+    setExtractedColors(colors);
+  }, []);
+  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 handleExportCSS = useCallback(() => {
+    try {
+      const cssContent = generateCSSContent(pairs);
+      const blob = new Blob([cssContent], { type: "text/css" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "color-variables.css";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      console.log("CSS variables exported successfully");
+    } catch (error) {
+      console.error("Error exporting CSS variables:", error);
+    }
+  }, [pairs]);
+  const handleImportCSS = useCallback(() => {
+    var _a;
+    (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  }, []);
+  const handleFileSelect = useCallback((event) => {
+    var _a;
+    const file = (_a = event.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      var _a2;
+      try {
+        const cssContent = (_a2 = e.target) == null ? void 0 : _a2.result;
+        const importedPairs = parseCSSContent(cssContent);
+        if (importedPairs.length > 0) {
+          const mergedPairs = mergePairs(pairs, importedPairs);
+          setPairs(mergedPairs);
+          updateFormValue(mergedPairs);
+          console.log(`Imported ${importedPairs.length} color variables from CSS`);
+        } else {
+          console.warn("No valid CSS variables found in the imported file");
+        }
+      } catch (error) {
+        console.error("Error importing CSS file:", error);
+      }
+    };
+    reader.readAsText(file);
+    event.target.value = "";
+  }, [pairs]);
+  const generateCSSContent = (colorPairs) => {
+    const cssLines = [
+      "/* Color Variables - Generated by JsonColorSelector */",
+      "/* Import this file or copy these variables to your CSS */",
+      "",
+      ":root {"
+    ];
+    const groupedPairs = colorPairs.reduce((acc, pair) => {
+      if (!pair.key.trim()) return acc;
+      const { mode } = parseColorKey(pair.key);
+      const groupKey = mode || "default";
+      if (!acc[groupKey]) {
+        acc[groupKey] = [];
+      }
+      acc[groupKey].push(pair);
+      return acc;
+    }, {});
+    Object.entries(groupedPairs).forEach(([mode, modePairs]) => {
+      if (modePairs.length > 0) {
+        cssLines.push(`  /* ${mode} mode colors */`);
+        modePairs.forEach((pair) => {
+          const cssVarName = pair.key.startsWith("--") ? pair.key : `--${pair.key}`;
+          cssLines.push(`  ${cssVarName}: ${pair.value};`);
+        });
+        cssLines.push("");
+      }
+    });
+    cssLines.push("}");
+    cssLines.push("");
+    cssLines.push("/* Usage example: */");
+    cssLines.push("/* .my-element { background-color: var(--primary-color); } */");
+    return cssLines.join("\n");
+  };
+  const parseCSSContent = (cssContent) => {
+    const pairs2 = [];
+    const cleanCSS = cssContent.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").trim();
+    const variableRegex = /--([^:]+):\s*([^;]+);/g;
+    let match;
+    while ((match = variableRegex.exec(cleanCSS)) !== null) {
+      const [, name, value] = match;
+      const cleanName = name.trim();
+      const cleanValue = value.trim();
+      if (isColorValue(cleanValue)) {
+        pairs2.push({
+          key: cleanName,
+          value: cleanValue,
+          id: generateId()
+        });
+      }
+    }
+    return pairs2;
+  };
+  const isColorValue = (value) => {
+    const colorPatterns = [
+      /^#[0-9a-fA-F]{3,8}$/,
+      // Hex colors
+      /^rgb\(/i,
+      // RGB colors
+      /^rgba\(/i,
+      // RGBA colors
+      /^hsl\(/i,
+      // HSL colors
+      /^hsla\(/i,
+      // HSLA colors
+      /^(red|blue|green|yellow|purple|orange|pink|brown|black|white|gray|grey)$/i
+      // Named colors
+    ];
+    return colorPatterns.some((pattern) => pattern.test(value.trim()));
+  };
+  const mergePairs = (existingPairs, importedPairs) => {
+    const merged = [...existingPairs];
+    importedPairs.forEach((importedPair) => {
+      const existingIndex = merged.findIndex((pair) => pair.key === importedPair.key);
+      if (existingIndex >= 0) {
+        merged[existingIndex] = __spreadProps(__spreadValues({}, merged[existingIndex]), { value: importedPair.value });
+      } else {
+        merged.push(importedPair);
+      }
+    });
+    return merged;
+  };
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+    setPage(1);
+  };
+  const handleClearSearch = () => {
+    setSearchTerm("");
+    setPage(1);
+  };
+  const handleModeChange = (event) => {
+    setSelectedMode(event.target.value);
+    setPage(1);
+  };
+  const handleClearMode = () => {
+    setSelectedMode("");
+    setPage(1);
+  };
+  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 handleColorsUpdate = (newPairs) => {
+    setPairs(newPairs);
+    updateFormValue(newPairs);
+  };
+  const updateSingleDomColor = useCallback((key, color) => {
+    if (!key.trim()) return;
+    requestAnimationFrame(() => {
+      const currentTheme = document.documentElement.getAttribute("data-theme") || "";
+      const themeSuffix = currentTheme ? `--${currentTheme}` : "";
+      if (themeSuffix && key.endsWith(themeSuffix)) {
+        const baseKey = key.slice(0, -themeSuffix.length);
+        document.documentElement.style.setProperty(`--${baseKey}`, color);
+        document.documentElement.style.setProperty(`--${baseKey}${themeSuffix}`, color);
+      } else {
+        const varName = key.startsWith("--") ? key : `--${key}`;
+        document.documentElement.style.setProperty(varName, color);
+      }
+    });
+  }, []);
+  const updateDomColors = (colors) => {
+    const currentTheme = document.documentElement.getAttribute("data-theme");
+    const themeSuffix = `--${currentTheme}`;
+    requestAnimationFrame(() => {
+      Object.entries(colors).forEach(([key, value]) => {
+        if (key.endsWith(themeSuffix)) {
+          const baseKey = key.slice(0, -themeSuffix.length);
+          document.documentElement.style.setProperty(`--${baseKey}`, String(value));
+        }
+      });
+    });
+  };
+  const handlePreview = useCallback((m) => {
+    const colorsObj = pairs.reduce((acc, pair) => {
+      if (pair.key.trim()) {
+        acc[pair.key] = pair.value;
+      }
+      return acc;
+    }, {});
+    updateDomCssVariables(m, colorsObj, getTenantSettingsValues());
+  }, [pairs]);
+  const syncPairsFromForm = useCallback(() => {
+    try {
+      let currentFormValue = {};
+      if (isNestedSetting) {
+        const currentSettings = getValues("settings") || {};
+        currentFormValue = getNestedValue(currentSettings, settingsPath) || {};
+      } else {
+        currentFormValue = getValues(attributePath) || {};
+      }
+      return currentFormValue;
+    } catch (error) {
+      console.error("Error syncing pairs from form values:", error);
+      return {};
+    }
+  }, [getValues, isNestedSetting, settingsPath, attributePath]);
+  const getTenantSettingsValues = () => {
+    const persistedTenantSettings = AuthPersistenceService.getTenantSettings();
+    if (persistedTenantSettings) {
+      return (persistedTenantSettings == null ? void 0 : persistedTenantSettings.values) || {};
+    }
+    return {};
+  };
+  useEffect(() => {
+    const handleThemeSwitch = (event) => {
+      console.log("Theme switch event received:", event.detail.mode);
+      const currentColors = syncPairsFromForm();
+      console.log("Current colors from form:", currentColors);
+      updateDomCssVariables(event.detail.mode, currentColors, getTenantSettingsValues());
+    };
+    window.addEventListener("dash-theme-mode-switched", handleThemeSwitch);
+    return () => {
+      window.removeEventListener("dash-theme-mode-switched", handleThemeSwitch);
+    };
+  }, [syncPairsFromForm]);
+  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__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        accept: ".css",
+        style: { display: "none" },
+        onChange: handleFileSelect
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageColorExtractor,
+      {
+        onColorsExtracted: handleColorsExtracted,
+        onColorsUpdate: handleColorsUpdate,
+        existingPairs: pairs
+      }
+    ),
+    /* @__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))
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 3, flexWrap: "wrap", gap: 1 }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            startIcon: /* @__PURE__ */ jsx(PreviewIcon, {}),
+            variant: "contained",
+            size: "small",
+            onClick: () => handlePreview(document.documentElement.getAttribute("data-theme")),
+            color: "primary",
+            children: "Preview Colors"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            startIcon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+            variant: "outlined",
+            size: "small",
+            onClick: handleExportCSS,
+            color: "secondary",
+            disabled: pairs.length === 0,
+            children: "Export CSS"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            startIcon: /* @__PURE__ */ jsx(UploadIcon, {}),
+            variant: "outlined",
+            size: "small",
+            onClick: handleImportCSS,
+            color: "secondary",
+            children: "Import CSS"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+          variant: "outlined",
+          size: "small",
+          onClick: addPair,
+          children: "Add Color"
+        }
+      )
+    ] }),
+    (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
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1, my: 2 }, children: 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: (showAll ? filteredPairs : filteredPairs.slice((page - 1) * pageSize, page * pageSize)).map((pair) => /* @__PURE__ */ jsx(Box, { sx: { minWidth: 0 }, children: /* @__PURE__ */ jsx(
+        LocalColorPaletteItem,
+        {
+          pair,
+          onEdit: handleEditPair,
+          onDelete: handleDeletePair
+        }
+      ) }, pair.id)) }),
+      JSON_COLOR_SELECTOR_PAGINATION_ENABLED && !showAll && filteredPairs.length > pageSize && /* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            count: Math.ceil(filteredPairs.length / pageSize),
+            page,
+            onChange: (_, value) => setPage(value),
+            color: "primary",
+            size: "large",
+            showFirstButton: true,
+            showLastButton: true
+          }
+        ),
+        JSON_COLOR_SELECTOR_PAGINATION_SHOW_ALL && /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            variant: "body2",
+            underline: "always",
+            onClick: () => setShowAll(true),
+            sx: { mt: 0.5, fontSize: "0.8rem", cursor: "pointer" },
+            children: "Show all"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { display: "block", textAlign: "center", mt: 2, color: "text.secondary" }, children: showAll ? `Showing all ${filteredPairs.length} colors` : `Showing ${Math.min((page - 1) * pageSize + 1, filteredPairs.length)} - ${Math.min(page * pageSize, filteredPairs.length)} of ${filteredPairs.length} colors` }),
+      JSON_COLOR_SELECTOR_PAGINATION_ENABLED && showAll && filteredPairs.length > pageSize && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", mt: 1 }, children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          component: "button",
+          variant: "body2",
+          underline: "always",
+          onClick: () => {
+            setShowAll(false);
+            setPage(1);
+          },
+          sx: { fontSize: "0.8rem", cursor: "pointer" },
+          children: "Show paginated"
+        }
+      ) })
+    ] }) : /* @__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,
+        extractedColors
+      }
+    )
+  ] });
+};
+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":
+    case "list":
+    default:
+      return /* @__PURE__ */ jsx(Fragment, { children: "Not implemented" });
+  }
+};
+var JsonColorSelectorEnhanced_default = JsonColorSelector;
+export {
+  JsonEdit,
+  JsonColorSelectorEnhanced_default as default
+};