neogestify-ui-components 2.1.0 → 2.2.1

package/dist/components/VenueMapEditor/index.mjs

@@ -91,6 +91,26 @@ function IconUpload({ className }) {
 function IconLayers({ className }) {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .265 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z" }) });
 }
+
+// src/components/VenueMapEditor/utils/svgParser.ts
+var DANGEROUS_TAGS = /\b(script|iframe|object|embed|link|style|meta)\b/gi;
+var DANGEROUS_ATTRS = /\bon\w+\s*=/gi;
+var DANGEROUS_HREF = /\bhref\s*=\s*["']?\s*javascript:/gi;
+var DANGEROUS_XLINK = /\bxlink:href\s*=\s*["']?\s*javascript:/gi;
+function sanitize(html) {
+  return html.replace(DANGEROUS_TAGS, "").replace(DANGEROUS_ATTRS, "").replace(DANGEROUS_HREF, "").replace(DANGEROUS_XLINK, "");
+}
+var VIEWBOX_RE = /viewBox\s*=\s*"([^"]+)"/i;
+var SVG_OPEN_END_RE = /<svg[^>]*>/i;
+function parseSvgMarkup(markup) {
+  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) };
+}
 function ToolButton({ active, disabled, title, onClick, children }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -120,7 +140,15 @@ function TypeChip({ typeDef, active, onClick }) {
         active ? "border-blue-400 bg-blue-50 text-blue-700 font-medium" : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50"
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx(
+        typeDef.shape === "svg" && typeDef.svgMarkup ? /* @__PURE__ */ jsx(
+          "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 }
+          }
+        ) : /* @__PURE__ */ jsx(
           "span",
           {
             className: "w-2.5 h-2.5 rounded-sm shrink-0",
@@ -1189,6 +1217,28 @@ function ElementNode({
         onClick: handleBodyClick
       }
     ) }),
+    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 /* @__PURE__ */ jsx(
+        "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 : void 0,
+          onClick: handleBodyClick,
+          dangerouslySetInnerHTML: { __html: parsed.innerHtml }
+        }
+      );
+    })(),
     (element.label ?? typeDef.label) && /* @__PURE__ */ jsx(
       "text",
       {
@@ -1687,14 +1737,35 @@ function PropertiesPanel({
     /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-slate-100 text-xs font-semibold text-slate-500 uppercase tracking-wide", children: "Propiedades" }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-4 p-3", children: [
       typeDef && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
+        typeDef.shape === "svg" ? /* @__PURE__ */ jsx(
+          "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 "";
+              }
+            })() }
+          }
+        ) : /* @__PURE__ */ jsx(
           "span",
           {
             className: "w-3.5 h-3.5 rounded-sm shrink-0 border",
             style: { background: typeDef.color, borderColor: typeDef.strokeColor }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-700 truncate", children: typeDef.label })
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-700 truncate", children: typeDef.label }),
+        typeDef.shape === "svg" && /* @__PURE__ */ jsx("span", { className: "text-[9px] uppercase tracking-wide text-slate-400 font-medium ml-auto", children: "SVG" })
       ] }),
       /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-0.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-slate-400 uppercase tracking-wide", children: "Etiqueta" }),
@@ -2763,6 +2834,6 @@ function VenueMapViewer({ elementStatus, onElementClick, ...rest }) {
   );
 }
 
-export { VenueMapEditor, VenueMapViewer, findNearestNode, genId, snapPoint, snapToGrid, useLibraryStorage, usePanZoom };
+export { VenueMapEditor, VenueMapViewer, findNearestNode, genId, parseSvgMarkup, snapPoint, snapToGrid, useLibraryStorage, usePanZoom };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map