@juv/codego-react-ui 3.2.4 → 3.2.7

package/dist/index.global.js

@@ -67345,7 +67345,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             ] }, getKey(opt))) }),
             /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "max-h-48 overflow-y-auto p-1", children: options.map((option) => {
               const checked = selectedValues.includes(getKey(option));
-              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: cn("flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-accent", checked && "bg-primary/8 text-primary"), children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: cn("flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-primary", checked && "bg-primary/8 text-primary"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn("flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors", checked ? "bg-primary border-primary text-primary-foreground" : "border-slate-900/30 bg-background/50"), children: checked && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Check, { className: "h-3 w-3" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "input",
@@ -67383,7 +67383,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               "aria-required": required,
               "aria-invalid": !!error,
               className: cn(
-                "w-full appearance-none rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm px-4 py-2 pr-10 h-10 text-sm text-foreground transition-colors hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                "w-full appearance-none rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm px-4 py-2 pr-10 h-10 text-sm text-foreground transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 error && "border-destructive focus:ring-destructive"
               ),
               children: [
@@ -67478,8 +67478,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
                   "div",
                   {
                     className: cn(
-                      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
-                      (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && "bg-accent text-accent-foreground"
+                      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-primary/10 hover:text-primary",
+                      (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && "bg-primary/80 text-primary-foreground"
                     ),
                     onClick: () => handleSelect(getKey(option)),
                     children: [
@@ -69640,6 +69640,23 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       document.body
     );
   }
+  var BUILT_IN_PATTERNS = {
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    url: /^https?:\/\/.+/,
+    numeric: /^\d+(\.\d+)?$/,
+    alpha: /^[a-zA-Z]+$/,
+    alphanumeric: /^[a-zA-Z0-9]+$/
+  };
+  function validateField(field, value) {
+    if (field.required && (value === "" || value === null || value === void 0))
+      return `${field.label} is required`;
+    if (field.validation && value !== "" && value !== null && value !== void 0) {
+      const pattern = field.validation instanceof RegExp ? field.validation : BUILT_IN_PATTERNS[field.validation];
+      if (pattern && !pattern.test(String(value)))
+        return field.validationMessage ?? `${field.label} is invalid`;
+    }
+    return null;
+  }
   function FieldRenderer({ field, value, onChange }) {
     if (field.render) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: field.render(value, onChange) });
     const strOptions = (field.options ?? []).map(
@@ -69797,7 +69814,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     itemId,
     onClose,
     onSuccess,
-    notif
+    notif,
+    grid
   }) {
     const [form, setForm] = React28.useState(() => {
       const init = {};
@@ -69806,11 +69824,22 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       });
       return init;
     });
+    const [fieldErrors, setFieldErrors] = React28.useState({});
     const [loading, setLoading] = React28.useState(false);
     const [error, setError] = React28.useState(null);
     const [banner, setBanner] = React28.useState(false);
     const handleSubmit = async (e) => {
       e.preventDefault();
+      const errs = {};
+      fields.forEach((f) => {
+        const msg = validateField(f, form[f.key]);
+        if (msg) errs[f.key] = msg;
+      });
+      if (Object.keys(errs).length) {
+        setFieldErrors(errs);
+        return;
+      }
+      setFieldErrors({});
       setLoading(true);
       setError(null);
       try {
@@ -69841,8 +69870,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             loading ? "Saving\u2026" : "Save Changes"
           ] })
         ] }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-          banner && notif && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-2", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("form", { onSubmit: handleSubmit, className: grid ? `grid gap-4` : "space-y-4", style: grid ? { gridTemplateColumns: `repeat(${grid}, minmax(0, 1fr))` } : void 0, children: [
+          banner && notif && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-2", style: grid ? { gridColumn: `1 / -1` } : void 0, children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               NotificationBanner,
               {
@@ -69854,21 +69883,38 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             ),
             notif.action && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: notif.action })
           ] }),
-          fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-            f.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
-              f.label,
-              f.required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              FieldRenderer,
-              {
-                field: f,
-                value: form[f.key],
-                onChange: (v) => setForm((prev) => ({ ...prev, [f.key]: v }))
-              }
-            )
-          ] }, f.key)),
-          error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-danger", children: error })
+          fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            "div",
+            {
+              style: {
+                ...f.colSpan ? { gridColumn: `span ${f.colSpan}` } : {},
+                ...f.rowSpan ? { gridRow: `span ${f.rowSpan}` } : {}
+              },
+              children: [
+                f.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
+                  f.label,
+                  f.required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  FieldRenderer,
+                  {
+                    field: f,
+                    value: form[f.key],
+                    onChange: (v) => {
+                      setForm((prev) => ({ ...prev, [f.key]: v }));
+                      if (fieldErrors[f.key]) {
+                        const msg = validateField(f, v);
+                        setFieldErrors((prev) => ({ ...prev, [f.key]: msg ?? "" }));
+                      }
+                    }
+                  }
+                ),
+                fieldErrors[f.key] && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-danger mt-1", children: fieldErrors[f.key] })
+              ]
+            },
+            f.key
+          )),
+          error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-danger", style: grid ? { gridColumn: `1 / -1` } : void 0, children: error })
         ] })
       }
     );
@@ -70389,6 +70435,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           baseUrl: defaultActions.baseUrl,
           itemId: String(editItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
+          grid: defaultActions.editFormGrid,
           onClose: () => setEditItem(null),
           onSuccess: (updated) => {
             setTableData(
@@ -70504,6 +70551,40 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       reload: () => setTick((t) => t + 1)
     };
   }
+  function ActionBtn2({
+    cfg,
+    defaultIcon,
+    defaultLabel,
+    defaultVariant,
+    onClick
+  }) {
+    const mode = cfg?.displayMode ?? "icon";
+    const icon = cfg?.icon ?? defaultIcon;
+    const label = cfg?.label ?? defaultLabel;
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      Button,
+      {
+        type: "button",
+        title: label,
+        size: cfg?.size ?? "xs",
+        variant: cfg?.variant ?? defaultVariant,
+        rounded: cfg?.rounded ?? "lg",
+        gradientFrom: cfg?.gradientFrom,
+        gradientTo: cfg?.gradientTo,
+        gradientDirection: cfg?.gradientDirection,
+        bgColor: cfg?.bgColor,
+        textColor: cfg?.textColor,
+        borderColor: cfg?.borderColor,
+        borderWidth: cfg?.borderWidth,
+        shadow: cfg?.shadow,
+        iconOnly: mode === "icon",
+        leftIcon: mode !== "text" ? icon : void 0,
+        className: cfg?.className,
+        onClick,
+        children: mode !== "icon" ? label : void 0
+      }
+    );
+  }
   function DGModalShell({ title, onClose, children, footer }) {
     return (0, import_react_dom3.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -70619,7 +70700,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     itemId,
     onClose,
     onSuccess,
-    notif
+    notif,
+    grid
   }) {
     const [form, setForm] = React29.useState(() => {
       const init = {};
@@ -70628,11 +70710,22 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       });
       return init;
     });
+    const [fieldErrors, setFieldErrors] = React29.useState({});
     const [loading, setLoading] = React29.useState(false);
     const [error, setError] = React29.useState(null);
     const [banner, setBanner] = React29.useState(false);
     const handleSubmit = async (e) => {
       e.preventDefault();
+      const errs = {};
+      fields.forEach((f) => {
+        const msg = validateField(f, form[f.key]);
+        if (msg) errs[f.key] = msg;
+      });
+      if (Object.keys(errs).length) {
+        setFieldErrors(errs);
+        return;
+      }
+      setFieldErrors({});
       setLoading(true);
       setError(null);
       try {
@@ -70663,27 +70756,26 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             loading ? "Saving\u2026" : "Save Changes"
           ] })
         ] }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-          banner && notif && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              NotificationBanner,
-              {
-                variant: notif.editVariant ?? "success",
-                title: notif.editTitle ?? "Record updated",
-                description: notif.editBody,
-                onClose: () => setBanner(false)
-              }
-            ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("form", { onSubmit: handleSubmit, className: grid ? "grid gap-4" : "space-y-4", style: grid ? { gridTemplateColumns: `repeat(${grid}, minmax(0, 1fr))` } : void 0, children: [
+          banner && notif && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-2", style: grid ? { gridColumn: "1 / -1" } : void 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NotificationBanner, { variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, onClose: () => setBanner(false) }),
             notif.action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: notif.action })
           ] }),
-          fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+          fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { ...f.colSpan ? { gridColumn: `span ${f.colSpan}` } : {}, ...f.rowSpan ? { gridRow: `span ${f.rowSpan}` } : {} }, children: [
             f.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
               f.label,
               f.required && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGFieldRenderer, { field: f, value: form[f.key], onChange: (v) => setForm((p) => ({ ...p, [f.key]: v })) })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGFieldRenderer, { field: f, value: form[f.key], onChange: (v) => {
+              setForm((p) => ({ ...p, [f.key]: v }));
+              if (fieldErrors[f.key]) {
+                const msg = validateField(f, v);
+                setFieldErrors((p) => ({ ...p, [f.key]: msg ?? "" }));
+              }
+            } }),
+            fieldErrors[f.key] && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-danger mt-1", children: fieldErrors[f.key] })
           ] }, f.key)),
-          error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-danger", children: error })
+          error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-danger", style: grid ? { gridColumn: "1 / -1" } : void 0, children: error })
         ] })
       }
     );
@@ -70734,6 +70826,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     columns,
     data,
     rowKey,
+    filterable,
     selectable = false,
     selected: controlledSelected,
     onSelectChange,
@@ -70829,7 +70922,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       header: "Actions",
       render: (row) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          ActionBtn,
+          ActionBtn2,
           {
             cfg: defaultActions.viewButton,
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Eye, { className: "h-3.5 w-3.5" }),
@@ -70839,7 +70932,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          ActionBtn,
+          ActionBtn2,
           {
             cfg: defaultActions.editButton,
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pencil, { className: "h-3.5 w-3.5" }),
@@ -70849,7 +70942,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          ActionBtn,
+          ActionBtn2,
           {
             cfg: defaultActions.deleteButton,
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Trash, { className: "h-3.5 w-3.5" }),
@@ -70859,7 +70952,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           }
         ),
         defaultActions.extraActions?.map((extra) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          ActionBtn,
+          ActionBtn2,
           {
             cfg: extra,
             defaultIcon: extra.icon,
@@ -70941,9 +71034,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               `${String(col.key)}-${ci}`
             ))
           ] }),
-          visibleCols.some((c) => c.filterable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { className: "border-b border-border bg-muted/10", children: [
+          filterable && filterable.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { className: "border-b border-border bg-muted/10", children: [
             selectable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", {}),
-            visibleCols.map((col, ci) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-3 py-1.5", children: col.filterable && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
+            visibleCols.map((col, ci) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-3 py-1.5", children: filterable.includes(String(col.key)) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
               /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" }),
               /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "input",
@@ -71078,6 +71171,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           baseUrl: defaultActions.baseUrl,
           itemId: String(editItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
+          grid: defaultActions.editFormGrid,
           onClose: () => setEditItem(null),
           onSuccess: (updated) => {
             setTableData((prev) => prev.map((r2) => String(r2[actionIdKey]) === String(updated[actionIdKey]) ? updated : r2));
@@ -73796,12 +73890,14 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         primaryHover: "#73F3E2",
         secondary: "#171717",
         secondaryHover: "#262626",
-        info: "#3b82f6",
-        infoHover: "#2563eb",
+        info: "#F59E0B",
+        infoHover: "#D97706",
         warning: "#f59e0b",
         warningHover: "#d97706",
         danger: "#ef4444",
-        dangerHover: "#dc2626"
+        dangerHover: "#dc2626",
+        accent: "#F59E0B",
+        accentHover: "#D97706"
       }
     },
     themeOptions: [
@@ -73811,9 +73907,15 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ],
     fontSizes: [
       { "14px": "Small (14px)" },
+      { "15px": "Small (15px)" },
       { "16px": "Medium (16px)" },
+      { "17px": "Medium (17px)" },
       { "18px": "Large (18px)" },
-      { "20px": "Extra Large (20px)" }
+      { "19px": "Large (19px)" },
+      { "20px": "Extra Large (20px)" },
+      { "21px": "Extra Large (21px)" },
+      { "22px": "Extra Large (22px)" },
+      { "24px": "2X Extra Large (24px)" }
     ],
     fontFamilies: [
       { '"Space Grotesk", "Inter", sans-serif': "Space Grotesk" },
@@ -73826,296 +73928,393 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       { base: "secondary", hover: "secondaryHover", label: "Secondary" },
       { base: "info", hover: "infoHover", label: "Info" },
       { base: "warning", hover: "warningHover", label: "Warning" },
-      { base: "danger", hover: "dangerHover", label: "Danger" }
+      { base: "danger", hover: "dangerHover", label: "Danger" },
+      { base: "accent", hover: "accentHover", label: "accent" }
     ],
     colorPalette: [
       {
         base: "#6366F1",
         hover: "#4F46E5",
         info: "#F59E0B",
-        infoHover: "#D97706"
+        infoHover: "#D97706",
+        accent: "#F59E0B",
+        accentHover: "#D97706"
       },
       {
         base: "#818CF8",
         hover: "#6366F1",
         info: "#FBBF24",
-        infoHover: "#F59E0B"
+        infoHover: "#F59E0B",
+        accent: "#FBBF24",
+        accentHover: "#F59E0B"
       },
       {
         base: "#4F46E5",
         hover: "#4338CA",
         info: "#F59E0B",
-        infoHover: "#D97706"
+        infoHover: "#D97706",
+        accent: "#F59E0B",
+        accentHover: "#D97706"
       },
       {
         base: "#3730A3",
         hover: "#312E81",
         info: "#D97706",
-        infoHover: "#B45309"
+        infoHover: "#B45309",
+        accent: "#D97706",
+        accentHover: "#B45309"
       },
       {
         base: "#7C3AED",
         hover: "#6D28D9",
         info: "#F97316",
-        infoHover: "#EA580C"
+        infoHover: "#EA580C",
+        accent: "#F97316",
+        accentHover: "#EA580C"
       },
       {
         base: "#A78BFA",
         hover: "#8B5CF6",
         info: "#FB923C",
-        infoHover: "#F97316"
+        infoHover: "#F97316",
+        accent: "#FB923C",
+        accentHover: "#F97316"
       },
       {
         base: "#8B5CF6",
         hover: "#7C3AED",
         info: "#F97316",
-        infoHover: "#EA580C"
+        infoHover: "#EA580C",
+        accent: "#F97316",
+        accentHover: "#EA580C"
       },
       {
         base: "#6D28D9",
         hover: "#5B21B6",
         info: "#EA580C",
-        infoHover: "#C2410C"
+        infoHover: "#C2410C",
+        accent: "#EA580C",
+        accentHover: "#C2410C"
       },
       {
         base: "#0EA5E9",
         hover: "#0284C7",
         info: "#F97316",
-        infoHover: "#EA580C"
+        infoHover: "#EA580C",
+        accent: "#F97316",
+        accentHover: "#EA580C"
       },
       {
         base: "#38BDF8",
         hover: "#0EA5E9",
         info: "#FB923C",
-        infoHover: "#F97316"
+        infoHover: "#F97316",
+        accent: "#FB923C",
+        accentHover: "#F97316"
       },
       {
         base: "#3B82F6",
         hover: "#2563EB",
         info: "#F59E0B",
-        infoHover: "#D97706"
+        infoHover: "#D97706",
+        accent: "#F59E0B",
+        accentHover: "#D97706"
       },
       {
         base: "#1D4ED8",
         hover: "#1E40AF",
         info: "#D97706",
-        infoHover: "#B45309"
+        infoHover: "#B45309",
+        accent: "#D97706",
+        accentHover: "#B45309"
       },
       {
         base: "#06B6D4",
         hover: "#0891B2",
         info: "#A855F7",
-        infoHover: "#9333EA"
+        infoHover: "#9333EA",
+        accent: "#A855F7",
+        accentHover: "#9333EA"
       },
       {
         base: "#22D3EE",
         hover: "#06B6D4",
         info: "#C084FC",
-        infoHover: "#A855F7"
+        infoHover: "#A855F7",
+        accent: "#C084FC",
+        accentHover: "#A855F7"
       },
       {
         base: "#14B8A6",
         hover: "#0F766E",
         info: "#8B5CF6",
-        infoHover: "#7C3AED"
+        infoHover: "#7C3AED",
+        accent: "#8B5CF6",
+        accentHover: "#7C3AED"
       },
       {
         base: "#0D9488",
         hover: "#0F766E",
         info: "#7C3AED",
-        infoHover: "#6D28D9"
+        infoHover: "#6D28D9",
+        accent: "#7C3AED",
+        accentHover: "#6D28D9"
       },
       {
         base: "#10B981",
         hover: "#059669",
         info: "#8B5CF6",
-        infoHover: "#7C3AED"
+        infoHover: "#7C3AED",
+        accent: "#8B5CF6",
+        accentHover: "#7C3AED"
       },
       {
         base: "#34D399",
         hover: "#10B981",
         info: "#A855F7",
-        infoHover: "#9333EA"
+        infoHover: "#9333EA",
+        accent: "#A855F7",
+        accentHover: "#9333EA"
       },
       {
         base: "#22C55E",
         hover: "#16A34A",
         info: "#7C3AED",
-        infoHover: "#6D28D9"
+        infoHover: "#6D28D9",
+        accent: "#7C3AED",
+        accentHover: "#6D28D9"
       },
       {
         base: "#16A34A",
         hover: "#15803D",
         info: "#6D28D9",
-        infoHover: "#5B21B6"
+        infoHover: "#5B21B6",
+        accent: "#6D28D9",
+        accentHover: "#5B21B6"
       },
       {
         base: "#84CC16",
         hover: "#65A30D",
         info: "#6366F1",
-        infoHover: "#4F46E5"
+        infoHover: "#4F46E5",
+        accent: "#6366F1",
+        accentHover: "#4F46E5"
       },
       {
         base: "#A3E635",
         hover: "#84CC16",
         info: "#818CF8",
-        infoHover: "#6366F1"
+        infoHover: "#6366F1",
+        accent: "#818CF8",
+        accentHover: "#6366F1"
       },
       {
         base: "#65A30D",
         hover: "#4D7C0F",
         info: "#4F46E5",
-        infoHover: "#4338CA"
+        infoHover: "#4338CA",
+        accent: "#4F46E5",
+        accentHover: "#4338CA"
       },
       {
         base: "#4D7C0F",
         hover: "#3F6212",
         info: "#3730A3",
-        infoHover: "#312E81"
+        infoHover: "#312E81",
+        accent: "#3730A3",
+        accentHover: "#312E81"
       },
       {
         base: "#EAB308",
         hover: "#CA8A04",
         info: "#3B82F6",
-        infoHover: "#2563EB"
+        infoHover: "#2563EB",
+        accent: "#3B82F6",
+        accentHover: "#2563EB"
       },
       {
         base: "#FACC15",
         hover: "#EAB308",
         info: "#60A5FA",
-        infoHover: "#3B82F6"
+        infoHover: "#3B82F6",
+        accent: "#60A5FA",
+        accentHover: "#3B82F6"
       },
       {
         base: "#F59E0B",
         hover: "#D97706",
         info: "#2563EB",
-        infoHover: "#1D4ED8"
+        infoHover: "#1D4ED8",
+        accent: "#2563EB",
+        accentHover: "#1D4ED8"
       },
       {
         base: "#D97706",
         hover: "#B45309",
         info: "#1D4ED8",
-        infoHover: "#1E40AF"
+        infoHover: "#1E40AF",
+        accent: "#1D4ED8",
+        accentHover: "#1E40AF"
       },
       {
         base: "#F97316",
         hover: "#EA580C",
         info: "#0EA5E9",
-        infoHover: "#0284C7"
+        infoHover: "#0284C7",
+        accent: "#0EA5E9",
+        accentHover: "#0284C7"
       },
       {
         base: "#FB923C",
         hover: "#F97316",
         info: "#38BDF8",
-        infoHover: "#0EA5E9"
+        infoHover: "#0EA5E9",
+        accent: "#38BDF8",
+        accentHover: "#0EA5E9"
       },
       {
         base: "#EA580C",
         hover: "#C2410C",
         info: "#0284C7",
-        infoHover: "#0369A1"
+        infoHover: "#0369A1",
+        accent: "#0284C7",
+        accentHover: "#0369A1"
       },
       {
         base: "#C2410C",
         hover: "#9A3412",
         info: "#0369A1",
-        infoHover: "#075985"
+        infoHover: "#075985",
+        accent: "#0369A1",
+        accentHover: "#075985"
       },
       {
         base: "#EF4444",
         hover: "#DC2626",
         info: "#0EA5E9",
-        infoHover: "#0284C7"
+        infoHover: "#0284C7",
+        accent: "#0EA5E9",
+        accentHover: "#0284C7"
       },
       {
         base: "#F87171",
         hover: "#EF4444",
         info: "#38BDF8",
-        infoHover: "#0EA5E9"
+        infoHover: "#0EA5E9",
+        accent: "#38BDF8",
+        accentHover: "#0EA5E9"
       },
       {
         base: "#DC2626",
         hover: "#B91C1C",
         info: "#0284C7",
-        infoHover: "#0369A1"
+        infoHover: "#0369A1",
+        accent: "#0284C7",
+        accentHover: "#0369A1"
       },
       {
         base: "#B91C1C",
         hover: "#991B1B",
         info: "#0369A1",
-        infoHover: "#075985"
+        infoHover: "#075985",
+        accent: "#0369A1",
+        accentHover: "#075985"
       },
       {
         base: "#F43F5E",
         hover: "#E11D48",
         info: "#0EA5E9",
-        infoHover: "#0284C7"
+        infoHover: "#0284C7",
+        accent: "#0EA5E9",
+        accentHover: "#0284C7"
       },
       {
         base: "#FB7185",
         hover: "#F43F5E",
         info: "#38BDF8",
-        infoHover: "#0EA5E9"
+        infoHover: "#0EA5E9",
+        accent: "#38BDF8",
+        accentHover: "#0EA5E9"
       },
       {
         base: "#E11D48",
         hover: "#BE123C",
         info: "#0284C7",
-        infoHover: "#0369A1"
+        infoHover: "#0369A1",
+        accent: "#0284C7",
+        accentHover: "#0369A1"
       },
       {
         base: "#BE123C",
         hover: "#9F1239",
         info: "#0369A1",
-        infoHover: "#075985"
+        infoHover: "#075985",
+        accent: "#0369A1",
+        accentHover: "#075985"
       },
       {
         base: "#EC4899",
         hover: "#DB2777",
         info: "#06B6D4",
-        infoHover: "#0891B2"
+        infoHover: "#0891B2",
+        accent: "#06B6D4",
+        accentHover: "#0891B2"
       },
       {
         base: "#F472B6",
         hover: "#EC4899",
         info: "#22D3EE",
-        infoHover: "#06B6D4"
+        infoHover: "#06B6D4",
+        accent: "#22D3EE",
+        accentHover: "#06B6D4"
       },
       {
         base: "#DB2777",
         hover: "#BE185D",
         info: "#0891B2",
-        infoHover: "#0E7490"
+        infoHover: "#0E7490",
+        accent: "#0891B2",
+        accentHover: "#0E7490"
       },
       {
         base: "#BE185D",
         hover: "#9D174D",
         info: "#0E7490",
-        infoHover: "#155E75"
+        infoHover: "#155E75",
+        accent: "#0E7490",
+        accentHover: "#155E75"
       },
       {
         base: "#D946EF",
         hover: "#C026D3",
         info: "#F59E0B",
-        infoHover: "#D97706"
+        infoHover: "#D97706",
+        accent: "#F59E0B",
+        accentHover: "#D97706"
       },
       {
         base: "#E879F9",
         hover: "#D946EF",
         info: "#FBBF24",
-        infoHover: "#F59E0B"
+        infoHover: "#F59E0B",
+        accent: "#FBBF24",
+        accentHover: "#F59E0B"
       },
       {
         base: "#C026D3",
         hover: "#A21CAF",
         info: "#D97706",
-        infoHover: "#B45309"
+        infoHover: "#B45309",
+        accent: "#D97706",
+        accentHover: "#B45309"
       },
       {
         base: "#A21CAF",
         hover: "#86198F",
         info: "#B45309",
-        infoHover: "#92400E"
+        infoHover: "#92400E",
+        accent: "#B45309",
+        accentHover: "#92400E"
       }
     ]
   };
@@ -74903,8 +75102,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             type: "button",
             title: c.base,
             onClick: () => {
-              setColors({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover });
-              onColorsChange?.({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover });
+              setColors({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover, accent: c.accent, accentHover: c.accentHover });
+              onColorsChange?.({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover, accent: c.accent, accentHover: c.accentHover });
             },
             className: cn(
               "h-7 w-full rounded-md border border-white/10 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring",