neogestify-ui-components 2.0.1 → 2.2.1

package/dist/components/ElementLibraryBuilder/index.js

@@ -0,0 +1,689 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ElementLibraryBuilder/builder.tsx
+function AnimateSpin({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      className: `animate-spin ${className}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 2,
+      d: "M6 18L18 6M6 6l12 12"
+    }
+  ) });
+}
+var Button = ({
+  variant = "primary",
+  children,
+  isLoading = false,
+  loadingText,
+  isActive = false,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const baseClasses = "transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer";
+  const variantClasses = {
+    primary: "py-2 px-2 border border-indigo-600/20 dark:border-indigo-500/20 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    secondary: "p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    icon: "p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    danger: "py-2 px-2 border border-red-600/20 dark:border-red-500/20 text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    success: "py-2 px-2 border border-green-600/20 dark:border-green-500/20 text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    outline: "py-2 px-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    nav: "w-full flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 hover:scale-105 text-gray-700 dark:text-gray-300 dark:hover:text-white hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    custom: "",
+    link: "text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900 rounded-lg px-2",
+    warning: "py-2 px-2 border border-yellow-600/20 dark:border-yellow-500/20 text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900",
+    toggle: "px-2 py-2 rounded-lg font-medium transition-all duration-200 disabled:cursor-not-allowed border-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900"
+  };
+  let classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
+  if (variant === "nav" && isActive) {
+    classes += " bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105";
+  }
+  if (variant === "nav" && !isActive) {
+    classes += " hover:bg-white dark:hover:bg-gray-700 hover:shadow-lg";
+  }
+  if (variant === "toggle") {
+    if (isActive) {
+      classes += " bg-indigo-600 text-white border-indigo-600/30 dark:border-indigo-500/30 hover:bg-indigo-700";
+    } else {
+      classes += " bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 hover:border-gray-400 dark:hover:border-gray-500";
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: classes,
+      disabled: disabled || isLoading,
+      ...props,
+      children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AnimateSpin, { className: "h-5 w-5 mr-2 inline-block text-current" }),
+        loadingText || "Cargando..."
+      ] }) : children
+    }
+  );
+};
+var Input = ({
+  label,
+  error,
+  helperText,
+  icon,
+  iconSide = "left",
+  className = "",
+  id,
+  type,
+  ...props
+}) => {
+  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+  const baseClasses = "appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200";
+  const errorClasses = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : "border-gray-300 dark:border-gray-600";
+  const iconPaddingLeft = icon && iconSide === "left" ? "pl-9" : "";
+  const iconPaddingRight = icon && iconSide === "right" ? "pr-9" : "";
+  const classes = `${baseClasses} ${errorClasses} ${iconPaddingLeft} ${iconPaddingRight} ${className}`.trim();
+  const toggleShape = type === "radio" ? "rounded-full" : "rounded";
+  const toggleBaseClasses = `h-4 w-4 ${toggleShape} border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-indigo-600 dark:text-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 cursor-pointer`;
+  const toggleErrorClasses = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400" : "";
+  const toggleClasses = `${toggleBaseClasses} ${toggleErrorClasses}`.trim();
+  const fileBaseClasses = "block w-full sm:text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 file:mr-4 file:py-2 file:px-4 file:rounded-l-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 dark:file:bg-indigo-900/50 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800/50 file:transition-colors file:duration-200 file:cursor-pointer";
+  const fileErrorClasses = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400" : "border-gray-300 dark:border-gray-600";
+  const fileClasses = `${fileBaseClasses} ${fileErrorClasses} ${className}`.trim();
+  const hasHidden = Boolean(className && /\bhidden\b/.test(className));
+  const wrapperBase = "space-y-1 w-full";
+  const wrapperClasses = hasHidden ? `${wrapperBase} hidden` : wrapperBase;
+  const labelNode = label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }) : label);
+  const errorNode = error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", role: "alert", children: error });
+  const helperNode = helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText });
+  if (type === "checkbox" || type === "radio") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", { id: inputId, type, className: toggleClasses, ...props }),
+        labelNode
+      ] }),
+      errorNode,
+      helperNode
+    ] });
+  }
+  if (type === "file") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+      labelNode,
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: inputId, type: "file", className: fileClasses, ...props }),
+      errorNode,
+      helperNode
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+    labelNode,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      icon && iconSide === "left" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-gray-400 dark:text-gray-500", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: inputId, className: classes, type, ...props }),
+      icon && iconSide === "right" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 z-10 flex items-center pr-3 text-gray-400 dark:text-gray-500", children: icon })
+    ] }),
+    errorNode,
+    helperNode
+  ] });
+};
+var TextArea = ({
+  label,
+  error,
+  helperText,
+  variant = "default",
+  size = "medium",
+  className = "",
+  id,
+  ...props
+}) => {
+  const textAreaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
+  const sizeClasses = {
+    small: "px-2 py-1 text-xs",
+    medium: "px-3 py-2 text-sm",
+    large: "px-4 py-3 text-base"
+  };
+  const variantClasses = {
+    default: "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800",
+    outline: "border-2 border-indigo-300 dark:border-indigo-600 bg-transparent",
+    filled: "border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700",
+    minimal: "border-0 bg-transparent focus:ring-0 focus:border-0"
+  };
+  const baseClasses = "appearance-none relative block w-full placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md border focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 resize-y";
+  const errorClasses = error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : "";
+  const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${errorClasses} ${className}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 w-full", children: [
+    label && typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: textAreaId,
+        className: "block text-sm font-medium text-gray-700 dark:text-gray-300",
+        children: label
+      }
+    ) : label,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        id: textAreaId,
+        className: classes,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", role: "alert", children: error }),
+    helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+var Select = ({
+  options,
+  placeholder,
+  variant = "default",
+  error = false,
+  helperText,
+  label,
+  className = "",
+  id,
+  ...props
+}) => {
+  const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
+  const getVariantClasses = () => {
+    const baseClasses = "appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200";
+    if (variant === "small") {
+      return `${baseClasses.replace("px-3 py-2", "px-2.5 py-1.5 text-sm")} border-gray-300 dark:border-gray-600`;
+    }
+    return `${baseClasses} border-gray-300 dark:border-gray-600 ${error ? "border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500" : ""}`;
+  };
+  const getOptionClasses = (option) => {
+    return `bg-white dark:bg-gray-800 text-gray-900 dark:text-white py-2 ${option.disabled ? "opacity-50 cursor-not-allowed" : ""}`;
+  };
+  const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 w-full", children: [
+    label && typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: selectId, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: label }) : label,
+    /* @__PURE__ */ jsxRuntime.jsxs("select", { id: selectId, className: combinedClassName, ...props, children: [
+      placeholder && placeholder.trim() && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, selected: true, className: "bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 py-2", children: placeholder }),
+      options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        "option",
+        {
+          value: option.value,
+          disabled: option.disabled,
+          selected: option.selected,
+          className: getOptionClasses(option),
+          children: option.label
+        },
+        option.value
+      ))
+    ] }),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm ${error ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"}`, children: helperText })
+  ] });
+};
+var Modal = react.forwardRef(({
+  onClose,
+  title,
+  children,
+  footer,
+  maxWidth = "max-w-2xl",
+  showCloseButton = true,
+  zIndex = 50
+}, ref) => {
+  const [show, setShow] = react.useState(false);
+  react.useEffect(() => {
+    setShow(true);
+  }, []);
+  const handleClose = () => {
+    setShow(false);
+    setTimeout(() => {
+      onClose();
+    }, 300);
+  };
+  react.useImperativeHandle(ref, () => ({
+    handleClose
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dialog",
+    {
+      open: show,
+      className: `fixed inset-0 w-full h-full flex items-center justify-center p-4 ${show && "opacity-100"} transition-opacity opacity-0 duration-300 bg-gray-900/60 backdrop-blur-sm`,
+      style: { zIndex: zIndex - 10 },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "article",
+        {
+          className: `relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${maxWidth} max-h-[90vh] flex flex-col overflow-hidden`,
+          style: { zIndex },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "shrink-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: title }),
+              showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "icon",
+                  onClick: handleClose,
+                  className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "w-5 h-5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-6", children }),
+            footer && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "shrink-0 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-end gap-3", children: footer })
+          ]
+        }
+      )
+    }
+  );
+});
+Modal.displayName = "Modal";
+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] = react.useState([
+    { internalId: crypto.randomUUID(), name: "defaultGroup", objects: [] }
+  ]);
+  const [activeGroupId, setActiveGroupId] = react.useState(groups[0].internalId);
+  const [editingGroupId, setEditingGroupId] = react.useState(null);
+  const [activeElementIndex, setActiveElementIndex] = react.useState(null);
+  const [currentElement, setCurrentElement] = react.useState({ ...DEFAULT_ELEMENT, id: "rect_1", label: "New Rect" });
+  const [downloadFileName, setDownloadFileName] = react.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "w-1/4 flex flex-col gap-4 border-r dark:border-gray-700 pr-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold", children: "Libraries (Groups)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: handleAddGroup, children: "+ Group" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 max-h-48 overflow-y-auto pr-1", children: groups.map((group) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { onDoubleClick: () => setEditingGroupId(group.internalId), children: group.name }),
+              groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveGroup(group.internalId);
+              }, className: "text-red-500 text-xs", children: "x" })
+            ]
+          },
+          group.internalId
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "dark:border-gray-700" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 flex-grow overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "font-bold", children: [
+            "Elements in ",
+            activeGroup?.name || "?"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: handleAddElement, disabled: !activeGroup, children: "+ Element" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 overflow-y-auto flex-grow pr-1", children: [
+          activeGroup?.objects.map((el, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { children: [
+                  el.id,
+                  " (",
+                  el.shape,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: (e) => {
+                  e.stopPropagation();
+                  handleRemoveElement(i);
+                }, className: "text-red-500 text-xs", children: "x" })
+              ]
+            },
+            i
+          )),
+          (!activeGroup || activeGroup.objects.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 dark:text-gray-500 italic text-xs", children: "No elements yet" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-4 px-2 overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold text-lg", children: "Element Editor" }),
+      activeElementIndex !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 w-full max-w-2xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              label: "Element ID (unique)",
+              value: currentElement.id,
+              onChange: (e) => handleFieldChange("id", e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              label: "Label (display name)",
+              value: currentElement.label,
+              onChange: (e) => handleFieldChange("label", e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Select,
+            {
+              label: "Shape",
+              options: SHAPE_OPTIONS,
+              value: currentElement.shape,
+              onChange: (e) => handleFieldChange("shape", e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              label: "Icon (emoji or class)",
+              value: currentElement.icon || "",
+              onChange: (e) => handleFieldChange("icon", e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              type: "number",
+              label: "Default Width",
+              value: currentElement.defaultWidth,
+              onChange: (e) => handleFieldChange("defaultWidth", parseFloat(e.target.value) || 0)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              type: "number",
+              label: "Default Height",
+              value: currentElement.defaultHeight,
+              onChange: (e) => handleFieldChange("defaultHeight", parseFloat(e.target.value) || 0)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-semibold text-gray-700", children: "Fill Color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  className: "w-8 h-8 cursor-pointer rounded",
+                  value: currentElement.color,
+                  onChange: (e) => handleFieldChange("color", e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  value: currentElement.color,
+                  onChange: (e) => handleFieldChange("color", e.target.value)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-semibold text-gray-700", children: "Stroke Color" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  className: "w-8 h-8 cursor-pointer rounded",
+                  value: currentElement.strokeColor,
+                  onChange: (e) => handleFieldChange("strokeColor", e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  value: currentElement.strokeColor,
+                  onChange: (e) => handleFieldChange("strokeColor", e.target.value)
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        currentElement.shape === "path" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm", children: "Path Config" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                label: "ViewBox",
+                placeholder: "0 0 100 100",
+                value: currentElement.viewBox || "",
+                onChange: (e) => handleFieldChange("viewBox", e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm", children: "SVG Markup (Autosanitized)" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex justify-end gap-2 mt-4 pt-4 border-t dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleSaveElement, children: "Save Changes to Element" }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-bold", children: "Output JSON" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              value: downloadFileName,
+              onChange: (e) => setDownloadFileName(e.target.value),
+              placeholder: "filename",
+              title: "Filename without extension"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: ".json" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: handleDownload,
+              title: "Download JSON file",
+              children: "Descargar"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => navigator.clipboard.writeText(generatedLib),
+              children: "Copy"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden h-full pb-4", children: /* @__PURE__ */ jsxRuntime.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
+        }
+      ) })
+    ] })
+  ] });
+};
+
+exports.ElementLibraryBuilder = ElementLibraryBuilder;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map