neogestify-ui-components 2.0.1 → 2.1.0

package/README.md

@@ -380,7 +380,9 @@ function App() {
 |------|------|---------|-------------|
 | `initialMap` | `VenueMap` | mapa vacío | Mapa inicial. Se puede actualizar desde fuera para recargar el editor. |
 | `onChange` | `(map: VenueMap) => void` | — | Se llama en cada cambio del estado interno. |
-| `domainConfig` | `DomainConfig` | vacío | Tipos de elementos predefinidos disponibles en la paleta (opcional). |
+| `domainConfigs` | `DomainConfig[]` | `[]` | Array de catálogos de tipos predefinidos. Cada uno aparece como una pestaña separada en la paleta. |
+| `domainConfig` | `DomainConfig` | — | **Obsoleto** — usa `domainConfigs`. Catálogo único (se convierte internamente a un array de un elemento). |
+| `libraryStorageKey` | `string` | `'venueMapEditor:libraries'` | Clave de `localStorage` donde se persisten las librerías importadas. Pasa `''` para deshabilitar la persistencia. |
 | `width` | `string \| number` | `'100%'` | Ancho del componente. |
 | `height` | `string \| number` | `'600px'` | Alto del componente. |
 | `gridSize` | `number` | `20` | Tamaño de la cuadrícula en unidades de canvas. |
@@ -434,9 +436,60 @@ const estados: ElementStatus[] = [
 
 ---
 
+### Múltiples catálogos de elementos (domainConfigs)
+
+Pasa varios `DomainConfig` vía la prop `domainConfigs`. Cada catálogo aparece como una **pestaña separada** en la paleta — los tipos nunca se mezclan entre tabs.
+
+```tsx
+import { VenueMapEditor } from 'neogestify-ui-components/VenueMapEditor';
+import type { DomainConfig } from 'neogestify-ui-components/VenueMapEditor';
+
+const mobiliario: DomainConfig = {
+  id: 'furniture',
+  name: 'Mobiliario',
+  elementTypes: [
+    { id: 'CHAIR',      label: 'Silla',        shape: 'circle', defaultWidth: 30,  defaultHeight: 30,  color: '#fef3c7', strokeColor: '#d97706' },
+    { id: 'TABLE_RECT', label: 'Mesa rect.',   shape: 'rect',   defaultWidth: 100, defaultHeight: 60,  color: '#fef3c7', strokeColor: '#d97706' },
+  ],
+};
+
+const iluminacion: DomainConfig = {
+  id: 'lighting',
+  name: 'Iluminación',
+  elementTypes: [
+    { id: 'SPOT_LIGHT', label: 'Foco',   shape: 'circle', defaultWidth: 40, defaultHeight: 40, color: '#fef9c3', strokeColor: '#ca8a04' },
+    { id: 'STRIP_LIGHT', label: 'Tira LED', shape: 'rect', defaultWidth: 120, defaultHeight: 15, color: '#fef9c3', strokeColor: '#ca8a04' },
+  ],
+};
+
+<VenueMapEditor domainConfigs={[mobiliario, iluminacion]} />
+```
+
+La paleta mostrará:
+
+```
+[ Mobiliario ]  [ Iluminación ]
+─────────────────────────────
+  [Silla]  [Mesa rect.]
+```
+
+---
+
 ### Crear una librería de elementos (JSON)
 
-Los elementos que aparecen en la paleta del editor se definen en archivos JSON que el usuario carga desde el botón **⊞** (Cargar librería) de la barra de herramientas. Una vez cargada, la librería queda **embebida dentro del propio mapa** y se exporta junto a él — no se pierde al reabrir el archivo.
+Los elementos que aparecen en la paleta también se pueden definir en archivos JSON que el usuario carga desde el botón **⊞** (Cargar librería).
+
+**Persistencia automática:** las librerías importadas se guardan en `localStorage` bajo la clave `libraryStorageKey` (por defecto `'venueMapEditor:libraries'`). Al recargar la página se restauran automáticamente **antes** de que el mapa renderice, evitando errores de "tipo de elemento desconocido".
+
+**Merge inteligente al importar:** si un grupo con el mismo `id` ya existe, se añaden únicamente los elementos cuyo `id` no esté duplicado. Los elementos existentes nunca se sobreescriben.
+
+```tsx
+// Cambiar la clave de almacenamiento (útil con múltiples editores en la misma app)
+<VenueMapEditor libraryStorageKey="mi-proyecto:libs" />
+
+// Deshabilitar persistencia
+<VenueMapEditor libraryStorageKey="" />
+```
 
 #### Formato del JSON
 
@@ -527,17 +580,18 @@ Ahora puedes definir cualquier figura SVG usando un path:
 
 #### Propiedades de cada objeto
 
-| Campo | Tipo | Descripción |
-|-------|------|-------------|
-| `id` | `string` | Identificador único del tipo. Debe ser **único en toda la librería**. Se usa como key en `onElementTypeClick`. |
-| `label` | `string` | Nombre visible en la paleta. |
-| `shape` | `"rect" \| "circle" \| "arrow" \| "path"` | Forma del objeto en el canvas. |
-| `defaultWidth` | `number` | Ancho inicial al colocar el elemento (unidades de canvas ≈ píxeles a zoom 1×). |
-| `defaultHeight` | `number` | Alto inicial. |
-| `color` | `string` | Color de relleno (cualquier valor CSS: `#hex`, `rgb()`, `hsl()`, etc.). |
-| `strokeColor` | `string` | Color del borde. |
-| `svgPath` | `string` | **Requerido si `shape="path"`**. Atributo `d` del path SVG. |
-| `viewBox` | `string` | **Opcional si `shape="path"`**. ViewBox del path (default: `"0 0 100 100"`). |
+| Campo | Tipo | Requerido | Descripción |
+|-------|------|-----------|-------------|
+| `id` | `string` | ✓ | Identificador único del tipo. Se usa como key en `onElementTypeClick`. |
+| `label` | `string` | ✓ | Nombre visible en la paleta y en el canvas. |
+| `shape` | `"rect" \| "circle" \| "arrow" \| "path"` | ✓ | Forma del objeto. |
+| `defaultWidth` | `number` | ✓ | Ancho inicial al colocar el elemento (unidades de canvas ≈ px a zoom 1×). |
+| `defaultHeight` | `number` | ✓ | Alto inicial. |
+| `color` | `string` | ✓ | Color de relleno (cualquier valor CSS: `#hex`, `rgb()`, `hsl()`, etc.). |
+| `strokeColor` | `string` | ✓ | Color del borde. |
+| `svgPath` | `string` | solo para `shape:"path"` | Atributo `d` de un `<path>` SVG. Se escala automáticamente al bounding box del elemento. |
+| `viewBox` | `string` | — | Espacio de coordenadas del `svgPath`. Formato: `"minX minY w h"`. Default: `"0 0 100 100"`. |
+| `fillRule` | `"nonzero" \| "evenodd"` | — | Regla de relleno SVG. Usa `"evenodd"` para crear huecos con sub-paths (engranajes, letras, donuts). Default: `"nonzero"`. |
 
 #### Formas disponibles
 
@@ -546,15 +600,50 @@ Ahora puedes definir cualquier figura SVG usando un path:
 | `rect` | Rectángulo | Mesas, espacios de parqueo, habitaciones |
 | `circle` | Elipse (círculo si `width === height`) | Mesas redondas, columnas, plantas |
 | `arrow` | Flecha apuntando a la derecha | Entradas, salidas, sentidos de circulación |
-| `path` | Forma SVG personalizada | Logos, iconos, estrellas, formas complejas |
+| `path` | Forma SVG personalizada libre | Cualquier figura: estrella, engranaje, piano, logo... |
+
+#### Formas personalizadas con `shape: "path"`
+
+El campo `svgPath` acepta el atributo `d` de cualquier `<path>` SVG estándar. El sistema escala la figura para que ocupe exactamente el bounding box `width × height` del elemento. Puedes diseñar tus formas con Inkscape, Figma u otro editor vectorial y copiar el `d=` directamente.
 
-#### Colisión con el piso
+```json
+{
+  "especiales": {
+    "name": "Especiales",
+    "objects": [
+      {
+        "id": "STAR",
+        "label": "Estrella",
+        "shape": "path",
+        "viewBox": "0 0 100 100",
+        "svgPath": "M50 5 L61 35 L95 35 L68 57 L79 91 L50 70 L21 91 L32 57 L5 35 L39 35 Z",
+        "defaultWidth": 60,
+        "defaultHeight": 60,
+        "color": "#facc15",
+        "strokeColor": "#ca8a04"
+      },
+      {
+        "id": "GEAR",
+        "label": "Engranaje",
+        "shape": "path",
+        "viewBox": "0 0 100 100",
+        "fillRule": "evenodd",
+        "svgPath": "M36.61,17.66 L44.13,5.39 L55.87,5.39 L63.39,17.66 A35,35 0 0,1 77.40,14.30 L85.70,22.60 L82.34,36.61 A35,35 0 0,1 94.61,44.13 L94.61,55.87 L82.34,63.39 A35,35 0 0,1 85.70,77.40 L77.40,85.70 L63.39,82.34 A35,35 0 0,1 55.87,94.61 L44.13,94.61 L36.61,82.34 A35,35 0 0,1 22.60,85.70 L14.30,77.40 L17.66,63.39 A35,35 0 0,1 5.39,55.87 L5.39,44.13 L17.66,36.61 A35,35 0 0,1 14.30,22.60 L22.60,14.30 Z M65,50 A15,15 0 1,0 35,50 A15,15 0 1,0 65,50 Z",
+        "defaultWidth": 70,
+        "defaultHeight": 70,
+        "color": "#94a3b8",
+        "strokeColor": "#334155"
+      }
+    ]
+  }
+}
+```
 
-La detección de colisión con el piso usa un **cuadrado de lado `min(width, height)` centrado en el elemento**, en vez del bounding box completo. Esto evita que formas que no llenan su bounding box (estrellas, iconos, logos) queden excesivamente restringidas al moverse cerca del borde del piso.
+> **Hitbox de piso:** para formas personalizadas que no llenan su bounding box (estrellas, logos, etc.), la detección de bordes usa un cuadrado de lado `min(width, height)` centrado en el elemento — esto evita que la figura quede demasiado restringida al área del piso.
 
 #### Varios grupos en un archivo
 
-Un mismo archivo puede tener tantos grupos como necesites. Cada grupo aparece como una sección separada en la paleta. Se pueden cargar múltiples archivos — los grupos se acumulan. Cada grupo importado muestra un botón **×** para eliminarlo.
+Un mismo archivo puede tener tantos grupos como necesites. Cada grupo aparece como una **pestaña separada** en la paleta. Se pueden cargar múltiples archivos — los grupos se acumulan. Cada grupo importado muestra un botón **×** en su pestaña para eliminarlo.
 
 ```json
 {
@@ -677,9 +766,9 @@ Los elementos y paredes siempre se mantienen dentro del piso al moverlos o coloc
 
 | Botón | Función |
 |-------|---------|
-| ⬇ Exportar mapa | Descarga el estado actual como `.json` (incluye las librerías embebidas). |
+| ⬇ Exportar mapa | Descarga el estado actual como `.json` (incluye las librerías embebidas para portabilidad). |
 | ⬆ Importar mapa | Carga un `.json` exportado previamente, reemplazando el mapa actual. |
-| ⊞ Cargar librería | Carga un `.json` de elementos y añade sus grupos a la paleta sin reemplazar los existentes. |
+| ⊞ Cargar librería | Carga un `.json` de elementos. Los grupos se añaden a la paleta como nuevas pestañas. Si el grupo ya existe, sólo se añaden los objetos con `id` nuevo (sin sobrescribir). La librería se persiste automáticamente en `localStorage`. |
 
 ---
 

package/dist/components/VenueMapEditor/index.d.mts

@@ -82,6 +82,13 @@ 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';
 }
 interface DomainConfig {
     id: string;
@@ -101,10 +108,35 @@ interface ElementStatus {
 }
 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
@@ -145,7 +177,7 @@ interface VenueMapEditorProps {
 }
 type VenueMapViewerProps = VenueMapEditorProps;
 
-declare function VenueMapEditor({ domainConfig, initialMap, onChange, width, height, gridSize, showGrid: showGridProp, snapToGrid: snapEnabled, readOnly, fixed, elementStatus, onElementClick, onElementTypeClick, }: VenueMapEditorProps): react_jsx_runtime.JSX.Element;
+declare function VenueMapEditor({ domainConfigs, domainConfig, libraryStorageKey, initialMap, onChange, width, height, gridSize, showGrid: showGridProp, snapToGrid: snapEnabled, readOnly, fixed, elementStatus, onElementClick, onElementTypeClick, }: VenueMapEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function VenueMapViewer({ elementStatus, onElementClick, ...rest }: VenueMapViewerProps): react_jsx_runtime.JSX.Element;
 
@@ -175,6 +207,19 @@ declare function usePanZoom(initialZoom?: number, leftClickPan?: boolean): {
     resetView: () => void;
 };
 
+/**
+ * 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.
+ */
+declare function useLibraryStorage(storageKey: string | undefined): [ElementLibrary, (libs: ElementLibrary) => void];
+
 /** Generates a globally-unique id using the Web Crypto API. */
 declare const genId: () => string;
 
@@ -199,4 +244,4 @@ declare const findNearestNode: (x: number, y: number, nodes: Array<{
     y: number;
 } | null;
 
-export { type AreaShape, type DomainConfig, type ElementGroup, type ElementLibrary, type ElementShape, type ElementStatus, type ElementTypeDef, type Floor, type FloorArea, type MapElement, type PaletteGroup, type PanZoomState, type ToolMode, type VenueMap, VenueMapEditor, type VenueMapEditorProps, VenueMapViewer, type VenueMapViewerProps, type Wall, type WallMaterial, type WallNode, findNearestNode, genId, snapPoint, snapToGrid, usePanZoom };
+export { type AreaShape, type DomainConfig, type ElementGroup, type ElementLibrary, type ElementShape, type ElementStatus, type ElementTypeDef, type Floor, type FloorArea, type MapElement, type PaletteGroup, type PanZoomState, type ToolMode, type VenueMap, VenueMapEditor, type VenueMapEditorProps, VenueMapViewer, type VenueMapViewerProps, type Wall, type WallMaterial, type WallNode, findNearestNode, genId, snapPoint, snapToGrid, useLibraryStorage, usePanZoom };

package/dist/components/VenueMapEditor/index.d.ts

@@ -82,6 +82,13 @@ 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';
 }
 interface DomainConfig {
     id: string;
@@ -101,10 +108,35 @@ interface ElementStatus {
 }
 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
@@ -145,7 +177,7 @@ interface VenueMapEditorProps {
 }
 type VenueMapViewerProps = VenueMapEditorProps;
 
-declare function VenueMapEditor({ domainConfig, initialMap, onChange, width, height, gridSize, showGrid: showGridProp, snapToGrid: snapEnabled, readOnly, fixed, elementStatus, onElementClick, onElementTypeClick, }: VenueMapEditorProps): react_jsx_runtime.JSX.Element;
+declare function VenueMapEditor({ domainConfigs, domainConfig, libraryStorageKey, initialMap, onChange, width, height, gridSize, showGrid: showGridProp, snapToGrid: snapEnabled, readOnly, fixed, elementStatus, onElementClick, onElementTypeClick, }: VenueMapEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function VenueMapViewer({ elementStatus, onElementClick, ...rest }: VenueMapViewerProps): react_jsx_runtime.JSX.Element;
 
@@ -175,6 +207,19 @@ declare function usePanZoom(initialZoom?: number, leftClickPan?: boolean): {
     resetView: () => void;
 };
 
+/**
+ * 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.
+ */
+declare function useLibraryStorage(storageKey: string | undefined): [ElementLibrary, (libs: ElementLibrary) => void];
+
 /** Generates a globally-unique id using the Web Crypto API. */
 declare const genId: () => string;
 
@@ -199,4 +244,4 @@ declare const findNearestNode: (x: number, y: number, nodes: Array<{
     y: number;
 } | null;
 
-export { type AreaShape, type DomainConfig, type ElementGroup, type ElementLibrary, type ElementShape, type ElementStatus, type ElementTypeDef, type Floor, type FloorArea, type MapElement, type PaletteGroup, type PanZoomState, type ToolMode, type VenueMap, VenueMapEditor, type VenueMapEditorProps, VenueMapViewer, type VenueMapViewerProps, type Wall, type WallMaterial, type WallNode, findNearestNode, genId, snapPoint, snapToGrid, usePanZoom };
+export { type AreaShape, type DomainConfig, type ElementGroup, type ElementLibrary, type ElementShape, type ElementStatus, type ElementTypeDef, type Floor, type FloorArea, type MapElement, type PaletteGroup, type PanZoomState, type ToolMode, type VenueMap, VenueMapEditor, type VenueMapEditorProps, VenueMapViewer, type VenueMapViewerProps, type Wall, type WallMaterial, type WallNode, findNearestNode, genId, snapPoint, snapToGrid, useLibraryStorage, usePanZoom };

package/dist/components/VenueMapEditor/index.js

@@ -4,6 +4,33 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/VenueMapEditor/VenueMapEditor.tsx
+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 IconCursor({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 1l12 5.5-5.5 1.5L7 13.5 2 1z" }) });
 }
@@ -130,6 +157,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" }) }),
@@ -167,21 +207,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,
@@ -190,7 +243,7 @@ function Toolbar({
         },
         typeDef.id
       )) })
-    ] }, group.id)) })
+    ] })
   ] });
 }
 var ZOOM_MIN = 0.1;
@@ -1130,6 +1183,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 },
@@ -1977,7 +2031,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,
@@ -2017,7 +2087,9 @@ function polygonToRect(area) {
   };
 }
 function VenueMapEditor({
-  domainConfig = EMPTY_DOMAIN_CONFIG,
+  domainConfigs,
+  domainConfig,
+  libraryStorageKey = DEFAULT_LIBRARY_KEY,
   initialMap,
   onChange,
   width = "100%",
@@ -2031,7 +2103,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
   );
@@ -2047,31 +2125,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];
@@ -2211,22 +2298,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(
@@ -2679,6 +2771,7 @@ exports.findNearestNode = findNearestNode;
 exports.genId = genId;
 exports.snapPoint = snapPoint;
 exports.snapToGrid = snapToGrid;
+exports.useLibraryStorage = useLibraryStorage;
 exports.usePanZoom = usePanZoom;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map