neogestify-ui-components 2.0.1 → 2.2.1

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,
@@ -5,6 +6,7 @@ import {
   IconDownload, IconUpload, IconLayers,
 } from '../../icons';
 import type { ToolMode, ElementTypeDef, AreaShape } from '../types';
+import { parseSvgMarkup } from '../utils/svgParser';
 
 // ─── ToolButton ───────────────────────────────────────────────────────────────
 
@@ -93,10 +95,19 @@ function TypeChip({ typeDef, active, onClick }: TypeChipProps) {
           : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50',
       ].join(' ')}
     >
-      <span
-        className="w-2.5 h-2.5 rounded-sm shrink-0"
-        style={{ background: typeDef.color, border: `1px solid ${typeDef.strokeColor}` }}
-      />
+      {typeDef.shape === 'svg' && typeDef.svgMarkup ? (
+        <svg
+          viewBox={parseSvgMarkup(typeDef.svgMarkup).viewBox}
+          className="w-2.5 h-2.5 shrink-0"
+          style={{ color: typeDef.strokeColor }}
+          dangerouslySetInnerHTML={{ __html: parseSvgMarkup(typeDef.svgMarkup).innerHtml }}
+        />
+      ) : (
+        <span
+          className="w-2.5 h-2.5 rounded-sm shrink-0"
+          style={{ background: typeDef.color, border: `1px solid ${typeDef.strokeColor}` }}
+        />
+      )}
       {typeDef.label}
     </button>
   );
@@ -127,6 +138,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 +236,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,7 +28,10 @@ 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';
 export { snapToGrid, snapPoint, findNearestNode } from './utils/snapUtils';
+export { parseSvgMarkup } from './utils/svgParser';
+export type { ParsedSvgMarkup } from './utils/svgParser';

package/src/components/VenueMapEditor/types.ts

@@ -2,7 +2,7 @@
 
 export type WallMaterial = 'concrete' | 'brick' | 'glass' | 'drywall' | 'wood';
 export type AreaShape = 'rect' | 'polygon';
-export type ElementShape = 'rect' | 'circle' | 'arrow' | 'path';
+export type ElementShape = 'rect' | 'circle' | 'arrow' | 'path' | 'svg';
 export type ToolMode = 'SELECT' | 'WALL' | 'PLACE' | 'PAN' | 'ERASE';
 
 // ─── Wall graph ───────────────────────────────────────────────────────────────
@@ -97,6 +97,23 @@ 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';
+  /**
+   * Complete SVG markup for `shape === 'svg'`.
+   * Must be a valid `<svg>` element with a `viewBox` attribute.
+   * The inner content is extracted and rendered inside the element's bounding box,
+   * automatically scaled from the viewBox to `width × height`.
+   *
+   * @example
+   * svgMarkup: '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-width="5"/><path d="M50 10 L90 90 L10 90 Z"/></svg>'
+   */
+  svgMarkup?: string;
 }
 
 export interface DomainConfig {
@@ -127,10 +144,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

package/src/components/VenueMapEditor/utils/svgParser.ts

@@ -0,0 +1,33 @@
+export interface ParsedSvgMarkup {
+  viewBox: string;
+  innerHtml: string;
+}
+
+const DANGEROUS_TAGS = /\b(script|iframe|object|embed|link|style|meta)\b/gi;
+const DANGEROUS_ATTRS = /\bon\w+\s*=/gi;
+const DANGEROUS_HREF = /\bhref\s*=\s*["']?\s*javascript:/gi;
+const DANGEROUS_XLINK = /\bxlink:href\s*=\s*["']?\s*javascript:/gi;
+
+function sanitize(html: string): string {
+  return html
+    .replace(DANGEROUS_TAGS, '')
+    .replace(DANGEROUS_ATTRS, '')
+    .replace(DANGEROUS_HREF, '')
+    .replace(DANGEROUS_XLINK, '');
+}
+
+const VIEWBOX_RE = /viewBox\s*=\s*"([^"]+)"/i;
+const SVG_OPEN_END_RE = /<svg[^>]*>/i;
+
+export function parseSvgMarkup(markup: string): ParsedSvgMarkup {
+  const viewBoxMatch = markup.match(VIEWBOX_RE);
+  const viewBox = viewBoxMatch?.[1] ?? '0 0 100 100';
+
+  const svgOpenMatch = markup.match(SVG_OPEN_END_RE);
+  const afterOpen = svgOpenMatch ? markup.slice(svgOpenMatch.index! + svgOpenMatch[0].length) : markup;
+
+  const closeIdx = afterOpen.lastIndexOf('</svg>');
+  const inner = closeIdx >= 0 ? afterOpen.slice(0, closeIdx) : afterOpen;
+
+  return { viewBox, innerHtml: sanitize(inner) };
+}

package/src/index.ts

@@ -4,3 +4,4 @@ export * from './components/icons/index';
 export * from './components/alerts/index';
 export * from './context/theme/index';
 export * from './components/VenueMapEditor/index';
+export * from './components/ElementLibraryBuilder/index';