@juv/codego-react-ui 2.0.0 → 3.0.1

package/dist/index.cjs

@@ -5050,6 +5050,45 @@ function addTerrain(map) {
     });
   }
 }
+var OSRM_PROFILE2 = { drive: "driving", walk: "foot" };
+async function fetchOsrmRoute2(points, routeType) {
+  const profile = OSRM_PROFILE2[routeType];
+  const coords = points.map((p) => `${p.lng},${p.lat}`).join(";");
+  const res = await fetch(`https://router.project-osrm.org/route/v1/${profile}/${coords}?overview=full&geometries=geojson`);
+  if (!res.ok) throw new Error("OSRM failed");
+  const data = await res.json();
+  if (data.code !== "Ok" || !data.routes?.length) throw new Error("No route");
+  const route = data.routes[0];
+  return {
+    coords: route.geometry.coordinates,
+    // already [lng, lat] for MapLibre
+    distance: route.distance,
+    duration: route.duration
+  };
+}
+function fmtDistance2(m) {
+  return m >= 1e3 ? `${(m / 1e3).toFixed(1)} km` : `${Math.round(m)} m`;
+}
+function fmtDuration2(s) {
+  const h = Math.floor(s / 3600), m = Math.floor(s % 3600 / 60);
+  return h > 0 ? `${h}h ${m}min` : `${m} min`;
+}
+function makeClusterHTML(variant, count, color) {
+  if (variant === "bubble") {
+    const size = count > 99 ? 52 : count > 9 ? 44 : 36;
+    return `<div style="width:${size}px;height:${size}px;border-radius:50%;background:${color};color:#fff;font-weight:700;font-size:${count > 99 ? 11 : 13}px;font-family:sans-serif;display:flex;align-items:center;justify-content:center;border:3px solid white;box-shadow:0 2px 8px rgba(0,0,0,.3);">${count}</div>`;
+  }
+  if (variant === "donut") {
+    const r = 20, stroke = 5, circ = 2 * Math.PI * r;
+    const dash = Math.min(count / 50, 1) * circ;
+    return `<svg width="54" height="54" viewBox="0 0 54 54"><circle cx="27" cy="27" r="${r}" fill="none" stroke="${color}33" stroke-width="${stroke}"/><circle cx="27" cy="27" r="${r}" fill="none" stroke="${color}" stroke-width="${stroke}" stroke-dasharray="${dash} ${circ}" stroke-dashoffset="${circ / 4}" stroke-linecap="round"/><circle cx="27" cy="27" r="${r - stroke - 2}" fill="${color}22"/><text x="27" y="27" text-anchor="middle" dominant-baseline="middle" font-size="12" font-weight="700" fill="${color}" font-family="sans-serif">${count}</text></svg>`;
+  }
+  const w = count > 99 ? 52 : 40;
+  return `<div style="min-width:${w}px;height:28px;border-radius:14px;background:${color};color:#fff;font-weight:700;font-size:12px;font-family:sans-serif;display:flex;align-items:center;justify-content:center;padding:0 8px;border:2px solid white;box-shadow:0 2px 8px rgba(0,0,0,.25);">${count}</div>`;
+}
+function makeEndpointHTML(color, label) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="12" fill="${color}" stroke="white" stroke-width="2.5"/><text x="14" y="14" text-anchor="middle" dominant-baseline="middle" font-size="12" font-weight="700" fill="white" font-family="sans-serif">${label}</text></svg>`;
+}
 function MapLibreMap({
   style: styleProp = "street",
   center = [0, 20],
@@ -5064,6 +5103,9 @@ function MapLibreMap({
   maxBearing = 180,
   flyTo,
   markers = [],
+  routes = [],
+  cluster = false,
+  clusterVariant = "default",
   height = 480,
   showControls = true,
   showStyleSwitcher = true,
@@ -5074,7 +5116,9 @@ function MapLibreMap({
   const containerRef = React22.useRef(null);
   const mapRef = React22.useRef(null);
   const markersRef = React22.useRef([]);
+  const routeMarkersRef = React22.useRef([]);
   const flyingRef = React22.useRef(false);
+  const [routeLoading, setRouteLoading] = React22.useState(false);
   const [activeStyle, setActiveStyle] = React22.useState(styleProp);
   const [ready, setReady] = React22.useState(false);
   const [showCamera, setShowCamera] = React22.useState(false);
@@ -5162,6 +5206,109 @@ function MapLibreMap({
       if (ftBearing !== void 0) setBearing(clampBearing(ftBearing));
     });
   }, [flyTo]);
+  React22.useEffect(() => {
+    const map = mapRef.current;
+    if (!map || !ready || routes.length === 0) return;
+    function cleanRoutes() {
+      routeMarkersRef.current.forEach((m) => m.remove());
+      routeMarkersRef.current = [];
+      const style = map.getStyle();
+      (style.layers ?? []).forEach((l) => {
+        if (l.id.startsWith("route-")) try {
+          map.removeLayer(l.id);
+        } catch {
+        }
+      });
+      Object.keys(style.sources ?? {}).forEach((s) => {
+        if (s.startsWith("route-")) try {
+          map.removeSource(s);
+        } catch {
+        }
+      });
+    }
+    cleanRoutes();
+    setRouteLoading(true);
+    Promise.all(
+      routes.map(async (r, i) => {
+        const points = [r.start, ...r.waypoints ?? [], r.end];
+        try {
+          const result = await fetchOsrmRoute2(points, r.routeType ?? "drive");
+          return { route: r, idx: i, ...result, error: false };
+        } catch {
+          return { route: r, idx: i, coords: points.map((p) => [p.lng, p.lat]), distance: 0, duration: 0, error: true };
+        }
+      })
+    ).then((results) => {
+      setRouteLoading(false);
+      if (!mapRef.current) return;
+      const m = mapRef.current;
+      const allCoords = [];
+      results.forEach(({ route, idx, coords, distance, duration }) => {
+        const color = route.color ?? (route.routeType === "walk" ? "#22c55e" : "#6366f1");
+        const srcId = `route-${idx}`;
+        const geojson = {
+          type: "Feature",
+          properties: {},
+          geometry: { type: "LineString", coordinates: coords }
+        };
+        m.addSource(srcId, { type: "geojson", data: geojson });
+        m.addLayer({
+          id: `${srcId}-outline`,
+          type: "line",
+          source: srcId,
+          layout: { "line-cap": "round", "line-join": "round" },
+          paint: { "line-color": "#ffffff", "line-width": (route.weight ?? 5) + 4, "line-opacity": 0.3 }
+        });
+        m.addLayer({
+          id: `${srcId}-line`,
+          type: "line",
+          source: srcId,
+          layout: { "line-cap": "round", "line-join": "round" },
+          paint: { "line-color": color, "line-width": route.weight ?? 5, "line-opacity": 0.9 }
+        });
+        allCoords.push(...coords);
+        const makeEndpointMarker = (lngLat, label, markerColor, popupHtml) => {
+          const el = document.createElement("div");
+          el.innerHTML = makeEndpointHTML(markerColor, label);
+          el.style.cssText = "width:28px;height:28px";
+          const popup = new import_maplibre_gl.default.Popup({ offset: [0, -16], closeButton: false }).setHTML(popupHtml);
+          const marker = new import_maplibre_gl.default.Marker({ element: el, anchor: "center" }).setLngLat(lngLat).setPopup(popup).addTo(m);
+          routeMarkersRef.current.push(marker);
+        };
+        const infoHtml = distance > 0 ? `<p style="font-size:11px;color:#888;margin:2px 0 0">${fmtDistance2(distance)} \xB7 ${fmtDuration2(duration)} \xB7 ${route.routeType === "walk" ? "\u{1F6B6} Walk" : "\u{1F697} Drive"}</p>` : "";
+        makeEndpointMarker(
+          [route.start.lng, route.start.lat],
+          "A",
+          color,
+          `<div style="padding:2px;min-width:120px"><p style="font-weight:700;font-size:13px;margin:0">${route.label ? `${route.label} \u2014 Start` : "Start"}</p>${infoHtml}</div>`
+        );
+        makeEndpointMarker(
+          [route.end.lng, route.end.lat],
+          "B",
+          "#ef4444",
+          `<div style="padding:2px;min-width:120px"><p style="font-weight:700;font-size:13px;margin:0">${route.label ? `${route.label} \u2014 End` : "End"}</p>${infoHtml}</div>`
+        );
+        if (distance > 0 && coords.length > 1) {
+          const mid = coords[Math.floor(coords.length / 2)];
+          const text = `${fmtDistance2(distance)} \xB7 ${fmtDuration2(duration)}`;
+          const estW = text.length * 7 + 16;
+          const el = document.createElement("div");
+          el.innerHTML = `<div style="display:inline-flex;align-items:center;justify-content:center;background:${color};color:white;font-size:11px;font-weight:600;font-family:sans-serif;padding:3px 8px;border-radius:12px;border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,.25);white-space:nowrap;">${text}</div>`;
+          el.style.cssText = `width:${estW}px;height:22px;pointer-events:none`;
+          const badge = new import_maplibre_gl.default.Marker({ element: el, anchor: "center" }).setLngLat(mid).addTo(m);
+          routeMarkersRef.current.push(badge);
+        }
+      });
+      if (allCoords.length > 1) {
+        const lngs = allCoords.map((c) => c[0]), lats = allCoords.map((c) => c[1]);
+        m.fitBounds(
+          [[Math.min(...lngs), Math.min(...lats)], [Math.max(...lngs), Math.max(...lats)]],
+          { padding: 60, duration: 800 }
+        );
+      }
+    });
+    return cleanRoutes;
+  }, [routes, ready]);
   function switchStyle(s) {
     const map = mapRef.current;
     if (!map) return;
@@ -5169,6 +5316,8 @@ function MapLibreMap({
     setReady(false);
     markersRef.current.forEach((m) => m.remove());
     markersRef.current = [];
+    routeMarkersRef.current.forEach((m) => m.remove());
+    routeMarkersRef.current = [];
     map.setStyle(s === "satellite" ? SATELLITE_STYLE : STYLE_URLS[s]);
     map.once("style.load", () => {
       if (s === "globe") {
@@ -5200,32 +5349,107 @@ function MapLibreMap({
       setReady(true);
     });
   }
+  const [mapZoom, setMapZoom] = React22.useState(zoom);
+  React22.useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const h2 = () => setMapZoom(map.getZoom());
+    map.on("zoomend", h2);
+    return () => {
+      map.off("zoomend", h2);
+    };
+  }, [ready]);
   React22.useEffect(() => {
     const map = mapRef.current;
     if (!map || !ready) return;
     markersRef.current.forEach((m) => m.remove());
     markersRef.current = [];
-    markers.forEach((m) => {
-      const color = resolveColor2(m.color);
-      const el = document.createElement("div");
-      el.innerHTML = makePinHTML(color, m.icon, m.image);
-      el.style.cssText = m.image ? "width:40px;height:50px" : "width:32px;height:42px";
-      const popup = new import_maplibre_gl.default.Popup({ offset: m.image ? [0, -52] : [0, -44], closeButton: false });
-      if (m.popup) {
-        if (typeof m.popup === "string") popup.setHTML(m.popup);
-        else popup.setDOMContent(m.popup);
-      } else if (m.label) {
-        popup.setHTML(`<span style="font-size:13px;font-weight:600">${m.label}</span>`);
-      }
-      const marker = new import_maplibre_gl.default.Marker({ element: el, anchor: "bottom" }).setLngLat([m.lng, m.lat]);
-      if (m.popup || m.label) marker.setPopup(popup);
-      el.addEventListener("click", () => onMarkerClick?.(m));
-      marker.addTo(map);
-      markersRef.current.push(marker);
-    });
-  }, [markers, ready, onMarkerClick]);
+    if (cluster && markers.length > 0) {
+      const GRID = 80;
+      const used = /* @__PURE__ */ new Set();
+      const groups = [];
+      markers.forEach((m, i) => {
+        if (used.has(i)) return;
+        const pt = map.project([m.lng, m.lat]);
+        const group = [m];
+        used.add(i);
+        markers.forEach((m2, j) => {
+          if (used.has(j)) return;
+          const pt2 = map.project([m2.lng, m2.lat]);
+          if (Math.abs(pt.x - pt2.x) < GRID && Math.abs(pt.y - pt2.y) < GRID) {
+            group.push(m2);
+            used.add(j);
+          }
+        });
+        const lat = group.reduce((s, x) => s + x.lat, 0) / group.length;
+        const lng = group.reduce((s, x) => s + x.lng, 0) / group.length;
+        groups.push({ center: { lng, lat }, items: group });
+      });
+      groups.forEach((g, gi) => {
+        if (g.items.length === 1) {
+          const m = g.items[0];
+          const color = resolveColor2(m.color);
+          const el = document.createElement("div");
+          el.innerHTML = makePinHTML(color, m.icon, m.image);
+          el.style.cssText = m.image ? "width:40px;height:50px" : "width:32px;height:42px";
+          const popup = new import_maplibre_gl.default.Popup({ offset: m.image ? [0, -52] : [0, -44], closeButton: false });
+          if (m.popup) {
+            typeof m.popup === "string" ? popup.setHTML(m.popup) : popup.setDOMContent(m.popup);
+          } else if (m.label) popup.setHTML(`<span style="font-size:13px;font-weight:600">${m.label}</span>`);
+          const marker = new import_maplibre_gl.default.Marker({ element: el, anchor: "bottom" }).setLngLat([m.lng, m.lat]);
+          if (m.popup || m.label) marker.setPopup(popup);
+          el.addEventListener("click", () => onMarkerClick?.(m));
+          marker.addTo(map);
+          markersRef.current.push(marker);
+        } else {
+          const color = resolveColor2(g.items[0].color);
+          const el = document.createElement("div");
+          el.innerHTML = makeClusterHTML(clusterVariant, g.items.length, color);
+          el.style.cssText = "cursor:pointer";
+          const listItems = g.items.map(
+            (m) => `<div data-id="${m.id}" style="font-size:12px;padding:2px 0;cursor:pointer;">${m.label ?? `Marker ${m.id}`}</div>`
+          ).join("");
+          const popup = new import_maplibre_gl.default.Popup({ offset: [0, -8], closeButton: false }).setHTML(`<div style="max-height:160px;overflow-y:auto;padding:2px">${listItems}</div>`);
+          el.addEventListener("click", () => {
+            map.flyTo({ center: [g.center.lng, g.center.lat], zoom: map.getZoom() + 2, duration: 400 });
+          });
+          const marker = new import_maplibre_gl.default.Marker({ element: el, anchor: "center" }).setLngLat([g.center.lng, g.center.lat]).setPopup(popup).addTo(map);
+          markersRef.current.push(marker);
+          marker.getPopup().on("open", () => {
+            g.items.forEach((m) => {
+              const node = document.querySelector(`[data-id="${m.id}"]`);
+              node?.addEventListener("click", () => onMarkerClick?.(m));
+            });
+          });
+        }
+      });
+    } else {
+      markers.forEach((m) => {
+        const color = resolveColor2(m.color);
+        const el = document.createElement("div");
+        el.innerHTML = makePinHTML(color, m.icon, m.image);
+        el.style.cssText = m.image ? "width:40px;height:50px" : "width:32px;height:42px";
+        const popup = new import_maplibre_gl.default.Popup({ offset: m.image ? [0, -52] : [0, -44], closeButton: false });
+        if (m.popup) {
+          if (typeof m.popup === "string") popup.setHTML(m.popup);
+          else popup.setDOMContent(m.popup);
+        } else if (m.label) {
+          popup.setHTML(`<span style="font-size:13px;font-weight:600">${m.label}</span>`);
+        }
+        const marker = new import_maplibre_gl.default.Marker({ element: el, anchor: "bottom" }).setLngLat([m.lng, m.lat]);
+        if (m.popup || m.label) marker.setPopup(popup);
+        el.addEventListener("click", () => onMarkerClick?.(m));
+        marker.addTo(map);
+        markersRef.current.push(marker);
+      });
+    }
+  }, [markers, ready, onMarkerClick, cluster, clusterVariant, mapZoom]);
   const cameraOpen = showCameraControls || showCamera;
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("relative w-full overflow-hidden rounded-2xl border border-border", className), style: { height: h }, children: [
+    routeLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute inset-0 z-[1000] flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2 bg-card/90 backdrop-blur-sm border border-border rounded-xl px-4 py-2 shadow-lg text-sm font-medium", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-4 w-4 rounded-full border-2 border-primary border-t-transparent animate-spin" }),
+      "Calculating route\u2026"
+    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: containerRef, style: { width: "100%", height: "100%" } }),
     cameraOpen && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "absolute top-4 left-4 z-10 bg-card/90 backdrop-blur-sm border border-border rounded-2xl p-3 shadow-xl space-y-3 w-52", children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between", children: [
@@ -6701,67 +6925,386 @@ var import_react = require("react");
 
 // src/components/conf/settingConfig.json
 var settingConfig_default = {
-  theme: "dark",
-  fontSize: "16px",
-  fontFamily: '"Space Grotesk", "Inter", sans-serif',
-  colors: {
-    primary: "#8b5cf6",
-    primaryHover: "#7c3aed",
-    secondary: "#171717",
-    secondaryHover: "#262626",
-    info: "#3b82f6",
-    infoHover: "#2563eb",
-    warning: "#f59e0b",
-    warningHover: "#d97706",
-    danger: "#ef4444",
-    dangerHover: "#dc2626"
-  }
+  defaults: {
+    theme: "light",
+    fontSize: "16px",
+    fontFamily: '"Space Grotesk", "Inter", sans-serif',
+    colors: {
+      primary: "#5CF6E2",
+      primaryHover: "#73F3E2",
+      secondary: "#171717",
+      secondaryHover: "#262626",
+      info: "#3b82f6",
+      infoHover: "#2563eb",
+      warning: "#f59e0b",
+      warningHover: "#d97706",
+      danger: "#ef4444",
+      dangerHover: "#dc2626"
+    }
+  },
+  themeOptions: [
+    { light: "Light" },
+    { dark: "Dark" },
+    { system: "System" }
+  ],
+  fontSizes: [
+    { "14px": "Small (14px)" },
+    { "16px": "Medium (16px)" },
+    { "18px": "Large (18px)" },
+    { "20px": "Extra Large (20px)" }
+  ],
+  fontFamilies: [
+    { '"Space Grotesk", "Inter", sans-serif': "Space Grotesk" },
+    { '"Inter", sans-serif': "Inter" },
+    { '"JetBrains Mono", monospace': "JetBrains Mono" },
+    { "system-ui, sans-serif": "System UI" }
+  ],
+  colorPairs: [
+    { base: "primary", hover: "primaryHover", label: "Primary" },
+    { base: "secondary", hover: "secondaryHover", label: "Secondary" },
+    { base: "info", hover: "infoHover", label: "Info" },
+    { base: "warning", hover: "warningHover", label: "Warning" },
+    { base: "danger", hover: "dangerHover", label: "Danger" }
+  ],
+  colorPalette: [
+    {
+      base: "#6366F1",
+      hover: "#4F46E5",
+      info: "#F59E0B",
+      infoHover: "#D97706"
+    },
+    {
+      base: "#818CF8",
+      hover: "#6366F1",
+      info: "#FBBF24",
+      infoHover: "#F59E0B"
+    },
+    {
+      base: "#4F46E5",
+      hover: "#4338CA",
+      info: "#F59E0B",
+      infoHover: "#D97706"
+    },
+    {
+      base: "#3730A3",
+      hover: "#312E81",
+      info: "#D97706",
+      infoHover: "#B45309"
+    },
+    {
+      base: "#7C3AED",
+      hover: "#6D28D9",
+      info: "#F97316",
+      infoHover: "#EA580C"
+    },
+    {
+      base: "#A78BFA",
+      hover: "#8B5CF6",
+      info: "#FB923C",
+      infoHover: "#F97316"
+    },
+    {
+      base: "#8B5CF6",
+      hover: "#7C3AED",
+      info: "#F97316",
+      infoHover: "#EA580C"
+    },
+    {
+      base: "#6D28D9",
+      hover: "#5B21B6",
+      info: "#EA580C",
+      infoHover: "#C2410C"
+    },
+    {
+      base: "#0EA5E9",
+      hover: "#0284C7",
+      info: "#F97316",
+      infoHover: "#EA580C"
+    },
+    {
+      base: "#38BDF8",
+      hover: "#0EA5E9",
+      info: "#FB923C",
+      infoHover: "#F97316"
+    },
+    {
+      base: "#3B82F6",
+      hover: "#2563EB",
+      info: "#F59E0B",
+      infoHover: "#D97706"
+    },
+    {
+      base: "#1D4ED8",
+      hover: "#1E40AF",
+      info: "#D97706",
+      infoHover: "#B45309"
+    },
+    {
+      base: "#06B6D4",
+      hover: "#0891B2",
+      info: "#A855F7",
+      infoHover: "#9333EA"
+    },
+    {
+      base: "#22D3EE",
+      hover: "#06B6D4",
+      info: "#C084FC",
+      infoHover: "#A855F7"
+    },
+    {
+      base: "#14B8A6",
+      hover: "#0F766E",
+      info: "#8B5CF6",
+      infoHover: "#7C3AED"
+    },
+    {
+      base: "#0D9488",
+      hover: "#0F766E",
+      info: "#7C3AED",
+      infoHover: "#6D28D9"
+    },
+    {
+      base: "#10B981",
+      hover: "#059669",
+      info: "#8B5CF6",
+      infoHover: "#7C3AED"
+    },
+    {
+      base: "#34D399",
+      hover: "#10B981",
+      info: "#A855F7",
+      infoHover: "#9333EA"
+    },
+    {
+      base: "#22C55E",
+      hover: "#16A34A",
+      info: "#7C3AED",
+      infoHover: "#6D28D9"
+    },
+    {
+      base: "#16A34A",
+      hover: "#15803D",
+      info: "#6D28D9",
+      infoHover: "#5B21B6"
+    },
+    {
+      base: "#84CC16",
+      hover: "#65A30D",
+      info: "#6366F1",
+      infoHover: "#4F46E5"
+    },
+    {
+      base: "#A3E635",
+      hover: "#84CC16",
+      info: "#818CF8",
+      infoHover: "#6366F1"
+    },
+    {
+      base: "#65A30D",
+      hover: "#4D7C0F",
+      info: "#4F46E5",
+      infoHover: "#4338CA"
+    },
+    {
+      base: "#4D7C0F",
+      hover: "#3F6212",
+      info: "#3730A3",
+      infoHover: "#312E81"
+    },
+    {
+      base: "#EAB308",
+      hover: "#CA8A04",
+      info: "#3B82F6",
+      infoHover: "#2563EB"
+    },
+    {
+      base: "#FACC15",
+      hover: "#EAB308",
+      info: "#60A5FA",
+      infoHover: "#3B82F6"
+    },
+    {
+      base: "#F59E0B",
+      hover: "#D97706",
+      info: "#2563EB",
+      infoHover: "#1D4ED8"
+    },
+    {
+      base: "#D97706",
+      hover: "#B45309",
+      info: "#1D4ED8",
+      infoHover: "#1E40AF"
+    },
+    {
+      base: "#F97316",
+      hover: "#EA580C",
+      info: "#0EA5E9",
+      infoHover: "#0284C7"
+    },
+    {
+      base: "#FB923C",
+      hover: "#F97316",
+      info: "#38BDF8",
+      infoHover: "#0EA5E9"
+    },
+    {
+      base: "#EA580C",
+      hover: "#C2410C",
+      info: "#0284C7",
+      infoHover: "#0369A1"
+    },
+    {
+      base: "#C2410C",
+      hover: "#9A3412",
+      info: "#0369A1",
+      infoHover: "#075985"
+    },
+    {
+      base: "#EF4444",
+      hover: "#DC2626",
+      info: "#0EA5E9",
+      infoHover: "#0284C7"
+    },
+    {
+      base: "#F87171",
+      hover: "#EF4444",
+      info: "#38BDF8",
+      infoHover: "#0EA5E9"
+    },
+    {
+      base: "#DC2626",
+      hover: "#B91C1C",
+      info: "#0284C7",
+      infoHover: "#0369A1"
+    },
+    {
+      base: "#B91C1C",
+      hover: "#991B1B",
+      info: "#0369A1",
+      infoHover: "#075985"
+    },
+    {
+      base: "#F43F5E",
+      hover: "#E11D48",
+      info: "#0EA5E9",
+      infoHover: "#0284C7"
+    },
+    {
+      base: "#FB7185",
+      hover: "#F43F5E",
+      info: "#38BDF8",
+      infoHover: "#0EA5E9"
+    },
+    {
+      base: "#E11D48",
+      hover: "#BE123C",
+      info: "#0284C7",
+      infoHover: "#0369A1"
+    },
+    {
+      base: "#BE123C",
+      hover: "#9F1239",
+      info: "#0369A1",
+      infoHover: "#075985"
+    },
+    {
+      base: "#EC4899",
+      hover: "#DB2777",
+      info: "#06B6D4",
+      infoHover: "#0891B2"
+    },
+    {
+      base: "#F472B6",
+      hover: "#EC4899",
+      info: "#22D3EE",
+      infoHover: "#06B6D4"
+    },
+    {
+      base: "#DB2777",
+      hover: "#BE185D",
+      info: "#0891B2",
+      infoHover: "#0E7490"
+    },
+    {
+      base: "#BE185D",
+      hover: "#9D174D",
+      info: "#0E7490",
+      infoHover: "#155E75"
+    },
+    {
+      base: "#D946EF",
+      hover: "#C026D3",
+      info: "#F59E0B",
+      infoHover: "#D97706"
+    },
+    {
+      base: "#E879F9",
+      hover: "#D946EF",
+      info: "#FBBF24",
+      infoHover: "#F59E0B"
+    },
+    {
+      base: "#C026D3",
+      hover: "#A21CAF",
+      info: "#D97706",
+      infoHover: "#B45309"
+    },
+    {
+      base: "#A21CAF",
+      hover: "#86198F",
+      info: "#B45309",
+      infoHover: "#92400E"
+    }
+  ]
 };
 
 // src/components/theme-provider.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var configDefaults = {
-  theme: settingConfig_default.theme,
-  fontSize: settingConfig_default.fontSize,
-  fontFamily: settingConfig_default.fontFamily,
-  colors: settingConfig_default.colors
+var FACTORY_DEFAULTS = {
+  theme: settingConfig_default.defaults.theme,
+  fontSize: settingConfig_default.defaults.fontSize,
+  fontFamily: settingConfig_default.defaults.fontFamily,
+  colors: settingConfig_default.defaults.colors
 };
+function loadJSON(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (raw) return { ...fallback, ...JSON.parse(raw) };
+  } catch {
+  }
+  return fallback;
+}
+function saveJSON(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
 var initialState = {
-  ...configDefaults,
+  ...FACTORY_DEFAULTS,
   setTheme: () => null,
   setColors: () => null,
   setFontSize: () => null,
   setFontFamily: () => null,
+  saveConfig: () => null,
   resetSettings: () => null
 };
 var ThemeProviderContext = (0, import_react.createContext)(initialState);
-var COLOR_PALETTE = [
-  { base: "#6366f1", hover: "#4f46e5" },
-  { base: "#8b5cf6", hover: "#7c3aed" },
-  { base: "#3b82f6", hover: "#2563eb" },
-  { base: "#10b981", hover: "#059669" },
-  { base: "#22c55e", hover: "#16a34a" },
-  { base: "#eab308", hover: "#ca8a04" },
-  { base: "#f59e0b", hover: "#d97706" },
-  { base: "#f97316", hover: "#ea580c" },
-  { base: "#ef4444", hover: "#dc2626" },
-  { base: "#ec4899", hover: "#db2777" }
-];
+var COLOR_PALETTE = settingConfig_default.colorPalette;
 function ThemeProvider({
   children,
   storageKey = "codego-ui-theme-settings",
+  savedConfigKey = "codego-ui-saved-config",
   ...props
 }) {
-  const [settings, setSettings] = (0, import_react.useState)(() => {
-    try {
-      const stored = localStorage.getItem(storageKey);
-      if (stored) return { ...configDefaults, ...JSON.parse(stored) };
-    } catch {
-    }
-    return configDefaults;
-  });
+  const [savedConfig, setSavedConfig] = (0, import_react.useState)(
+    () => loadJSON(savedConfigKey, FACTORY_DEFAULTS)
+  );
+  const [settings, setSettings] = (0, import_react.useState)(
+    () => loadJSON(storageKey, savedConfig)
+  );
   (0, import_react.useEffect)(() => {
-    localStorage.setItem(storageKey, JSON.stringify(settings));
+    saveJSON(storageKey, settings);
   }, [settings, storageKey]);
   (0, import_react.useEffect)(() => {
     const root = window.document.documentElement;
@@ -6787,7 +7330,13 @@ function ThemeProvider({
     setColors: (colors) => setSettings((s) => ({ ...s, colors: { ...s.colors, ...colors } })),
     setFontSize: (fontSize) => setSettings((s) => ({ ...s, fontSize })),
     setFontFamily: (fontFamily) => setSettings((s) => ({ ...s, fontFamily })),
-    resetSettings: () => setSettings(configDefaults)
+    // Save current live settings as the new persisted defaults
+    saveConfig: () => {
+      setSavedConfig(settings);
+      saveJSON(savedConfigKey, settings);
+    },
+    // Reset live settings back to saved defaults
+    resetSettings: () => setSettings(savedConfig)
   };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
 }
@@ -7678,6 +8227,7 @@ function SectionBlock({
 }
 
 // src/components/ui/PanelSettings.tsx
+var React39 = __toESM(require("react"), 1);
 var import_lucide_react25 = require("lucide-react");
 
 // src/components/ui/tabs.tsx
@@ -7764,30 +8314,10 @@ function Tabs({
 
 // src/components/ui/PanelSettings.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var FONT_SIZES = [
-  { value: "14px", label: "Small (14px)" },
-  { value: "16px", label: "Medium (16px)" },
-  { value: "18px", label: "Large (18px)" },
-  { value: "20px", label: "Extra Large (20px)" }
-];
-var FONT_FAMILIES = [
-  { value: '"Space Grotesk", "Inter", sans-serif', label: "Space Grotesk" },
-  { value: '"Inter", sans-serif', label: "Inter" },
-  { value: '"JetBrains Mono", monospace', label: "JetBrains Mono" },
-  { value: "system-ui, sans-serif", label: "System UI" }
-];
-var THEME_OPTIONS = [
-  { value: "light", label: "Light" },
-  { value: "dark", label: "Dark" },
-  { value: "system", label: "System" }
-];
-var COLOR_PAIRS = [
-  { base: "primary", hover: "primaryHover", label: "Primary" },
-  { base: "secondary", hover: "secondaryHover", label: "Secondary" },
-  { base: "info", hover: "infoHover", label: "Info" },
-  { base: "warning", hover: "warningHover", label: "Warning" },
-  { base: "danger", hover: "dangerHover", label: "Danger" }
-];
+var THEME_OPTIONS = settingConfig_default.themeOptions;
+var FONT_SIZES = settingConfig_default.fontSizes;
+var FONT_FAMILIES = settingConfig_default.fontFamilies;
+var COLOR_PAIRS = settingConfig_default.colorPairs;
 function SettingRow({ label, description, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-start justify-between gap-4 py-3 border-b border-border/60 last:border-0", children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "min-w-0", children: [
@@ -7835,8 +8365,8 @@ function ColorsPanel({ onColorsChange }) {
           type: "button",
           title: c.base,
           onClick: () => {
-            setColors({ primary: c.base, primaryHover: c.hover });
-            onColorsChange?.({ primary: c.base, primaryHover: c.hover });
+            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 });
           },
           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",
@@ -7912,10 +8442,18 @@ function PanelSettings({
   onColorsChange,
   onFontSizeChange,
   onFontFamilyChange,
+  onSave,
   onReset,
   className
 }) {
-  const { resetSettings } = useTheme();
+  const { saveConfig, resetSettings } = useTheme();
+  const [saved, setSaved] = React39.useState(false);
+  const handleSave = () => {
+    saveConfig();
+    onSave?.();
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2e3);
+  };
   const handleReset = () => {
     resetSettings();
     onReset?.();
@@ -7939,10 +8477,16 @@ function PanelSettings({
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("flex flex-col gap-4", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Tabs, { items: tabs, defaultValue: defaultTab, variant: "pill" }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Button, { variant: "outline", size: "sm", onClick: handleReset, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react25.RotateCcw, { className: "h-3.5 w-3.5 mr-1.5" }),
-      "Reset to Defaults"
-    ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex justify-end gap-2 pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Button, { variant: "outline", size: "sm", onClick: handleReset, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react25.RotateCcw, { className: "h-3.5 w-3.5 mr-1.5" }),
+        "Reset"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Button, { size: "sm", onClick: handleSave, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react25.Save, { className: "h-3.5 w-3.5 mr-1.5" }),
+        saved ? "Saved!" : "Save"
+      ] })
+    ] })
   ] });
 }
 
@@ -7962,7 +8506,7 @@ function Skeleton({
 }
 
 // src/components/ui/slider.tsx
-var React39 = __toESM(require("react"), 1);
+var React40 = __toESM(require("react"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function pct(val, min, max) {
   return (val - min) / (max - min) * 100;
@@ -7982,8 +8526,8 @@ function Slider({
   showValue = false,
   className
 }) {
-  const [internal, setInternal] = React39.useState(defaultValue);
-  const [hovering, setHovering] = React39.useState(false);
+  const [internal, setInternal] = React40.useState(defaultValue);
+  const [hovering, setHovering] = React40.useState(false);
   const val = controlled ?? internal;
   function handleChange(e) {
     const v = Number(e.target.value);
@@ -8060,8 +8604,8 @@ function RangeSlider({
   showValue = false,
   className
 }) {
-  const [internal, setInternal] = React39.useState(defaultValue);
-  const [active, setActive] = React39.useState(null);
+  const [internal, setInternal] = React40.useState(defaultValue);
+  const [active, setActive] = React40.useState(null);
   const val = controlled ?? internal;
   function handleChange(idx, e) {
     const v = Number(e.target.value);
@@ -8084,7 +8628,7 @@ function RangeSlider({
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "absolute w-full h-1.5 rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "absolute h-full rounded-full bg-primary", style: { left: `${p0}%`, width: `${p1 - p0}%` } }) }),
       [0, 1].map((idx) => {
         const p = idx === 0 ? p0 : p1;
-        return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React39.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React40.Fragment, { children: [
           showTooltip && active === idx && !disabled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "div",
             {
@@ -8195,7 +8739,7 @@ function StatCard({
 }
 
 // src/components/ui/stepper.tsx
-var React40 = __toESM(require("react"), 1);
+var React41 = __toESM(require("react"), 1);
 var import_lucide_react27 = require("lucide-react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function getStatus(idx, current) {
@@ -8218,7 +8762,7 @@ function Stepper({
   clickable = false,
   className
 }) {
-  const [internal, setInternal] = React40.useState(defaultCurrent);
+  const [internal, setInternal] = React41.useState(defaultCurrent);
   const current = controlled ?? internal;
   function go(idx) {
     if (!clickable) return;
@@ -8233,7 +8777,7 @@ function Stepper({
     ), children: steps.map((step, i) => {
       const status = getStatus(i, current);
       const isLast = i === steps.length - 1;
-      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(React40.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(React41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn(
         "flex",
         isHorizontal ? "flex-col items-center flex-1" : "flex-row gap-4"
       ), children: [
@@ -8277,7 +8821,7 @@ function Stepper({
 }
 
 // src/components/ui/table.tsx
-var React41 = __toESM(require("react"), 1);
+var React42 = __toESM(require("react"), 1);
 var import_lucide_react28 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var BADGE_COLORS = {
@@ -8302,11 +8846,11 @@ function Table({
   idKey = "id",
   className
 }) {
-  const [search, setSearch] = React41.useState("");
-  const [currentPage, setCurrentPage] = React41.useState(1);
-  const [selectedIds, setSelectedIds] = React41.useState([]);
-  const [sortKey, setSortKey] = React41.useState(null);
-  const [sortDir, setSortDir] = React41.useState(null);
+  const [search, setSearch] = React42.useState("");
+  const [currentPage, setCurrentPage] = React42.useState(1);
+  const [selectedIds, setSelectedIds] = React42.useState([]);
+  const [sortKey, setSortKey] = React42.useState(null);
+  const [sortDir, setSortDir] = React42.useState(null);
   const handleSort = (key) => {
     if (sortKey !== key) {
       setSortKey(key);
@@ -8320,7 +8864,7 @@ function Table({
     setSortKey(null);
     setSortDir(null);
   };
-  const filteredData = React41.useMemo(() => {
+  const filteredData = React42.useMemo(() => {
     let d = search ? data.filter(
       (item) => Object.values(item).some(
         (val) => val && typeof val === "string" && val.toLowerCase().includes(search.toLowerCase())
@@ -8338,18 +8882,18 @@ function Table({
   }, [data, search, sortKey, sortDir]);
   const totalPages = Math.max(1, Math.ceil(filteredData.length / itemsPerPage));
   const safePage = Math.min(currentPage, totalPages);
-  const paginatedData = React41.useMemo(() => {
+  const paginatedData = React42.useMemo(() => {
     if (!pagination) return filteredData;
     const start = (safePage - 1) * itemsPerPage;
     return filteredData.slice(start, start + itemsPerPage);
   }, [filteredData, pagination, safePage, itemsPerPage]);
-  React41.useEffect(() => {
+  React42.useEffect(() => {
     setCurrentPage(1);
   }, [search]);
   const handleSelectAll = (checked) => setSelectedIds(checked ? paginatedData.map((item) => String(item[idKey])) : []);
   const handleSelect = (id, checked) => setSelectedIds((prev) => checked ? [...prev, id] : prev.filter((i) => i !== id));
   const allSelected = paginatedData.length > 0 && selectedIds.length === paginatedData.length;
-  const pagePills = React41.useMemo(() => {
+  const pagePills = React42.useMemo(() => {
     if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
     if (safePage <= 3) return [1, 2, 3, 4, 5];
     if (safePage >= totalPages - 2) return [totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
@@ -8578,7 +9122,7 @@ function Table({
 }
 
 // src/components/ui/tag-input.tsx
-var React42 = __toESM(require("react"), 1);
+var React43 = __toESM(require("react"), 1);
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function TagInput({
   value: controlled,
@@ -8590,9 +9134,9 @@ function TagInput({
   disabled = false,
   className
 }) {
-  const [internal, setInternal] = React42.useState(defaultValue);
-  const [input, setInput] = React42.useState("");
-  const inputRef = React42.useRef(null);
+  const [internal, setInternal] = React43.useState(defaultValue);
+  const [input, setInput] = React43.useState("");
+  const inputRef = React43.useRef(null);
   const tags = controlled ?? internal;
   function addTag(raw) {
     const tag = raw.trim();
@@ -8697,9 +9241,9 @@ function Timeline({ items, align = "left", className }) {
 }
 
 // src/components/ui/toggle-switch.tsx
-var React43 = __toESM(require("react"), 1);
+var React44 = __toESM(require("react"), 1);
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var ToggleSwitch = React43.forwardRef(
+var ToggleSwitch = React44.forwardRef(
   ({
     className,
     inline = false,
@@ -8717,10 +9261,10 @@ var ToggleSwitch = React43.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const toggleId = id ?? React43.useId();
+    const toggleId = id ?? React44.useId();
     const trackW = width ? typeof width === "number" ? `${width}px` : width : "2.75rem";
     const trackH = height ? typeof height === "number" ? `${height}px` : height : "1.5rem";
-    const [internalChecked, setInternalChecked] = React43.useState(defaultChecked ?? false);
+    const [internalChecked, setInternalChecked] = React44.useState(defaultChecked ?? false);
     const isControlled = checked !== void 0;
     const isOn = accepted ? true : declined ? false : isControlled ? checked : internalChecked;
     const stateColor = accepted ? acceptedColor ?? "#22c55e" : declined ? declinedColor ?? "#ef4444" : isOn ? void 0 : void 0;
@@ -8790,7 +9334,7 @@ var ToggleSwitch = React43.forwardRef(
 ToggleSwitch.displayName = "ToggleSwitch";
 
 // src/components/ui/tree-view.tsx
-var React44 = __toESM(require("react"), 1);
+var React45 = __toESM(require("react"), 1);
 var import_lucide_react30 = require("lucide-react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function TreeNodeItem({ node, depth, selected, expanded, onToggleExpand, onSelect, multiple }) {
@@ -8844,8 +9388,8 @@ function TreeView({
   className
 }) {
   const init = defaultSelected ? Array.isArray(defaultSelected) ? defaultSelected : [defaultSelected] : [];
-  const [internal, setInternal] = React44.useState(init);
-  const [expanded, setExpanded] = React44.useState(defaultExpanded);
+  const [internal, setInternal] = React45.useState(init);
+  const [expanded, setExpanded] = React45.useState(defaultExpanded);
   const selected = controlled ? Array.isArray(controlled) ? controlled : [controlled] : internal;
   function handleSelect(id) {
     let next;
@@ -8876,7 +9420,7 @@ function TreeView({
 }
 
 // src/components/ui/widget.tsx
-var React45 = __toESM(require("react"), 1);
+var React46 = __toESM(require("react"), 1);
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var iconColorMap = {
   primary: "bg-primary/10 text-primary",
@@ -8905,8 +9449,8 @@ var variantMap = {
   outline: "bg-transparent border-2"
 };
 function useCountUp(target, enabled, duration = 1e3) {
-  const [display, setDisplay] = React45.useState(enabled ? 0 : target);
-  React45.useEffect(() => {
+  const [display, setDisplay] = React46.useState(enabled ? 0 : target);
+  React46.useEffect(() => {
     if (!enabled) {
       setDisplay(target);
       return;
@@ -9019,7 +9563,7 @@ function Widget({
 }
 
 // src/components/ui/wizard.tsx
-var React46 = __toESM(require("react"), 1);
+var React47 = __toESM(require("react"), 1);
 var import_lucide_react31 = require("lucide-react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var SIZE_MAP = {
@@ -9043,7 +9587,7 @@ function HeaderDefault({
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-start w-full", children: steps.map((step, i) => {
     const status = stepStatus(i, current);
     const isLast = i === steps.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(React46.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col items-center flex-1 min-w-0", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(React47.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col items-center flex-1 min-w-0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center w-full", children: [
         i > 0 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cn("flex-1 h-0.5 transition-colors", i <= current ? "bg-primary" : "bg-border") }),
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -9271,7 +9815,7 @@ function WizardPanel({
   const isFirst = current === 0;
   const isLast = current === steps.length - 1;
   const isSidebar = variant === "sidebar";
-  const [validationError, setValidationError] = React46.useState(null);
+  const [validationError, setValidationError] = React47.useState(null);
   const handleNext = () => {
     const validate = steps[current]?.validate;
     if (validate) {
@@ -9375,7 +9919,7 @@ function Wizard({
   className,
   contentClassName
 }) {
-  const [internalStep, setInternalStep] = React46.useState(defaultStep);
+  const [internalStep, setInternalStep] = React47.useState(defaultStep);
   const current = controlledStep ?? internalStep;
   const go = (idx) => {
     const clamped = Math.max(0, Math.min(steps.length - 1, idx));
@@ -9390,7 +9934,7 @@ function Wizard({
     }
     go(current + 1);
   };
-  React46.useEffect(() => {
+  React47.useEffect(() => {
     if (layout !== "modal" || !isOpen || unchange) return;
     const handler = (e) => {
       if (e.key === "Escape") onClose?.();