neogestify-ui-components 2.0.1 → 2.1.0

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { Button, Form, Input, Loading, Modal, ModalRef, Select, Table, TextArea
 export { AddIcon, AnimateSpin, ArchiveIcon, ArrowIcon, ArrowLeftIcon, ArrowRightIcon, BackIcon, BarsChartsIcon, BoxIcon, BuildingIcon, CajasIcon, CalendarIcon, CamaraIcon, CancelIcon, CashIcon, CategorieIcon, ChartIcon, CheckCircleIcon, CheckIcon, ClockIcon, CloseIcon, CloudIcon, CopyIcon, DeleteIcon, DocumentIcon, EditIcon, FacturacionIcon, FilterIcon, FolderIcon, GearIcon, HomeIcon, IconCursor, IconDownload, IconDuplicate, IconErase, IconGrid, IconHand, IconLayers, IconPlace, IconPolygon, IconRedo, IconReset, IconUndo, IconUpload, IconWall, IconZoomIn, IconZoomOut, InfoIcon, LifeGuardIcon, LightingIcon, LocationIcon, LogoutIcon, MenuIcon, MinusIcon, MoneyIcon, MonitorIcon, MoonIcon, NetworkIcon, NotFoundIcon, PasteIcon, PercentIcon, PrinterIcon, QuestionIcon, RestaurantMenuIcon, SaveIcon, SearchIcon, ShieldIcon, SpinnerIcon, StackIcon, SunIcon, TestIcon, TrashIcon, TruckIcon, UsersIcon, WhatsAppIcon } from './components/icons/index.mjs';
 export { Alerta, AlertaAdvertencia, AlertaConfirmacion, AlertaError, AlertaExito, AlertaInfo, AlertaToast, InfoAlert } from './components/alerts/index.mjs';
 export { Theme, ThemeContext, ThemeContextType, ThemeProvider, ThemeToggle, useTheme } from './context/theme/index.mjs';
-export { AreaShape, DomainConfig, ElementGroup, ElementLibrary, ElementShape, ElementStatus, ElementTypeDef, Floor, FloorArea, MapElement, PaletteGroup, PanZoomState, ToolMode, VenueMap, VenueMapEditor, VenueMapEditorProps, VenueMapViewer, VenueMapViewerProps, Wall, WallMaterial, WallNode, findNearestNode, genId, snapPoint, snapToGrid, usePanZoom } from './components/VenueMapEditor/index.mjs';
+export { AreaShape, DomainConfig, ElementGroup, ElementLibrary, ElementShape, ElementStatus, ElementTypeDef, Floor, FloorArea, MapElement, PaletteGroup, PanZoomState, ToolMode, VenueMap, VenueMapEditor, VenueMapEditorProps, VenueMapViewer, VenueMapViewerProps, Wall, WallMaterial, WallNode, findNearestNode, genId, snapPoint, snapToGrid, useLibraryStorage, usePanZoom } from './components/VenueMapEditor/index.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'sweetalert2';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { Button, Form, Input, Loading, Modal, ModalRef, Select, Table, TextArea
 export { AddIcon, AnimateSpin, ArchiveIcon, ArrowIcon, ArrowLeftIcon, ArrowRightIcon, BackIcon, BarsChartsIcon, BoxIcon, BuildingIcon, CajasIcon, CalendarIcon, CamaraIcon, CancelIcon, CashIcon, CategorieIcon, ChartIcon, CheckCircleIcon, CheckIcon, ClockIcon, CloseIcon, CloudIcon, CopyIcon, DeleteIcon, DocumentIcon, EditIcon, FacturacionIcon, FilterIcon, FolderIcon, GearIcon, HomeIcon, IconCursor, IconDownload, IconDuplicate, IconErase, IconGrid, IconHand, IconLayers, IconPlace, IconPolygon, IconRedo, IconReset, IconUndo, IconUpload, IconWall, IconZoomIn, IconZoomOut, InfoIcon, LifeGuardIcon, LightingIcon, LocationIcon, LogoutIcon, MenuIcon, MinusIcon, MoneyIcon, MonitorIcon, MoonIcon, NetworkIcon, NotFoundIcon, PasteIcon, PercentIcon, PrinterIcon, QuestionIcon, RestaurantMenuIcon, SaveIcon, SearchIcon, ShieldIcon, SpinnerIcon, StackIcon, SunIcon, TestIcon, TrashIcon, TruckIcon, UsersIcon, WhatsAppIcon } from './components/icons/index.js';
 export { Alerta, AlertaAdvertencia, AlertaConfirmacion, AlertaError, AlertaExito, AlertaInfo, AlertaToast, InfoAlert } from './components/alerts/index.js';
 export { Theme, ThemeContext, ThemeContextType, ThemeProvider, ThemeToggle, useTheme } from './context/theme/index.js';
-export { AreaShape, DomainConfig, ElementGroup, ElementLibrary, ElementShape, ElementStatus, ElementTypeDef, Floor, FloorArea, MapElement, PaletteGroup, PanZoomState, ToolMode, VenueMap, VenueMapEditor, VenueMapEditorProps, VenueMapViewer, VenueMapViewerProps, Wall, WallMaterial, WallNode, findNearestNode, genId, snapPoint, snapToGrid, usePanZoom } from './components/VenueMapEditor/index.js';
+export { AreaShape, DomainConfig, ElementGroup, ElementLibrary, ElementShape, ElementStatus, ElementTypeDef, Floor, FloorArea, MapElement, PaletteGroup, PanZoomState, ToolMode, VenueMap, VenueMapEditor, VenueMapEditorProps, VenueMapViewer, VenueMapViewerProps, Wall, WallMaterial, WallNode, findNearestNode, genId, snapPoint, snapToGrid, useLibraryStorage, usePanZoom } from './components/VenueMapEditor/index.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'sweetalert2';

package/dist/index.js

@@ -908,6 +908,33 @@ function ThemeToggle() {
     }
   );
 }
+function useLibraryStorage(storageKey) {
+  const [libs, setLibs] = react.useState(() => {
+    if (!storageKey) return {};
+    try {
+      const raw = localStorage.getItem(storageKey);
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  });
+  const setAndPersist = react.useCallback(
+    (newLibs) => {
+      setLibs(newLibs);
+      if (!storageKey) return;
+      try {
+        if (Object.keys(newLibs).length === 0) {
+          localStorage.removeItem(storageKey);
+        } else {
+          localStorage.setItem(storageKey, JSON.stringify(newLibs));
+        }
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  return [libs, setAndPersist];
+}
 function ToolButton({ active, disabled, title, onClick, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -972,6 +999,19 @@ function Toolbar({
   onLoadLibrary,
   onRemoveLibraryGroup
 }) {
+  const [activeGroupId, setActiveGroupId] = react.useState(
+    () => paletteGroups[0]?.id ?? null
+  );
+  react.useEffect(() => {
+    if (paletteGroups.length === 0) {
+      setActiveGroupId(null);
+      return;
+    }
+    if (!paletteGroups.find((g) => g.id === activeGroupId)) {
+      setActiveGroupId(paletteGroups[0].id);
+    }
+  }, [paletteGroups, activeGroupId]);
+  const activeGroup = paletteGroups.find((g) => g.id === activeGroupId) ?? null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-white border-b border-slate-200 shadow-sm shrink-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 px-2 py-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Seleccionar (V)", active: tool === "SELECT", onClick: () => onToolChange("SELECT"), children: /* @__PURE__ */ jsxRuntime.jsx(IconCursor, { className: "w-4 h-4" }) }),
@@ -1009,21 +1049,34 @@ function Toolbar({
         /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: areaShape === "polygon" ? "Cambiar a rect\xE1ngulo" : "Cambiar a pol\xEDgono", onClick: () => onToggleAreaShape?.(), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: areaShape === "polygon" ? "Poly" : "Rect" }) })
       ] })
     ] }),
-    tool === "PLACE" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-stretch gap-0 border-t border-slate-100 bg-slate-50 overflow-x-auto", children: paletteGroups.map((group, gi) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center shrink-0", children: [
-      gi > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px self-stretch bg-slate-200 mx-1" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 px-1.5 shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400 font-medium whitespace-nowrap select-none", children: group.name }),
-        !group.isBase && onRemoveLibraryGroup && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            title: `Eliminar grupo "${group.name}"`,
-            onClick: () => onRemoveLibraryGroup(group.id),
-            className: "text-slate-300 hover:text-red-400 leading-none text-xs ml-0.5 transition-colors",
-            children: "\xD7"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 px-1 py-1.5", children: group.types.map((typeDef) => /* @__PURE__ */ jsxRuntime.jsx(
+    tool === "PLACE" && paletteGroups.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-t border-slate-100", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-0 overflow-x-auto bg-slate-50 border-b border-slate-200 px-2 pt-1", children: paletteGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => setActiveGroupId(group.id),
+          className: [
+            "flex items-center gap-1 px-3 py-1 text-xs font-medium rounded-t border-x border-t transition-colors whitespace-nowrap",
+            group.id === activeGroupId ? "bg-white border-slate-200 text-slate-800 -mb-px pb-[5px]" : "bg-slate-50 border-transparent text-slate-400 hover:text-slate-600 hover:bg-slate-100"
+          ].join(" "),
+          children: [
+            group.name || "Sin nombre",
+            !group.isBase && onRemoveLibraryGroup && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                role: "button",
+                title: `Eliminar "${group.name}"`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemoveLibraryGroup(group.id);
+                },
+                className: "ml-0.5 text-slate-300 hover:text-red-400 transition-colors leading-none",
+                children: "\xD7"
+              }
+            )
+          ]
+        }
+      ) }, group.id)) }),
+      activeGroup && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 flex-wrap px-2 py-1.5 bg-white min-h-[36px]", children: activeGroup.types.map((typeDef) => /* @__PURE__ */ jsxRuntime.jsx(
         TypeChip,
         {
           typeDef,
@@ -1032,7 +1085,7 @@ function Toolbar({
         },
         typeDef.id
       )) })
-    ] }, group.id)) })
+    ] })
   ] });
 }
 var ZOOM_MIN = 0.1;
@@ -1972,6 +2025,7 @@ function ElementNode({
       {
         d: typeDef.svgPath,
         fill: fillColor,
+        fillRule: typeDef.fillRule ?? "nonzero",
         stroke: isSelected ? "#3b82f6" : typeDef.strokeColor,
         strokeWidth: isSelected ? customPath.strokeWidth * 1.5 : customPath.strokeWidth,
         style: { cursor: bodyCursor },
@@ -2819,7 +2873,23 @@ function createDefaultMap() {
     ]
   };
 }
-var EMPTY_DOMAIN_CONFIG = { id: "__empty__", name: "", elementTypes: [] };
+var DEFAULT_LIBRARY_KEY = "venueMapEditor:libraries";
+function mergeLibraries(existing, incoming) {
+  const result = { ...existing };
+  for (const [groupId, incomingGroup] of Object.entries(incoming)) {
+    if (result[groupId]) {
+      const existingIds = new Set(result[groupId].objects.map((o) => o.id));
+      const newObjects = incomingGroup.objects.filter((o) => !existingIds.has(o.id));
+      result[groupId] = {
+        ...result[groupId],
+        objects: [...result[groupId].objects, ...newObjects]
+      };
+    } else {
+      result[groupId] = incomingGroup;
+    }
+  }
+  return result;
+}
 function updateFloor(map, updatedFloor) {
   return {
     ...map,
@@ -2859,7 +2929,9 @@ function polygonToRect(area) {
   };
 }
 function VenueMapEditor({
-  domainConfig = EMPTY_DOMAIN_CONFIG,
+  domainConfigs,
+  domainConfig,
+  libraryStorageKey = DEFAULT_LIBRARY_KEY,
   initialMap,
   onChange,
   width = "100%",
@@ -2873,7 +2945,13 @@ function VenueMapEditor({
   onElementClick,
   onElementTypeClick
 }) {
+  const effectiveConfigs = react.useMemo(() => {
+    if (domainConfigs && domainConfigs.length > 0) return domainConfigs;
+    if (domainConfig) return [domainConfig];
+    return [];
+  }, [domainConfigs, domainConfig]);
   const initialMapRef = react.useRef(initialMap ?? createDefaultMap());
+  const [persistedLibs, setPersistedLibs] = useLibraryStorage(libraryStorageKey);
   const { map, canUndo, canRedo, push, replace, undo, redo } = useHistory(
     initialMapRef.current
   );
@@ -2889,31 +2967,40 @@ function VenueMapEditor({
   const resetViewRef = react.useRef(() => void 0);
   const importInputRef = react.useRef(null);
   const libraryInputRef = react.useRef(null);
+  const effectiveLibs = react.useMemo(() => ({
+    ...map.libraries ?? {},
+    ...persistedLibs
+  }), [map.libraries, persistedLibs]);
   const buildTypeDefs = react.useCallback(() => {
-    const m = new Map(domainConfig.elementTypes.map((t) => [t.id, t]));
-    const libs = map.libraries ?? {};
-    for (const group of Object.values(libs)) {
+    const m = /* @__PURE__ */ new Map();
+    for (const cfg of effectiveConfigs) {
+      for (const t of cfg.elementTypes) {
+        if (!m.has(t.id)) m.set(t.id, t);
+      }
+    }
+    for (const group of Object.values(effectiveLibs)) {
       for (const t of group.objects) {
         if (!m.has(t.id)) m.set(t.id, t);
       }
     }
     return m;
-  }, [domainConfig, map.libraries]);
+  }, [effectiveConfigs, effectiveLibs]);
   const elementTypeDefs = react.useRef(buildTypeDefs());
   react.useEffect(() => {
     elementTypeDefs.current = buildTypeDefs();
   }, [buildTypeDefs]);
   const paletteGroups = react.useMemo(() => {
     const groups = [];
-    if (domainConfig.elementTypes.length > 0) {
-      groups.push({ id: domainConfig.id, name: domainConfig.name, types: domainConfig.elementTypes, isBase: true });
+    for (const cfg of effectiveConfigs) {
+      if (cfg.elementTypes.length > 0) {
+        groups.push({ id: cfg.id, name: cfg.name, types: cfg.elementTypes, isBase: true });
+      }
     }
-    const libs = map.libraries ?? {};
-    for (const [gid, group] of Object.entries(libs)) {
+    for (const [gid, group] of Object.entries(effectiveLibs)) {
       groups.push({ id: gid, name: group.name, types: group.objects, isBase: false });
     }
     return groups;
-  }, [domainConfig, map.libraries]);
+  }, [effectiveConfigs, effectiveLibs]);
   react.useEffect(() => {
     if (activePlaceTypeId) return;
     const firstType = paletteGroups[0]?.types[0];
@@ -3053,22 +3140,27 @@ function VenueMapEditor({
       reader.onload = (e) => {
         try {
           const parsed = JSON.parse(e.target?.result);
-          const merged = { ...map.libraries ?? {}, ...parsed };
-          push({ ...map, libraries: merged });
+          const mergedPersisted = mergeLibraries(persistedLibs, parsed);
+          setPersistedLibs(mergedPersisted);
+          const mergedMap = mergeLibraries(map.libraries ?? {}, parsed);
+          push({ ...map, libraries: mergedMap });
         } catch {
         }
       };
       reader.readAsText(file);
     },
-    [map, push]
+    [map, push, persistedLibs, setPersistedLibs]
   );
   const handleRemoveLibraryGroup = react.useCallback(
     (groupId) => {
+      const newPersistedLibs = { ...persistedLibs };
+      delete newPersistedLibs[groupId];
+      setPersistedLibs(newPersistedLibs);
       const libs = { ...map.libraries ?? {} };
       delete libs[groupId];
       push({ ...map, libraries: Object.keys(libs).length > 0 ? libs : void 0 });
     },
-    [map, push]
+    [map, push, persistedLibs, setPersistedLibs]
   );
   const DEFAULT_WALL_THICKNESS = 8;
   const handleAddWall = react.useCallback(
@@ -3615,6 +3707,7 @@ exports.findNearestNode = findNearestNode;
 exports.genId = genId;
 exports.snapPoint = snapPoint;
 exports.snapToGrid = snapToGrid;
+exports.useLibraryStorage = useLibraryStorage;
 exports.usePanZoom = usePanZoom;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map