@juv/codego-react-ui 1.1.7 → 3.0.0

package/dist/index.global.js

@@ -1459,7 +1459,7 @@ var CodegoUI = (() => {
   var require_react_dom_production = __commonJS({
     "node_modules/react-dom/cjs/react-dom.production.js"(exports) {
       "use strict";
-      var React49 = require_react();
+      var React50 = require_react();
       function formatProdErrorMessage(code) {
         var url = "https://react.dev/errors/" + code;
         if (1 < arguments.length) {
@@ -1499,7 +1499,7 @@ var CodegoUI = (() => {
           implementation
         };
       }
-      var ReactSharedInternals = React49.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+      var ReactSharedInternals = React50.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
       function getCrossOriginStringAs(as, input) {
         if ("font" === as) return "";
         if ("string" === typeof input)
@@ -1653,7 +1653,7 @@ var CodegoUI = (() => {
           return dispatcher;
         }
         "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-        var React49 = require_react(), Internals = {
+        var React50 = require_react(), Internals = {
           d: {
             f: noop,
             r: function() {
@@ -1671,7 +1671,7 @@ var CodegoUI = (() => {
           },
           p: 0,
           findDOMNode: null
-        }, REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), ReactSharedInternals = React49.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+        }, REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), ReactSharedInternals = React50.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
         "function" === typeof Map && null != Map.prototype && "function" === typeof Map.prototype.forEach && "function" === typeof Set && null != Set.prototype && "function" === typeof Set.prototype.clear && "function" === typeof Set.prototype.forEach || console.error(
           "React depends on Map and Set built-in types. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"
         );
@@ -2118,18 +2118,18 @@ var CodegoUI = (() => {
         function isValidElement(object) {
           return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
         }
-        var React49 = require_react(), REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo"), REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = /* @__PURE__ */ Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference"), ReactSharedInternals = React49.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+        var React50 = require_react(), REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo"), REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = /* @__PURE__ */ Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference"), ReactSharedInternals = React50.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
           return null;
         };
-        React49 = {
+        React50 = {
           react_stack_bottom_frame: function(callStackForError) {
             return callStackForError();
           }
         };
         var specialPropKeyWarningShown;
         var didWarnAboutElementRef = {};
-        var unknownOwnerDebugStack = React49.react_stack_bottom_frame.bind(
-          React49,
+        var unknownOwnerDebugStack = React50.react_stack_bottom_frame.bind(
+          React50,
           UnknownOwner
         )();
         var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -36231,24 +36231,38 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   ];
   var Satellite = createLucideIcon("satellite", __iconNode53);
 
-  // node_modules/lucide-react/dist/esm/icons/search.js
+  // node_modules/lucide-react/dist/esm/icons/save.js
   var __iconNode54 = [
+    [
+      "path",
+      {
+        d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
+        key: "1c8476"
+      }
+    ],
+    ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
+    ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
+  ];
+  var Save = createLucideIcon("save", __iconNode54);
+
+  // node_modules/lucide-react/dist/esm/icons/search.js
+  var __iconNode55 = [
     ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
     ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
   ];
-  var Search = createLucideIcon("search", __iconNode54);
+  var Search = createLucideIcon("search", __iconNode55);
 
   // node_modules/lucide-react/dist/esm/icons/settings-2.js
-  var __iconNode55 = [
+  var __iconNode56 = [
     ["path", { d: "M14 17H5", key: "gfn3mx" }],
     ["path", { d: "M19 7h-9", key: "6i9tg" }],
     ["circle", { cx: "17", cy: "17", r: "3", key: "18b49y" }],
     ["circle", { cx: "7", cy: "7", r: "3", key: "dfmy0x" }]
   ];
-  var Settings2 = createLucideIcon("settings-2", __iconNode55);
+  var Settings2 = createLucideIcon("settings-2", __iconNode56);
 
   // node_modules/lucide-react/dist/esm/icons/sliders-vertical.js
-  var __iconNode56 = [
+  var __iconNode57 = [
     ["path", { d: "M10 8h4", key: "1sr2af" }],
     ["path", { d: "M12 21v-9", key: "17s77i" }],
     ["path", { d: "M12 8V3", key: "13r4qs" }],
@@ -36259,10 +36273,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "M5 10V3", key: "cb8scm" }],
     ["path", { d: "M5 21v-7", key: "1w1uti" }]
   ];
-  var SlidersVertical = createLucideIcon("sliders-vertical", __iconNode56);
+  var SlidersVertical = createLucideIcon("sliders-vertical", __iconNode57);
 
   // node_modules/lucide-react/dist/esm/icons/sun.js
-  var __iconNode57 = [
+  var __iconNode58 = [
     ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
     ["path", { d: "M12 2v2", key: "tus03m" }],
     ["path", { d: "M12 20v2", key: "1lh1kg" }],
@@ -36273,34 +36287,34 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
     ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
   ];
-  var Sun = createLucideIcon("sun", __iconNode57);
+  var Sun = createLucideIcon("sun", __iconNode58);
 
   // node_modules/lucide-react/dist/esm/icons/trash-2.js
-  var __iconNode58 = [
+  var __iconNode59 = [
     ["path", { d: "M10 11v6", key: "nco0om" }],
     ["path", { d: "M14 11v6", key: "outv1u" }],
     ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
     ["path", { d: "M3 6h18", key: "d0wm0j" }],
     ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
   ];
-  var Trash2 = createLucideIcon("trash-2", __iconNode58);
+  var Trash2 = createLucideIcon("trash-2", __iconNode59);
 
   // node_modules/lucide-react/dist/esm/icons/trending-down.js
-  var __iconNode59 = [
+  var __iconNode60 = [
     ["path", { d: "M16 17h6v-6", key: "t6n2it" }],
     ["path", { d: "m22 17-8.5-8.5-5 5L2 7", key: "x473p" }]
   ];
-  var TrendingDown = createLucideIcon("trending-down", __iconNode59);
+  var TrendingDown = createLucideIcon("trending-down", __iconNode60);
 
   // node_modules/lucide-react/dist/esm/icons/trending-up.js
-  var __iconNode60 = [
+  var __iconNode61 = [
     ["path", { d: "M16 7h6v6", key: "box55l" }],
     ["path", { d: "m22 7-8.5 8.5-5-5L2 17", key: "1t1m79" }]
   ];
-  var TrendingUp = createLucideIcon("trending-up", __iconNode60);
+  var TrendingUp = createLucideIcon("trending-up", __iconNode61);
 
   // node_modules/lucide-react/dist/esm/icons/triangle-alert.js
-  var __iconNode61 = [
+  var __iconNode62 = [
     [
       "path",
       {
@@ -36311,28 +36325,28 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ["path", { d: "M12 9v4", key: "juzpu7" }],
     ["path", { d: "M12 17h.01", key: "p32p05" }]
   ];
-  var TriangleAlert = createLucideIcon("triangle-alert", __iconNode61);
+  var TriangleAlert = createLucideIcon("triangle-alert", __iconNode62);
 
   // node_modules/lucide-react/dist/esm/icons/underline.js
-  var __iconNode62 = [
+  var __iconNode63 = [
     ["path", { d: "M6 4v6a6 6 0 0 0 12 0V4", key: "9kb039" }],
     ["line", { x1: "4", x2: "20", y1: "20", y2: "20", key: "nun2al" }]
   ];
-  var Underline = createLucideIcon("underline", __iconNode62);
+  var Underline = createLucideIcon("underline", __iconNode63);
 
   // node_modules/lucide-react/dist/esm/icons/undo.js
-  var __iconNode63 = [
+  var __iconNode64 = [
     ["path", { d: "M3 7v6h6", key: "1v2h90" }],
     ["path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13", key: "1r6uu6" }]
   ];
-  var Undo = createLucideIcon("undo", __iconNode63);
+  var Undo = createLucideIcon("undo", __iconNode64);
 
   // node_modules/lucide-react/dist/esm/icons/x.js
-  var __iconNode64 = [
+  var __iconNode65 = [
     ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
     ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
   ];
-  var X = createLucideIcon("x", __iconNode64);
+  var X = createLucideIcon("x", __iconNode65);
 
   // node_modules/clsx/dist/clsx.mjs
   function r(e) {
@@ -46713,6 +46727,45 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       });
     }
   }
+  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 r2 = 20, stroke = 5, circ = 2 * Math.PI * r2;
+      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="${r2}" fill="none" stroke="${color}33" stroke-width="${stroke}"/><circle cx="27" cy="27" r="${r2}" fill="none" stroke="${color}" stroke-width="${stroke}" stroke-dasharray="${dash} ${circ}" stroke-dashoffset="${circ / 4}" stroke-linecap="round"/><circle cx="27" cy="27" r="${r2 - 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],
@@ -46727,6 +46780,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     maxBearing = 180,
     flyTo,
     markers = [],
+    routes = [],
+    cluster = false,
+    clusterVariant = "default",
     height = 480,
     showControls = true,
     showStyleSwitcher = true,
@@ -46737,7 +46793,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const containerRef = React24.useRef(null);
     const mapRef = React24.useRef(null);
     const markersRef = React24.useRef([]);
+    const routeMarkersRef = React24.useRef([]);
     const flyingRef = React24.useRef(false);
+    const [routeLoading, setRouteLoading] = React24.useState(false);
     const [activeStyle, setActiveStyle] = React24.useState(styleProp);
     const [ready, setReady] = React24.useState(false);
     const [showCamera, setShowCamera] = React24.useState(false);
@@ -46825,6 +46883,109 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         if (ftBearing !== void 0) setBearing(clampBearing(ftBearing));
       });
     }, [flyTo]);
+    React24.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 (r2, i) => {
+          const points = [r2.start, ...r2.waypoints ?? [], r2.end];
+          try {
+            const result = await fetchOsrmRoute2(points, r2.routeType ?? "drive");
+            return { route: r2, idx: i, ...result, error: false };
+          } catch {
+            return { route: r2, 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;
@@ -46832,6 +46993,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       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") {
@@ -46863,32 +47026,107 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         setReady(true);
       });
     }
+    const [mapZoom, setMapZoom] = React24.useState(zoom);
+    React24.useEffect(() => {
+      const map = mapRef.current;
+      if (!map) return;
+      const h2 = () => setMapZoom(map.getZoom());
+      map.on("zoomend", h2);
+      return () => {
+        map.off("zoomend", h2);
+      };
+    }, [ready]);
     React24.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: [
@@ -47220,6 +47458,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const [isSearching, setIsSearching] = React27.useState(false);
     const containerRef = React27.useRef(null);
     const triggerRef = React27.useRef(null);
+    const portalRef = React27.useRef(null);
     const [dropStyle, setDropStyle] = React27.useState({});
     const getKey = React27.useCallback((opt) => String(Object.keys(opt)[0]), []);
     const getLabel = React27.useCallback((opt) => Object.values(opt)[0], []);
@@ -47250,9 +47489,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     };
     React27.useEffect(() => {
       const handler = (e) => {
-        if (containerRef.current && !containerRef.current.contains(e.target)) {
-          setIsOpen(false);
-        }
+        const target = e.target;
+        if (containerRef.current?.contains(target) || portalRef.current?.contains(target)) return;
+        setIsOpen(false);
       };
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
@@ -47395,6 +47634,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         isOpen && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "div",
           {
+            ref: portalRef,
             className: "max-h-60 overflow-auto rounded-md border border-white/10 bg-background/80 backdrop-blur-xl text-popover-foreground shadow-lg animate-in fade-in-80",
             style: dropStyle,
             children: [
@@ -48356,67 +48596,386 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
 
   // 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 = __toESM(require_jsx_runtime(), 1);
-  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_react13.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_react13.useState)(() => {
-      try {
-        const stored = localStorage.getItem(storageKey);
-        if (stored) return { ...configDefaults, ...JSON.parse(stored) };
-      } catch {
-      }
-      return configDefaults;
-    });
+    const [savedConfig, setSavedConfig] = (0, import_react13.useState)(
+      () => loadJSON(savedConfigKey, FACTORY_DEFAULTS)
+    );
+    const [settings, setSettings] = (0, import_react13.useState)(
+      () => loadJSON(storageKey, savedConfig)
+    );
     (0, import_react13.useEffect)(() => {
-      localStorage.setItem(storageKey, JSON.stringify(settings));
+      saveJSON(storageKey, settings);
     }, [settings, storageKey]);
     (0, import_react13.useEffect)(() => {
       const root = window.document.documentElement;
@@ -48442,7 +49001,13 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       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 });
   }
@@ -49329,6 +49894,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ] });
   }
 
+  // src/components/ui/PanelSettings.tsx
+  var React41 = __toESM(require_react(), 1);
+
   // src/components/ui/tabs.tsx
   var React40 = __toESM(require_react(), 1);
   var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1);
@@ -49413,30 +49981,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
 
   // src/components/ui/PanelSettings.tsx
   var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1);
-  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: [
@@ -49484,8 +50032,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             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",
@@ -49561,10 +50109,18 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onColorsChange,
     onFontSizeChange,
     onFontFamilyChange,
+    onSave,
     onReset,
     className
   }) {
-    const { resetSettings } = useTheme();
+    const { saveConfig, resetSettings } = useTheme();
+    const [saved, setSaved] = React41.useState(false);
+    const handleSave = () => {
+      saveConfig();
+      onSave?.();
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2e3);
+    };
     const handleReset = () => {
       resetSettings();
       onReset?.();
@@ -49588,10 +50144,16 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     ];
     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)(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)(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)(Save, { className: "h-3.5 w-3.5 mr-1.5" }),
+          saved ? "Saved!" : "Save"
+        ] })
+      ] })
     ] });
   }
 
@@ -49611,7 +50173,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
 
   // src/components/ui/slider.tsx
-  var React41 = __toESM(require_react(), 1);
+  var React42 = __toESM(require_react(), 1);
   var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1);
   function pct(val, min, max) {
     return (val - min) / (max - min) * 100;
@@ -49631,8 +50193,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     showValue = false,
     className
   }) {
-    const [internal, setInternal] = React41.useState(defaultValue);
-    const [hovering, setHovering] = React41.useState(false);
+    const [internal, setInternal] = React42.useState(defaultValue);
+    const [hovering, setHovering] = React42.useState(false);
     const val = controlled ?? internal;
     function handleChange(e) {
       const v = Number(e.target.value);
@@ -49709,8 +50271,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     showValue = false,
     className
   }) {
-    const [internal, setInternal] = React41.useState(defaultValue);
-    const [active, setActive] = React41.useState(null);
+    const [internal, setInternal] = React42.useState(defaultValue);
+    const [active, setActive] = React42.useState(null);
     const val = controlled ?? internal;
     function handleChange(idx, e) {
       const v = Number(e.target.value);
@@ -49733,7 +50295,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         /* @__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)(React41.Fragment, { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(React42.Fragment, { children: [
             showTooltip && active === idx && !disabled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
               "div",
               {
@@ -49843,7 +50405,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
 
   // src/components/ui/stepper.tsx
-  var React42 = __toESM(require_react(), 1);
+  var React43 = __toESM(require_react(), 1);
   var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1);
   function getStatus(idx, current) {
     if (idx < current) return "complete";
@@ -49865,7 +50427,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     clickable = false,
     className
   }) {
-    const [internal, setInternal] = React42.useState(defaultCurrent);
+    const [internal, setInternal] = React43.useState(defaultCurrent);
     const current = controlled ?? internal;
     function go(idx) {
       if (!clickable) return;
@@ -49880,7 +50442,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       ), children: steps.map((step, i) => {
         const status = getStatus(i, current);
         const isLast = i === steps.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(React42.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn(
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(React43.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn(
           "flex",
           isHorizontal ? "flex-col items-center flex-1" : "flex-row gap-4"
         ), children: [
@@ -49924,7 +50486,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
 
   // src/components/ui/table.tsx
-  var React43 = __toESM(require_react(), 1);
+  var React44 = __toESM(require_react(), 1);
   var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1);
   var BADGE_COLORS = {
     active: "bg-success/10 text-success border-success/20",
@@ -49948,11 +50510,11 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     idKey = "id",
     className
   }) {
-    const [search, setSearch] = React43.useState("");
-    const [currentPage, setCurrentPage] = React43.useState(1);
-    const [selectedIds, setSelectedIds] = React43.useState([]);
-    const [sortKey, setSortKey] = React43.useState(null);
-    const [sortDir, setSortDir] = React43.useState(null);
+    const [search, setSearch] = React44.useState("");
+    const [currentPage, setCurrentPage] = React44.useState(1);
+    const [selectedIds, setSelectedIds] = React44.useState([]);
+    const [sortKey, setSortKey] = React44.useState(null);
+    const [sortDir, setSortDir] = React44.useState(null);
     const handleSort = (key) => {
       if (sortKey !== key) {
         setSortKey(key);
@@ -49966,7 +50528,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       setSortKey(null);
       setSortDir(null);
     };
-    const filteredData = React43.useMemo(() => {
+    const filteredData = React44.useMemo(() => {
       let d = search ? data.filter(
         (item) => Object.values(item).some(
           (val) => val && typeof val === "string" && val.toLowerCase().includes(search.toLowerCase())
@@ -49984,18 +50546,18 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     }, [data, search, sortKey, sortDir]);
     const totalPages = Math.max(1, Math.ceil(filteredData.length / itemsPerPage));
     const safePage = Math.min(currentPage, totalPages);
-    const paginatedData = React43.useMemo(() => {
+    const paginatedData = React44.useMemo(() => {
       if (!pagination) return filteredData;
       const start = (safePage - 1) * itemsPerPage;
       return filteredData.slice(start, start + itemsPerPage);
     }, [filteredData, pagination, safePage, itemsPerPage]);
-    React43.useEffect(() => {
+    React44.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 = React43.useMemo(() => {
+    const pagePills = React44.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];
@@ -50224,7 +50786,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
 
   // src/components/ui/tag-input.tsx
-  var React44 = __toESM(require_react(), 1);
+  var React45 = __toESM(require_react(), 1);
   var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1);
   function TagInput({
     value: controlled,
@@ -50236,9 +50798,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     disabled = false,
     className
   }) {
-    const [internal, setInternal] = React44.useState(defaultValue);
-    const [input, setInput] = React44.useState("");
-    const inputRef = React44.useRef(null);
+    const [internal, setInternal] = React45.useState(defaultValue);
+    const [input, setInput] = React45.useState("");
+    const inputRef = React45.useRef(null);
     const tags = controlled ?? internal;
     function addTag(raw) {
       const tag = raw.trim();
@@ -50342,9 +50904,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
 
   // src/components/ui/toggle-switch.tsx
-  var React45 = __toESM(require_react(), 1);
+  var React46 = __toESM(require_react(), 1);
   var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
-  var ToggleSwitch = React45.forwardRef(
+  var ToggleSwitch = React46.forwardRef(
     ({
       className,
       inline = false,
@@ -50362,10 +50924,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       disabled,
       ...props
     }, ref) => {
-      const toggleId = id ?? React45.useId();
+      const toggleId = id ?? React46.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] = React45.useState(defaultChecked ?? false);
+      const [internalChecked, setInternalChecked] = React46.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;
@@ -50435,7 +50997,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   ToggleSwitch.displayName = "ToggleSwitch";
 
   // src/components/ui/tree-view.tsx
-  var React46 = __toESM(require_react(), 1);
+  var React47 = __toESM(require_react(), 1);
   var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
   function TreeNodeItem({ node, depth, selected, expanded, onToggleExpand, onSelect, multiple }) {
     const hasChildren = !!node.children?.length;
@@ -50488,8 +51050,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     className
   }) {
     const init = defaultSelected ? Array.isArray(defaultSelected) ? defaultSelected : [defaultSelected] : [];
-    const [internal, setInternal] = React46.useState(init);
-    const [expanded, setExpanded] = React46.useState(defaultExpanded);
+    const [internal, setInternal] = React47.useState(init);
+    const [expanded, setExpanded] = React47.useState(defaultExpanded);
     const selected = controlled ? Array.isArray(controlled) ? controlled : [controlled] : internal;
     function handleSelect(id) {
       let next;
@@ -50520,7 +51082,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
 
   // src/components/ui/widget.tsx
-  var React47 = __toESM(require_react(), 1);
+  var React48 = __toESM(require_react(), 1);
   var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
   var iconColorMap = {
     primary: "bg-primary/10 text-primary",
@@ -50549,8 +51111,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     outline: "bg-transparent border-2"
   };
   function useCountUp(target, enabled, duration = 1e3) {
-    const [display, setDisplay] = React47.useState(enabled ? 0 : target);
-    React47.useEffect(() => {
+    const [display, setDisplay] = React48.useState(enabled ? 0 : target);
+    React48.useEffect(() => {
       if (!enabled) {
         setDisplay(target);
         return;
@@ -50663,7 +51225,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   }
 
   // src/components/ui/wizard.tsx
-  var React48 = __toESM(require_react(), 1);
+  var React49 = __toESM(require_react(), 1);
   var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
   var SIZE_MAP = {
     sm: "max-w-sm",
@@ -50686,7 +51248,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     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)(React48.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)(React49.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)(
@@ -50914,7 +51476,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     const isFirst = current === 0;
     const isLast = current === steps.length - 1;
     const isSidebar = variant === "sidebar";
-    const [validationError, setValidationError] = React48.useState(null);
+    const [validationError, setValidationError] = React49.useState(null);
     const handleNext = () => {
       const validate = steps[current]?.validate;
       if (validate) {
@@ -51018,7 +51580,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     className,
     contentClassName
   }) {
-    const [internalStep, setInternalStep] = React48.useState(defaultStep);
+    const [internalStep, setInternalStep] = React49.useState(defaultStep);
     const current = controlledStep ?? internalStep;
     const go = (idx) => {
       const clamped = Math.max(0, Math.min(steps.length - 1, idx));
@@ -51033,7 +51595,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       }
       go(current + 1);
     };
-    React48.useEffect(() => {
+    React49.useEffect(() => {
       if (layout !== "modal" || !isOpen || unchange) return;
       const handler = (e) => {
         if (e.key === "Escape") onClose?.();
@@ -51250,6 +51812,7 @@ lucide-react/dist/esm/icons/redo.js:
 lucide-react/dist/esm/icons/rotate-ccw.js:
 lucide-react/dist/esm/icons/rotate-cw.js:
 lucide-react/dist/esm/icons/satellite.js:
+lucide-react/dist/esm/icons/save.js:
 lucide-react/dist/esm/icons/search.js:
 lucide-react/dist/esm/icons/settings-2.js:
 lucide-react/dist/esm/icons/sliders-vertical.js: