neogestify-ui-components 2.0.1 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neogestify-ui-components",
-  "version": "2.0.1",
+  "version": "2.2.1",
   "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/ElementLibraryBuilder/builder.tsx

@@ -0,0 +1,400 @@
+import React, { useState, useMemo } from 'react';
+import { ElementShape, ElementTypeDef, ElementLibrary } from '../VenueMapEditor/types';
+import { Button, Input, Select, TextArea } from '../html';
+
+type InternalGroup = {
+  internalId: string;
+  name: string;
+  objects: ElementTypeDef[];
+};
+
+const DEFAULT_ELEMENT: ElementTypeDef = {
+  id: '',
+  label: '',
+  shape: 'rect',
+  defaultWidth: 100,
+  defaultHeight: 100,
+  color: '#cccccc',
+  strokeColor: '#000000',
+};
+
+const SHAPE_OPTIONS = [
+  { value: 'rect', label: 'Rectangle' },
+  { value: 'circle', label: 'Circle' },
+  { value: 'arrow', label: 'Arrow' },
+  { value: 'path', label: 'Path' },
+  { value: 'svg', label: 'SVG Markup' },
+];
+
+export const ElementLibraryBuilder: React.FC = () => {
+  const [groups, setGroups] = useState<InternalGroup[]>([
+    { internalId: crypto.randomUUID(), name: 'defaultGroup', objects: [] }
+  ]);
+  const [activeGroupId, setActiveGroupId] = useState<string>(groups[0].internalId);
+  const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
+
+  const [activeElementIndex, setActiveElementIndex] = useState<number | null>(null);
+  const [currentElement, setCurrentElement] = useState<ElementTypeDef>({ ...DEFAULT_ELEMENT, id: 'rect_1', label: 'New Rect' });
+  const [downloadFileName, setDownloadFileName] = useState<string>("libraries");
+
+  // ─── Group management ────────────────────────────────────────────────────────
+
+  const handleAddGroup = () => {
+    const newGroupId = crypto.randomUUID();
+    const newName = `group_${groups.length + 1}`;
+    setGroups([...groups, { internalId: newGroupId, name: newName, objects: [] }]);
+    setActiveGroupId(newGroupId);
+    setActiveElementIndex(null);
+  };
+
+  const handleRemoveGroup = (id: string) => {
+    const newGroups = groups.filter((g) => g.internalId !== id);
+    setGroups(newGroups);
+    if (activeGroupId === id) {
+      if (newGroups.length > 0) {
+        setActiveGroupId(newGroups[0].internalId);
+      } else {
+        setActiveGroupId('');
+      }
+      setActiveElementIndex(null);
+    }
+  };
+
+  const activeGroup = groups.find((g) => g.internalId === activeGroupId);
+
+  // ─── Element management ──────────────────────────────────────────────────────
+
+  const handleSelectGroup = (gId: string) => {
+    setActiveGroupId(gId);
+    setActiveElementIndex(null);
+  }
+
+  const handleAddElement = () => {
+    if (!activeGroup) return;
+
+    const newEl = { ...DEFAULT_ELEMENT, id: `shape_${activeGroup.objects.length + 1}`, label: `Shape ${activeGroup.objects.length + 1}` };
+    const updatedGroups = groups.map((g) => {
+      if (g.internalId === activeGroupId) {
+        return { ...g, objects: [...g.objects, newEl] };
+      }
+      return g;
+    });
+    setGroups(updatedGroups);
+    setActiveElementIndex(activeGroup.objects.length);
+    setCurrentElement(newEl);
+  };
+
+  const handleSelectElement = (idx: number) => {
+    if (!activeGroup) return;
+    setActiveElementIndex(idx);
+    setCurrentElement(activeGroup.objects[idx]);
+  };
+
+  const handleRemoveElement = (idx: number) => {
+    if (!activeGroup) return;
+    const updatedGroups = groups.map((g) => {
+      if (g.internalId === activeGroupId) {
+        const newObjs = [...g.objects];
+        newObjs.splice(idx, 1);
+        return { ...g, objects: newObjs };
+      }
+      return g;
+    });
+    setGroups(updatedGroups);
+    if (activeElementIndex === idx) {
+      setActiveElementIndex(null);
+    } else if (activeElementIndex !== null && activeElementIndex > idx) {
+      setActiveElementIndex(activeElementIndex - 1);
+    }
+  };
+
+  const handleSaveElement = () => {
+    if (!activeGroup || activeElementIndex === null) return;
+    const updatedGroups = groups.map((g) => {
+      if (g.internalId === activeGroupId) {
+        const newObjs = [...g.objects];
+        newObjs[activeElementIndex] = { ...currentElement };
+        return { ...g, objects: newObjs };
+      }
+      return g;
+    });
+    setGroups(updatedGroups);
+  };
+
+  // ─── Helpers ─────────────────────────────────────────────────────────────────
+
+  const handleFieldChange = (field: keyof ElementTypeDef, value: any) => {
+    setCurrentElement((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleSvgMarkupChange = (value: string) => {
+    // No manual sanitization needed — JSON.stringify() will automatically escape
+    // double quotes and special characters when serializing the output object.
+    // Modifying the string here (e.g. collapsing whitespace or replacing quotes)
+    // would corrupt the SVG structure (paths, attributes, colors, etc.).
+    handleFieldChange('svgMarkup', value);
+  };
+
+  const generatedLib = useMemo(() => {
+    const lib: ElementLibrary = {};
+    groups.forEach((g) => {
+      lib[g.name] = {
+        name: g.name,
+        objects: g.objects,
+      };
+    });
+    return JSON.stringify(lib, null, 2);
+  }, [groups]);
+
+  const handleDownload = () => {
+    const blob = new Blob([generatedLib], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${downloadFileName}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  // ─── Render ──────────────────────────────────────────────────────────────────
+
+  return (
+    <div className="flex gap-4 p-4 h-full min-h-[600px] text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900">
+      {/* Sidebar columns for Groups and Elements */}
+      <div className="w-1/4 flex flex-col gap-4 border-r dark:border-gray-700 pr-4">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <h3 className="font-bold">Libraries (Groups)</h3>
+            <Button variant='primary' onClick={handleAddGroup}>+ Group</Button>
+          </div>
+          <div className="flex flex-col gap-1 max-h-48 overflow-y-auto pr-1">
+            {groups.map((group) => (
+              <div
+                key={group.internalId}
+                className={`flex items-center justify-between p-2 rounded cursor-pointer ${activeGroupId === group.internalId ? 'bg-indigo-100 text-indigo-900 dark:bg-indigo-900/50 dark:text-indigo-100 font-semibold' : 'hover:bg-gray-100 dark:hover:bg-gray-800'}`}
+                onClick={() => handleSelectGroup(group.internalId)}
+              >
+                {editingGroupId === group.internalId ? (
+                  <Input
+                    autoFocus
+                    value={group.name}
+                    onChange={(e) => {
+                      setGroups(groups.map(g => g.internalId === group.internalId ? { ...g, name: e.target.value } : g));
+                    }}
+                    onBlur={() => setEditingGroupId(null)}
+                    onKeyDown={(e) => e.key === 'Enter' && setEditingGroupId(null)}
+                  />
+                ) : (
+                  <span onDoubleClick={() => setEditingGroupId(group.internalId)}>{group.name}</span>
+                )}
+
+                {groups.length > 1 && (
+                  <button onClick={(e) => { e.stopPropagation(); handleRemoveGroup(group.internalId); }} className="text-red-500 text-xs">x</button>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <hr className="dark:border-gray-700" />
+
+        <div className="flex flex-col gap-2 flex-grow overflow-hidden">
+          <div className="flex items-center justify-between">
+            <h3 className="font-bold">Elements in {activeGroup?.name || '?'}</h3>
+            <Button variant='secondary' onClick={handleAddElement} disabled={!activeGroup}>+ Element</Button>
+          </div>
+          <div className="flex flex-col gap-1 overflow-y-auto flex-grow pr-1">
+            {activeGroup?.objects.map((el, i) => (
+              <div
+                key={i}
+                className={`flex items-center justify-between p-2 rounded cursor-pointer ${activeElementIndex === i ? 'bg-indigo-100 text-indigo-900 dark:bg-indigo-900/50 dark:text-indigo-100 font-semibold' : 'hover:bg-gray-100 dark:hover:bg-gray-800'}`}
+                onClick={() => handleSelectElement(i)}
+              >
+                <span>{el.id} ({el.shape})</span>
+                <button onClick={(e) => { e.stopPropagation(); handleRemoveElement(i); }} className="text-red-500 text-xs">x</button>
+              </div>
+            ))}
+            {(!activeGroup || activeGroup.objects.length === 0) && (
+              <span className="text-gray-400 dark:text-gray-500 italic text-xs">No elements yet</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Editor Section */}
+      <div className="flex-1 flex flex-col gap-4 px-2 overflow-y-auto">
+        <h3 className="font-bold text-lg">Element Editor</h3>
+        {activeElementIndex !== null ? (
+          <div className="flex flex-col gap-4 w-full max-w-2xl">
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                label="Element ID (unique)"
+                value={currentElement.id}
+                onChange={(e) => handleFieldChange('id', e.target.value)}
+              />
+              <Input
+                label="Label (display name)"
+                value={currentElement.label}
+                onChange={(e) => handleFieldChange('label', e.target.value)}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Select
+                label="Shape"
+                options={SHAPE_OPTIONS}
+                value={currentElement.shape}
+                onChange={(e) => handleFieldChange('shape', e.target.value as ElementShape)}
+              />
+              <Input
+                label="Icon (emoji or class)"
+                value={currentElement.icon || ''}
+                onChange={(e) => handleFieldChange('icon', e.target.value)}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <Input
+                type="number"
+                label="Default Width"
+                value={currentElement.defaultWidth}
+                onChange={(e) => handleFieldChange('defaultWidth', parseFloat(e.target.value) || 0)}
+              />
+              <Input
+                type="number"
+                label="Default Height"
+                value={currentElement.defaultHeight}
+                onChange={(e) => handleFieldChange('defaultHeight', parseFloat(e.target.value) || 0)}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="flex flex-col gap-1">
+                <label className="text-xs font-semibold text-gray-700">Fill Color</label>
+                <div className="flex gap-2">
+                  <input
+                    type="color"
+                    className="w-8 h-8 cursor-pointer rounded"
+                    value={currentElement.color}
+                    onChange={(e) => handleFieldChange('color', e.target.value)}
+                  />
+                  <Input
+                    value={currentElement.color}
+                    onChange={(e) => handleFieldChange('color', e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="flex flex-col gap-1">
+                <label className="text-xs font-semibold text-gray-700">Stroke Color</label>
+                <div className="flex gap-2">
+                  <input
+                    type="color"
+                    className="w-8 h-8 cursor-pointer rounded"
+                    value={currentElement.strokeColor}
+                    onChange={(e) => handleFieldChange('strokeColor', e.target.value)}
+                  />
+                  <Input
+                    value={currentElement.strokeColor}
+                    onChange={(e) => handleFieldChange('strokeColor', e.target.value)}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {currentElement.shape === 'path' && (
+              <div className="flex flex-col gap-4 border dark:border-gray-700 p-4 rounded bg-gray-50 dark:bg-gray-800/50">
+                <h4 className="font-semibold text-sm">Path Config</h4>
+                <div className="grid grid-cols-2 gap-4">
+                  <Input
+                    label="ViewBox"
+                    placeholder="0 0 100 100"
+                    value={currentElement.viewBox || ''}
+                    onChange={(e) => handleFieldChange('viewBox', e.target.value)}
+                  />
+                  <Select
+                    label="Fill Rule"
+                    options={[
+                      { value: 'nonzero', label: 'nonzero' },
+                      { value: 'evenodd', label: 'evenodd' }
+                    ]}
+                    value={currentElement.fillRule || 'nonzero'}
+                    onChange={(e) => handleFieldChange('fillRule', e.target.value)}
+                  />
+                </div>
+                <TextArea
+                  label="SVG Path (d attribute)"
+                  placeholder="M10 10 H 90 V 90 H 10 Z"
+                  value={currentElement.svgPath || ''}
+                  onChange={(e) => handleFieldChange('svgPath', e.target.value)}
+                  rows={4}
+                />
+              </div>
+            )}
+
+            {currentElement.shape === 'svg' && (
+              <div className="flex flex-col gap-4 border dark:border-amber-700/50 p-4 rounded bg-amber-50 dark:bg-amber-900/10">
+                <h4 className="font-semibold text-sm">SVG Markup (Autosanitized)</h4>
+                <p className="text-xs text-amber-800 dark:text-amber-400">
+                  Paste your raw SVG here. Double quotes will be converted to single quotes automatically to safely embed the string in JSON.
+                </p>
+                <TextArea
+                  label="raw <svg>...</svg>"
+                  value={currentElement.svgMarkup || ''}
+                  onChange={(e) => handleSvgMarkupChange(e.target.value)}
+                  rows={6}
+                  placeholder={"<svg viewBox='0 0 100 100'><circle cx='50' cy='50' r='50'/></svg>"}
+                />
+              </div>
+            )}
+
+            <div className="flex justify-end gap-2 mt-4 pt-4 border-t dark:border-gray-700">
+              <Button onClick={handleSaveElement}>Save Changes to Element</Button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex items-center justify-center h-full text-gray-400">
+            Select an element to edit or add a new one.
+          </div>
+        )}
+      </div>
+
+      {/* output section */}
+      <div className="w-1/3 flex flex-col gap-2 border-l dark:border-gray-700 pl-4 h-full max-h-full">
+        <div className="flex items-center justify-between shrink-0">
+          <h3 className="font-bold">Output JSON</h3>
+          <div className="flex items-center gap-2">
+            <Input
+              value={downloadFileName}
+              onChange={(e) => setDownloadFileName(e.target.value)}
+              placeholder="filename"
+              title="Filename without extension"
+            />
+            <span className="text-xs text-gray-500">.json</span>
+            <Button
+              variant="secondary"
+              onClick={handleDownload}
+              title="Download JSON file"
+            >
+              Descargar
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() => navigator.clipboard.writeText(generatedLib)}
+            >
+              Copy
+            </Button>
+          </div>
+        </div>
+        <div className="flex-1 overflow-hidden h-full pb-4">
+          <TextArea
+            readOnly
+            className="h-full resize-none font-mono text-xs text-green-600 dark:text-green-400 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-800"
+            value={generatedLib}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/ElementLibraryBuilder/index.ts

@@ -0,0 +1 @@
+export * from './builder';

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

@@ -4,6 +4,7 @@ import type { MapElement, ElementTypeDef, ToolMode } from '../types';
 import type { PanZoomState } from '../hooks/usePanZoom';
 import { useDrag } from '../hooks/useDrag';
 import { snapToGrid } from '../utils/snapUtils';
+import { parseSvgMarkup } from '../utils/svgParser';
 
 // ─── Arrow shape ──────────────────────────────────────────────────────────────
 
@@ -298,6 +299,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 }}
@@ -306,6 +308,27 @@ export function ElementNode({
           />
         </g>
       )}
+      {typeDef.shape === 'svg' && typeDef.svgMarkup && (() => {
+        const parsed = parseSvgMarkup(typeDef.svgMarkup);
+        const parts = parsed.viewBox.split(/[\s,]+/).map(Number);
+        const vw = parts[2] ?? 100;
+        const vh = parts[3] ?? 100;
+        const sx = vw > 0 ? w / vw : 1;
+        const sy = vh > 0 ? h / vh : 1;
+        const avgScale = Math.sqrt(Math.abs(sx * sy)) || 1;
+        return (
+          <g
+            transform={`translate(${x}, ${y}) scale(${sx}, ${sy})`}
+            fill={fillColor}
+            stroke={isSelected ? '#3b82f6' : typeDef.strokeColor}
+            strokeWidth={isSelected ? (sw / avgScale) * 1.5 : sw / avgScale}
+            style={{ cursor: bodyCursor }}
+            onMouseDown={tool === 'SELECT' && !onViewerClick ? handleBodyDown : undefined}
+            onClick={handleBodyClick}
+            dangerouslySetInnerHTML={{ __html: parsed.innerHtml }}
+          />
+        );
+      })()}
 
       {/* ── Label ── */}
       {(element.label ?? typeDef.label) && (

package/src/components/VenueMapEditor/components/PropertiesPanel.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import type { ChangeEvent } from 'react';
 import type { MapElement, ElementTypeDef } from '../types';
+import { parseSvgMarkup } from '../utils/svgParser';
 
 interface PropertiesPanelProps {
   elements: MapElement[];
@@ -112,11 +113,23 @@ export function PropertiesPanel({
         {/* Type badge */}
         {typeDef && (
           <div className="flex items-center gap-2">
-            <span
-              className="w-3.5 h-3.5 rounded-sm shrink-0 border"
-              style={{ background: typeDef.color, borderColor: typeDef.strokeColor }}
-            />
+            {typeDef.shape === 'svg' ? (
+              <svg
+                viewBox={(() => { try { return typeDef.svgMarkup ? parseSvgMarkup(typeDef.svgMarkup).viewBox : '0 0 100 100'; } catch { return '0 0 100 100'; } })()}
+                className="w-3.5 h-3.5 shrink-0 border border-slate-300 rounded-sm"
+                style={{ color: typeDef.strokeColor }}
+                dangerouslySetInnerHTML={{ __html: (() => { try { return typeDef.svgMarkup ? parseSvgMarkup(typeDef.svgMarkup).innerHtml : ''; } catch { return ''; } })() }}
+              />
+            ) : (
+              <span
+                className="w-3.5 h-3.5 rounded-sm shrink-0 border"
+                style={{ background: typeDef.color, borderColor: typeDef.strokeColor }}
+              />
+            )}
             <span className="text-xs font-medium text-slate-700 truncate">{typeDef.label}</span>
+            {typeDef.shape === 'svg' && (
+              <span className="text-[9px] uppercase tracking-wide text-slate-400 font-medium ml-auto">SVG</span>
+            )}
           </div>
         )}