neogestify-ui-components 2.1.0 → 2.2.2

package/dist/index.mjs

@@ -647,24 +647,147 @@ var Select = ({
     helperText && /* @__PURE__ */ jsx("p", { className: `text-sm ${error ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"}`, children: helperText })
   ] });
 };
+function isColumnDef(col) {
+  return typeof col === "object" && col !== null && "header" in col;
+}
+function resolveColumn(col) {
+  if (isColumnDef(col)) return col;
+  return { header: col };
+}
+var ALIGN_CLASS = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var SIZE_TH = {
+  sm: "px-2 py-1.5 text-xs",
+  md: "px-3 py-2.5 text-xs",
+  lg: "px-4 py-3.5 text-sm"
+};
+var SIZE_TD = {
+  sm: "px-2 py-1.5 text-xs",
+  md: "px-3 py-2.5 text-sm",
+  lg: "px-4 py-3.5 text-sm"
+};
+var VARIANT_TABLE = {
+  default: "w-full min-w-full table-auto",
+  striped: "w-full min-w-full table-auto",
+  bordered: "w-full min-w-full table-auto border border-gray-300 dark:border-gray-600",
+  minimal: "w-full min-w-full table-auto",
+  custom: "w-full min-w-full table-auto"
+};
+var VARIANT_THEAD = {
+  default: "bg-gray-100 dark:bg-gray-700",
+  striped: "bg-gray-100 dark:bg-gray-700",
+  bordered: "bg-gray-100 dark:bg-gray-700",
+  minimal: "",
+  custom: ""
+};
+var VARIANT_TH = {
+  default: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300",
+  striped: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300",
+  bordered: "font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600",
+  minimal: "font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700",
+  custom: ""
+};
+var VARIANT_TR = {
+  default: () => "bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors",
+  striped: (i) => `${i % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700/40"} hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors`,
+  bordered: () => "bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors",
+  minimal: () => "hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors",
+  custom: () => ""
+};
+var VARIANT_TD = {
+  default: "text-gray-700 dark:text-gray-300",
+  striped: "text-gray-700 dark:text-gray-300",
+  bordered: "text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700",
+  minimal: "text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-800",
+  custom: ""
+};
+var VARIANT_TBODY_DIVIDER = {
+  default: "divide-y divide-gray-200 dark:divide-gray-700",
+  striped: "",
+  bordered: "",
+  minimal: "",
+  custom: ""
+};
 function Table({
-  headers,
+  columns,
   rows,
   variant = "default",
+  size = "md",
   className = "",
+  tableClassName = "",
   thClassName = "",
-  tdClassName = ""
+  tdClassName = "",
+  trClassName,
+  emptyState,
+  onRowClick,
+  hideHeader = false,
+  style
 }) {
-  const baseTableClass = variant === "default" ? "w-full table-auto border-collapse border border-gray-300 dark:border-gray-600 min-w-full" : "";
-  const baseThClass = variant === "default" ? "border border-gray-300 dark:border-gray-600 px-4 py-2 text-left text-gray-900 dark:text-white" : "";
-  const baseTdClass = variant === "default" ? "border border-gray-300 dark:border-gray-600 px-4 py-2 text-gray-900 dark:text-white" : "";
-  const tableClass = `${baseTableClass} ${className}`.trim();
-  const thClass = `${baseThClass} ${thClassName}`.trim();
-  const tdClass = `${baseTdClass} ${tdClassName}`.trim();
-  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto w-full", children: /* @__PURE__ */ jsxs("table", { className: tableClass, children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: variant === "default" ? "bg-gray-100 dark:bg-gray-700" : "", children: headers.map((header, index) => /* @__PURE__ */ jsx("th", { className: thClass, children: header }, index)) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: variant === "default" ? "hover:bg-gray-50 dark:hover:bg-gray-600" : "", children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { className: tdClass, children: cell }, cellIndex)) }, rowIndex)) })
-  ] }) });
+  const cols = columns.map(resolveColumn);
+  const resolvedTrClass = (i) => {
+    const variantCls = VARIANT_TR[variant](i);
+    const clickCls = onRowClick ? "cursor-pointer" : "";
+    const customCls = typeof trClassName === "function" ? trClassName(i) : trClassName ?? "";
+    return `${variantCls} ${clickCls} ${customCls}`.trim();
+  };
+  return /* @__PURE__ */ jsx("div", { className: `overflow-x-auto w-full ${className}`.trim(), children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: `${VARIANT_TABLE[variant]} ${tableClassName}`.trim(),
+      style,
+      children: [
+        !hideHeader && /* @__PURE__ */ jsx("thead", { className: VARIANT_THEAD[variant], children: /* @__PURE__ */ jsx("tr", { children: cols.map((col, i) => /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: [
+              SIZE_TH[size],
+              VARIANT_TH[variant],
+              ALIGN_CLASS[col.align ?? "left"],
+              col.className ?? "",
+              thClassName
+            ].filter(Boolean).join(" "),
+            children: col.header
+          },
+          i
+        )) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: VARIANT_TBODY_DIVIDER[variant], children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          "td",
+          {
+            colSpan: cols.length,
+            className: `${SIZE_TD[size]} text-center text-gray-400 dark:text-gray-500 py-8`,
+            children: emptyState ?? "Sin datos"
+          }
+        ) }) : rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+          "tr",
+          {
+            className: resolvedTrClass(rowIndex),
+            onClick: onRowClick ? () => onRowClick(rowIndex) : void 0,
+            children: row.map((cell, cellIndex) => {
+              const col = cols[cellIndex];
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: [
+                    SIZE_TD[size],
+                    VARIANT_TD[variant],
+                    ALIGN_CLASS[col?.align ?? "left"],
+                    col?.className ?? "",
+                    tdClassName
+                  ].filter(Boolean).join(" "),
+                  children: cell
+                },
+                cellIndex
+              );
+            })
+          },
+          rowIndex
+        )) })
+      ]
+    }
+  ) });
 }
 var Modal = forwardRef(({
   onClose,
@@ -929,6 +1052,26 @@ function useLibraryStorage(storageKey) {
   );
   return [libs, setAndPersist];
 }
+
+// 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",
@@ -958,7 +1101,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",
@@ -2027,6 +2178,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",
       {
@@ -2525,14 +2698,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" }),
@@ -3600,7 +3794,399 @@ function VenueMapViewer({ elementStatus, onElementClick, ...rest }) {
     }
   );
 }
+var DEFAULT_ELEMENT = {
+  id: "",
+  label: "",
+  shape: "rect",
+  defaultWidth: 100,
+  defaultHeight: 100,
+  color: "#cccccc",
+  strokeColor: "#000000"
+};
+var SHAPE_OPTIONS = [
+  { value: "rect", label: "Rectangle" },
+  { value: "circle", label: "Circle" },
+  { value: "arrow", label: "Arrow" },
+  { value: "path", label: "Path" },
+  { value: "svg", label: "SVG Markup" }
+];
+var ElementLibraryBuilder = () => {
+  const [groups, setGroups] = useState([
+    { internalId: crypto.randomUUID(), name: "defaultGroup", objects: [] }
+  ]);
+  const [activeGroupId, setActiveGroupId] = useState(groups[0].internalId);
+  const [editingGroupId, setEditingGroupId] = useState(null);
+  const [activeElementIndex, setActiveElementIndex] = useState(null);
+  const [currentElement, setCurrentElement] = useState({ ...DEFAULT_ELEMENT, id: "rect_1", label: "New Rect" });
+  const [downloadFileName, setDownloadFileName] = useState("libraries");
+  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) => {
+    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);
+  const handleSelectGroup = (gId) => {
+    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) => {
+    if (!activeGroup) return;
+    setActiveElementIndex(idx);
+    setCurrentElement(activeGroup.objects[idx]);
+  };
+  const handleRemoveElement = (idx) => {
+    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);
+  };
+  const handleFieldChange = (field, value) => {
+    setCurrentElement((prev) => ({ ...prev, [field]: value }));
+  };
+  const handleSvgMarkupChange = (value) => {
+    handleFieldChange("svgMarkup", value);
+  };
+  const generatedLib = useMemo(() => {
+    const lib = {};
+    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);
+  };
+  return /* @__PURE__ */ jsxs("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", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-1/4 flex flex-col gap-4 border-r dark:border-gray-700 pr-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-bold", children: "Libraries (Groups)" }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleAddGroup, children: "+ Group" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 max-h-48 overflow-y-auto pr-1", children: groups.map((group) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            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),
+            children: [
+              editingGroupId === group.internalId ? /* @__PURE__ */ jsx(
+                Input,
+                {
+                  autoFocus: true,
+                  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)
+                }
+              ) : /* @__PURE__ */ jsx("span", { onDoubleClick: () => setEditingGroupId(group.internalId), children: group.name }),
+              groups.length > 1 && /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveGroup(group.internalId);
+              }, className: "text-red-500 text-xs", children: "x" })
+            ]
+          },
+          group.internalId
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("hr", { className: "dark:border-gray-700" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 flex-grow overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "font-bold", children: [
+            "Elements in ",
+            activeGroup?.name || "?"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleAddElement, disabled: !activeGroup, children: "+ Element" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 overflow-y-auto flex-grow pr-1", children: [
+          activeGroup?.objects.map((el, i) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              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),
+              children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  el.id,
+                  " (",
+                  el.shape,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                  e.stopPropagation();
+                  handleRemoveElement(i);
+                }, className: "text-red-500 text-xs", children: "x" })
+              ]
+            },
+            i
+          )),
+          (!activeGroup || activeGroup.objects.length === 0) && /* @__PURE__ */ jsx("span", { className: "text-gray-400 dark:text-gray-500 italic text-xs", children: "No elements yet" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-4 px-2 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-bold text-lg", children: "Element Editor" }),
+      activeElementIndex !== null ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 w-full max-w-2xl", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: "Element ID (unique)",
+              value: currentElement.id,
+              onChange: (e) => handleFieldChange("id", e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: "Label (display name)",
+              value: currentElement.label,
+              onChange: (e) => handleFieldChange("label", e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Shape",
+              options: SHAPE_OPTIONS,
+              value: currentElement.shape,
+              onChange: (e) => handleFieldChange("shape", e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              label: "Icon (emoji or class)",
+              value: currentElement.icon || "",
+              onChange: (e) => handleFieldChange("icon", e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              label: "Default Width",
+              value: currentElement.defaultWidth,
+              onChange: (e) => handleFieldChange("defaultWidth", parseFloat(e.target.value) || 0)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "number",
+              label: "Default Height",
+              value: currentElement.defaultHeight,
+              onChange: (e) => handleFieldChange("defaultHeight", parseFloat(e.target.value) || 0)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-gray-700", children: "Fill Color" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  className: "w-8 h-8 cursor-pointer rounded",
+                  value: currentElement.color,
+                  onChange: (e) => handleFieldChange("color", e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: currentElement.color,
+                  onChange: (e) => handleFieldChange("color", e.target.value)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-gray-700", children: "Stroke Color" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  className: "w-8 h-8 cursor-pointer rounded",
+                  value: currentElement.strokeColor,
+                  onChange: (e) => handleFieldChange("strokeColor", e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: currentElement.strokeColor,
+                  onChange: (e) => handleFieldChange("strokeColor", e.target.value)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        currentElement.shape === "path" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 border dark:border-gray-700 p-4 rounded bg-gray-50 dark:bg-gray-800/50", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: "Path Config" }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                label: "ViewBox",
+                placeholder: "0 0 100 100",
+                value: currentElement.viewBox || "",
+                onChange: (e) => handleFieldChange("viewBox", e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                label: "Fill Rule",
+                options: [
+                  { value: "nonzero", label: "nonzero" },
+                  { value: "evenodd", label: "evenodd" }
+                ],
+                value: currentElement.fillRule || "nonzero",
+                onChange: (e) => handleFieldChange("fillRule", e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            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
+            }
+          )
+        ] }),
+        currentElement.shape === "svg" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 border dark:border-amber-700/50 p-4 rounded bg-amber-50 dark:bg-amber-900/10", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: "SVG Markup (Autosanitized)" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-800 dark:text-amber-400", children: "Paste your raw SVG here. Double quotes will be converted to single quotes automatically to safely embed the string in JSON." }),
+          /* @__PURE__ */ jsx(
+            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>"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t dark:border-gray-700", children: /* @__PURE__ */ jsx(Button, { onClick: handleSaveElement, children: "Save Changes to Element" }) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-gray-400", children: "Select an element to edit or add a new one." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "w-1/3 flex flex-col gap-2 border-l dark:border-gray-700 pl-4 h-full max-h-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between shrink-0", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-bold", children: "Output JSON" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: downloadFileName,
+              onChange: (e) => setDownloadFileName(e.target.value),
+              placeholder: "filename",
+              title: "Filename without extension"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: ".json" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: handleDownload,
+              title: "Download JSON file",
+              children: "Descargar"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => navigator.clipboard.writeText(generatedLib),
+              children: "Copy"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden h-full pb-4", children: /* @__PURE__ */ jsx(
+        TextArea,
+        {
+          readOnly: true,
+          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
+        }
+      ) })
+    ] })
+  ] });
+};
 
-export { AddIcon, Alerta, AlertaAdvertencia, AlertaConfirmacion, AlertaError, AlertaExito, AlertaInfo, AlertaToast, AnimateSpin, ArchiveIcon, ArrowIcon, ArrowLeftIcon, ArrowRightIcon, BackIcon, BarsChartsIcon, BoxIcon, BuildingIcon, Button, CajasIcon, CalendarIcon, CamaraIcon, CancelIcon, CashIcon, CategorieIcon, ChartIcon, CheckCircleIcon, CheckIcon, ClockIcon, CloseIcon, CloudIcon, CopyIcon, DeleteIcon, DocumentIcon, EditIcon, FacturacionIcon, FilterIcon, FolderIcon, Form, GearIcon, HomeIcon, IconCursor, IconDownload, IconDuplicate, IconErase, IconGrid, IconHand, IconLayers, IconPlace, IconPolygon, IconRedo, IconReset, IconUndo, IconUpload, IconWall, IconZoomIn, IconZoomOut, InfoAlert, InfoIcon, Input, LifeGuardIcon, LightingIcon, Loading, LocationIcon, LogoutIcon, MenuIcon, MinusIcon, Modal, MoneyIcon, MonitorIcon, MoonIcon, NetworkIcon, NotFoundIcon, PasteIcon, PercentIcon, PrinterIcon, QuestionIcon, RestaurantMenuIcon, SaveIcon, SearchIcon, Select, ShieldIcon, SpinnerIcon, StackIcon, SunIcon, Table, TestIcon, TextArea, ThemeContext, ThemeProvider, ThemeToggle, TrashIcon, TruckIcon, UsersIcon, VenueMapEditor, VenueMapViewer, WhatsAppIcon, findNearestNode, genId, snapPoint, snapToGrid, useLibraryStorage, usePanZoom, useTheme };
+export { AddIcon, Alerta, AlertaAdvertencia, AlertaConfirmacion, AlertaError, AlertaExito, AlertaInfo, AlertaToast, AnimateSpin, ArchiveIcon, ArrowIcon, ArrowLeftIcon, ArrowRightIcon, BackIcon, BarsChartsIcon, BoxIcon, BuildingIcon, Button, CajasIcon, CalendarIcon, CamaraIcon, CancelIcon, CashIcon, CategorieIcon, ChartIcon, CheckCircleIcon, CheckIcon, ClockIcon, CloseIcon, CloudIcon, CopyIcon, DeleteIcon, DocumentIcon, EditIcon, ElementLibraryBuilder, FacturacionIcon, FilterIcon, FolderIcon, Form, GearIcon, HomeIcon, IconCursor, IconDownload, IconDuplicate, IconErase, IconGrid, IconHand, IconLayers, IconPlace, IconPolygon, IconRedo, IconReset, IconUndo, IconUpload, IconWall, IconZoomIn, IconZoomOut, InfoAlert, InfoIcon, Input, LifeGuardIcon, LightingIcon, Loading, LocationIcon, LogoutIcon, MenuIcon, MinusIcon, Modal, MoneyIcon, MonitorIcon, MoonIcon, NetworkIcon, NotFoundIcon, PasteIcon, PercentIcon, PrinterIcon, QuestionIcon, RestaurantMenuIcon, SaveIcon, SearchIcon, Select, ShieldIcon, SpinnerIcon, StackIcon, SunIcon, Table, TestIcon, TextArea, ThemeContext, ThemeProvider, ThemeToggle, TrashIcon, TruckIcon, UsersIcon, VenueMapEditor, VenueMapViewer, WhatsAppIcon, findNearestNode, genId, parseSvgMarkup, snapPoint, snapToGrid, useLibraryStorage, usePanZoom, useTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map