neogestify-ui-components 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neogestify-ui-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Biblioteca de componentes UI reutilizables con React, Tailwind y SweetAlert, con VenueMapEditor o editor de mapas basico",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/VenueMapEditor/VenueMapEditor.tsx

@@ -13,6 +13,7 @@ import type {
   ElementLibrary,
   DomainConfig,
 } from './types';
+import { useLibraryStorage } from './hooks/useLibraryStorage';
 import { Toolbar } from './components/Toolbar';
 import type { PaletteGroup } from './components/Toolbar';
 import { EditorCanvas } from './components/EditorCanvas';
@@ -98,7 +99,30 @@ function createDefaultMap(): VenueMap {
   };
 }
 
-const EMPTY_DOMAIN_CONFIG: DomainConfig = { id: '__empty__', name: '', elementTypes: [] };
+const DEFAULT_LIBRARY_KEY = 'venueMapEditor:libraries';
+
+/**
+ * Deep-merges `incoming` into `existing`:
+ * - New groups are added as-is.
+ * - Existing groups get their `objects` extended with only the elements
+ *   whose `id` is not already present (existing elements are never overwritten).
+ */
+function mergeLibraries(existing: ElementLibrary, incoming: ElementLibrary): ElementLibrary {
+  const result: ElementLibrary = { ...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: VenueMap, updatedFloor: Floor): VenueMap {
   return {
@@ -144,7 +168,9 @@ function polygonToRect(area: FloorArea): FloorArea {
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export function VenueMapEditor({
-  domainConfig = EMPTY_DOMAIN_CONFIG,
+  domainConfigs,
+  domainConfig,
+  libraryStorageKey = DEFAULT_LIBRARY_KEY,
   initialMap,
   onChange,
   width = '100%',
@@ -158,8 +184,18 @@ export function VenueMapEditor({
   onElementClick,
   onElementTypeClick,
 }: VenueMapEditorProps) {
+  // Normalise: domainConfigs takes precedence; fall back to legacy domainConfig
+  const effectiveConfigs = useMemo<DomainConfig[]>(() => {
+    if (domainConfigs && domainConfigs.length > 0) return domainConfigs;
+    if (domainConfig) return [domainConfig];
+    return [];
+  }, [domainConfigs, domainConfig]);
   const initialMapRef = useRef<VenueMap>(initialMap ?? createDefaultMap());
 
+  // ── Persisted libraries — loaded synchronously from localStorage BEFORE the
+  //    map renders so all element type definitions are available immediately.
+  const [persistedLibs, setPersistedLibs] = useLibraryStorage(libraryStorageKey);
+
   const { map, canUndo, canRedo, push, replace, undo, redo } = useHistory(
     initialMapRef.current,
   );
@@ -178,36 +214,50 @@ export function VenueMapEditor({
   const importInputRef = useRef<HTMLInputElement>(null);
   const libraryInputRef = useRef<HTMLInputElement>(null);
 
-  // ── elementTypeDefs: base config + library types in the map ─────────────
+  // ── Effective library: persistedLibs (localStorage) merged with map.libraries
+  //    Persisted libs take priority so users can override map-embedded types.
+  const effectiveLibs = useMemo<ElementLibrary>(() => ({
+    ...(map.libraries ?? {}),
+    ...persistedLibs,
+  }), [map.libraries, persistedLibs]);
+
+  // ── elementTypeDefs: all domain configs + all libraries ───────────────────
+  //    Priority: domainConfigs first (base wins), then library types.
   const buildTypeDefs = 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 = new Map<string, import('./types').ElementTypeDef>();
+    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); // base config wins on ID collision
+        if (!m.has(t.id)) m.set(t.id, t);
       }
     }
     return m;
-  }, [domainConfig, map.libraries]);
+  }, [effectiveConfigs, effectiveLibs]);
 
   const elementTypeDefs = useRef(buildTypeDefs());
   useEffect(() => {
     elementTypeDefs.current = buildTypeDefs();
   }, [buildTypeDefs]);
 
-  // ── Palette groups: base group + imported library groups ─────────────────
+  // ── Palette groups: all domain configs + all library groups ───────────────
   const paletteGroups = useMemo<PaletteGroup[]>(() => {
     const groups: PaletteGroup[] = [];
-    // Only include the built-in group when it has at least one type
-    if (domainConfig.elementTypes.length > 0) {
-      groups.push({ id: domainConfig.id, name: domainConfig.name, types: domainConfig.elementTypes, isBase: true });
+    // One group per DomainConfig that has at least one type
+    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)) {
+    // One group per library group (persistedLibs take precedence, already merged)
+    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]);
 
   // Auto-select first available element type when nothing is selected
   useEffect(() => {
@@ -383,25 +433,34 @@ export function VenueMapEditor({
       reader.onload = e => {
         try {
           const parsed = JSON.parse(e.target?.result as string) as ElementLibrary;
-          // Merge into map.libraries (imported groups extend, not replace, existing ones)
-          const merged: ElementLibrary = { ...(map.libraries ?? {}), ...parsed };
-          push({ ...map, libraries: merged });
+          // 1. Persist to localStorage — new groups added, existing groups get
+          //    only the new element IDs appended (no overwrites).
+          const mergedPersisted = mergeLibraries(persistedLibs, parsed);
+          setPersistedLibs(mergedPersisted);
+          // 2. Same deep-merge into map.libraries for portability.
+          const mergedMap = mergeLibraries(map.libraries ?? {}, parsed);
+          push({ ...map, libraries: mergedMap });
         } catch {
           // ignore parse errors
         }
       };
       reader.readAsText(file);
     },
-    [map, push],
+    [map, push, persistedLibs, setPersistedLibs],
   );
 
   const handleRemoveLibraryGroup = useCallback(
     (groupId: string) => {
+      // Remove from localStorage
+      const newPersistedLibs = { ...persistedLibs };
+      delete newPersistedLibs[groupId];
+      setPersistedLibs(newPersistedLibs);
+      // Remove from map.libraries too
       const libs = { ...(map.libraries ?? {}) };
       delete libs[groupId];
       push({ ...map, libraries: Object.keys(libs).length > 0 ? libs : undefined });
     },
-    [map, push],
+    [map, push, persistedLibs, setPersistedLibs],
   );
 
   // ── Wall operations ──────────────────────────────────────────────────────

package/src/components/VenueMapEditor/components/ElementNode.tsx

@@ -298,6 +298,7 @@ export function ElementNode({
           <path
             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 }}

package/src/components/VenueMapEditor/components/Toolbar.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
 import {
   IconCursor, IconGrid, IconHand, IconReset, IconZoomIn, IconZoomOut,
@@ -127,6 +128,21 @@ export function Toolbar({
   onLoadLibrary,
   onRemoveLibraryGroup,
 }: ToolbarProps) {
+  // Active palette tab — track by group ID
+  const [activeGroupId, setActiveGroupId] = useState<string | null>(
+    () => paletteGroups[0]?.id ?? null,
+  );
+
+  // When groups change (library imported / removed), make sure active tab is still valid
+  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 (
     <div className="flex flex-col bg-white border-b border-slate-200 shadow-sm shrink-0">
       {/* ── Main row ── */}
@@ -210,43 +226,51 @@ export function Toolbar({
         )}
       </div>
 
-      {/* ── Element palette (only when PLACE is active) ── */}
-      {tool === 'PLACE' && (
-        <div className="flex items-stretch gap-0 border-t border-slate-100 bg-slate-50 overflow-x-auto">
-          {paletteGroups.map((group, gi) => (
-            <div key={group.id} className="flex items-center shrink-0">
-              {/* Group divider (not before the first group) */}
-              {gi > 0 && (
-                <div className="w-px self-stretch bg-slate-200 mx-1" />
-              )}
-              {/* Group label + optional remove button */}
-              <div className="flex items-center gap-0.5 px-1.5 shrink-0">
-                <span className="text-[10px] text-slate-400 font-medium whitespace-nowrap select-none">
-                  {group.name}
-                </span>
-                {!group.isBase && onRemoveLibraryGroup && (
-                  <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"
-                  >
-                    ×
-                  </button>
-                )}
-              </div>
-              {/* Chips */}
-              <div className="flex items-center gap-1 px-1 py-1.5">
-                {group.types.map(typeDef => (
-                  <TypeChip
-                    key={typeDef.id}
-                    typeDef={typeDef}
-                    active={activePlaceTypeId === typeDef.id}
-                    onClick={() => onActivePlaceTypeChange(typeDef.id)}
-                  />
-                ))}
+      {/* ── Element palette (only when PLACE is active and there are groups) ── */}
+      {tool === 'PLACE' && paletteGroups.length > 0 && (
+        <div className="flex flex-col border-t border-slate-100">
+          {/* Tab bar — one tab per group */}
+          <div className="flex items-end gap-0 overflow-x-auto bg-slate-50 border-b border-slate-200 px-2 pt-1">
+            {paletteGroups.map(group => (
+              <div key={group.id} className="flex items-center shrink-0">
+                <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(' ')}
+                >
+                  {group.name || 'Sin nombre'}
+                  {!group.isBase && onRemoveLibraryGroup && (
+                    <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"
+                    >
+                      ×
+                    </span>
+                  )}
+                </button>
               </div>
+            ))}
+          </div>
+
+          {/* Active group chips */}
+          {activeGroup && (
+            <div className="flex items-center gap-1 flex-wrap px-2 py-1.5 bg-white min-h-[36px]">
+              {activeGroup.types.map(typeDef => (
+                <TypeChip
+                  key={typeDef.id}
+                  typeDef={typeDef}
+                  active={activePlaceTypeId === typeDef.id}
+                  onClick={() => onActivePlaceTypeChange(typeDef.id)}
+                />
+              ))}
             </div>
-          ))}
+          )}
         </div>
       )}
     </div>

package/src/components/VenueMapEditor/hooks/useLibraryStorage.ts

@@ -0,0 +1,46 @@
+import { useState, useCallback } from 'react';
+import type { ElementLibrary } from '../types';
+
+/**
+ * Persists an `ElementLibrary` in `localStorage` and exposes it as React state.
+ *
+ * - Initialises **synchronously** from localStorage so type definitions are
+ *   available before the map renders (no flash of unknown element types).
+ * - Gracefully degrades when localStorage is unavailable (SSR, private mode,
+ *   storage quota exceeded) — falls back to plain in-memory state.
+ *
+ * @param storageKey  localStorage key to read/write.
+ *                    Pass `''` or `undefined` to disable persistence entirely.
+ */
+export function useLibraryStorage(
+  storageKey: string | undefined,
+): [ElementLibrary, (libs: ElementLibrary) => void] {
+  const [libs, setLibs] = useState<ElementLibrary>(() => {
+    if (!storageKey) return {};
+    try {
+      const raw = localStorage.getItem(storageKey);
+      return raw ? (JSON.parse(raw) as ElementLibrary) : {};
+    } catch {
+      return {};
+    }
+  });
+
+  const setAndPersist = useCallback(
+    (newLibs: ElementLibrary) => {
+      setLibs(newLibs);
+      if (!storageKey) return;
+      try {
+        if (Object.keys(newLibs).length === 0) {
+          localStorage.removeItem(storageKey);
+        } else {
+          localStorage.setItem(storageKey, JSON.stringify(newLibs));
+        }
+      } catch {
+        // localStorage unavailable — state update still works
+      }
+    },
+    [storageKey],
+  );
+
+  return [libs, setAndPersist];
+}

package/src/components/VenueMapEditor/index.ts

@@ -28,6 +28,7 @@ export type { PaletteGroup } from './components/Toolbar';
 // Hooks (for advanced consumers)
 export { usePanZoom } from './hooks/usePanZoom';
 export type { PanZoomState } from './hooks/usePanZoom';
+export { useLibraryStorage } from './hooks/useLibraryStorage';
 
 // Utils (for advanced consumers)
 export { genId } from './utils/idGen';

package/src/components/VenueMapEditor/types.ts

@@ -97,6 +97,13 @@ export interface ElementTypeDef {
    * Defaults to `"0 0 100 100"` when omitted.
    */
   viewBox?: string;
+  /**
+   * SVG fill rule for `shape === 'path'`.
+   * Use `'evenodd'` when the path contains sub-paths that should appear as holes
+   * (e.g. a gear with a circular cutout, a donut, a letter with counter-forms).
+   * Defaults to `'nonzero'`.
+   */
+  fillRule?: 'nonzero' | 'evenodd';
 }
 
 export interface DomainConfig {
@@ -127,10 +134,35 @@ export interface ElementStatus {
 
 export interface VenueMapEditorProps {
   /**
-   * Optional built-in element type catalog.
-   * If omitted the palette is empty until the user imports a library JSON.
+   * One or more built-in element type catalogs shown as separate palette groups.
+   * Each `DomainConfig` becomes its own named section in the element palette.
+   * Takes precedence over the legacy `domainConfig` singular prop.
+   *
+   * @example
+   * ```tsx
+   * <VenueMapEditor
+   *   domainConfigs={[furnitureConfig, lightingConfig, audioConfig]}
+   * />
+   * ```
+   */
+  domainConfigs?: DomainConfig[];
+  /**
+   * @deprecated Use `domainConfigs` (array) instead.
+   * Single built-in element type catalog. Ignored when `domainConfigs` is provided.
    */
   domainConfig?: DomainConfig;
+  /**
+   * localStorage key used to persist user-imported libraries across sessions.
+   * Libraries are loaded **synchronously** on mount so all type definitions are
+   * available before the map renders — preventing "unknown element type" errors.
+   *
+   * Set to `''` to disable persistence (libraries are lost on page reload).
+   * Defaults to `'venueMapEditor:libraries'`.
+   *
+   * Multiple editor instances on the same page should use different keys if
+   * they manage independent library sets.
+   */
+  libraryStorageKey?: string;
   /**
    * Map to render. When this prop changes (by reference) from outside the
    * component, the editor resets its history to the new map — allowing the