@berenjena/react-dev-panel 0.0.1-beta.1

package/dist/hooks/useDevPanel/useDevPanel.d.ts

@@ -0,0 +1,24 @@
+import { ControlsGroup } from '../../components/ControlRenderer/controls/types';
+/**
+ * Hook to register controls in the dev panel
+ * @param sectionName - Section name (e.g: 'Global', 'HomePage')
+ * @param controls - Controls configuration
+ *
+ * @example
+ * ```typescript
+ * useDevPanel('Global', {
+ *   theme: {
+ *     type: 'select',
+ *     value: 'light',
+ *     options: ['light', 'dark'],
+ *     onChange: (value) => setTheme(value)
+ *   },
+ *   debugMode: {
+ *     type: 'boolean',
+ *     value: false,
+ *     onChange: (value) => setDebugMode(value)
+ *   }
+ * });
+ * ```
+ */
+export declare function useDevPanel(sectionName: string, controls: ControlsGroup): void;

package/dist/hooks/useDevPanel/useDevPanel.js

@@ -0,0 +1,15 @@
+import { useRef as u, useEffect as s } from "react";
+import { hasControlsChanged as f } from "../../utils/hasControlChanged/hasControlChanged.js";
+import { useDevPanelActions as c, useDevPanelSections as v } from "../../utils/store/store.js";
+function C(e, t) {
+  const r = c(), n = v(), o = u(void 0);
+  s(() => {
+    const i = n[e] !== void 0;
+    (f(t, o.current) || !i) && (r.registerSection(e, t), o.current = t);
+  }, [r, e, t, n]), s(() => () => {
+    r.unregisterSection(e);
+  }, [r, e]);
+}
+export {
+  C as useDevPanel
+};

package/dist/hooks/useDragAndDrop/index.d.ts

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

package/dist/hooks/useDragAndDrop/index.js

@@ -0,0 +1,4 @@
+import { useDragAndDrop as e } from "./useDragAndDrop.js";
+export {
+  e as useDragAndDrop
+};

package/dist/hooks/useDragAndDrop/useDragAndDrop.d.ts

@@ -0,0 +1,16 @@
+import { Position } from '../../types';
+export interface UseDragAndDropProps {
+    onPositionChange: (position: Position) => void;
+}
+/**
+ * Custom hook to handle drag and drop functionality
+ * Separates the drag logic from the main component
+ * Includes boundary constraints and window resize handling
+ */
+export declare function useDragAndDrop({ onPositionChange }: UseDragAndDropProps): {
+    isDragging: boolean;
+    elementRef: import('react').RefObject<HTMLDivElement | null>;
+    handleMouseDown: (e: React.MouseEvent) => void;
+    stopDragging: () => void;
+    adjustPositionForResize: () => void;
+};

package/dist/hooks/useDragAndDrop/useDragAndDrop.js

@@ -0,0 +1,55 @@
+import { useRef as p, useState as l, useCallback as c, useEffect as f } from "react";
+import { debounce as E } from "../../utils/debounce/debounce.js";
+import { getConstrainedPosition as D } from "../../utils/getConstrainedPosition/getConstrainedPosition.js";
+import { getPositionAdjustment as L } from "../../utils/getPositionAdjustment/getPositionAdjustment.js";
+function z({ onPositionChange: i }) {
+  const o = p(null), [t, a] = l(!1), [u, v] = l({ x: 0, y: 0 }), m = c(() => {
+    const e = o.current;
+    if (!e) return;
+    const { constrainedPosition: n, needsAdjustment: d } = L(e);
+    d && i(n);
+  }, [i]), s = c(
+    (e) => {
+      if (!t || !o.current) return;
+      const n = {
+        x: e.clientX - u.x,
+        y: e.clientY - u.y
+      }, d = D(n, o.current);
+      i(d);
+    },
+    [t, u.x, u.y, i]
+  ), r = c(() => {
+    a(!1);
+  }, []), g = c((e) => {
+    if (e.target !== e.currentTarget) return;
+    e.preventDefault(), a(!0);
+    const n = o.current?.getBoundingClientRect();
+    n && v({
+      x: e.clientX - n.left,
+      y: e.clientY - n.top
+    });
+  }, []);
+  return f(() => {
+    if (!t) return;
+    const e = { passive: !0 };
+    return document.addEventListener("mousemove", s, e), document.addEventListener("mouseup", r, e), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
+    };
+  }, [t, s, r]), f(() => {
+    const e = E(m, 100);
+    return window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, [m]), f(() => () => {
+    t && (document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r));
+  }, [t, s, r]), {
+    isDragging: t,
+    elementRef: o,
+    handleMouseDown: g,
+    stopDragging: r,
+    adjustPositionForResize: m
+  };
+}
+export {
+  z as useDragAndDrop
+};

package/dist/hooks/useHotkeys/example.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Ejemplo de uso del hook useHotkeys
+ * Este componente demuestra diferentes formas de usar el hook
+ */
+export declare function HotkeysExample(): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useHotkeys/example.js

@@ -0,0 +1,266 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as p, useCallback as o } from "react";
+import { createHotkey as y } from "../../utils/createHotkey/createHotkey.js";
+import { useHotkeys as m } from "./useHotkeys.js";
+function w() {
+  const [d, s] = p(""), [l, a] = p(!1), [r, f] = p([]), [n, u] = p(-1), g = o(() => {
+    if (d.trim()) {
+      const t = [...r, d];
+      f(t), u(t.length - 1), alert(`Guardado: "${d}"`);
+    }
+  }, [d, r]), h = o(() => {
+    s(""), a(!1);
+  }, []), x = o(() => {
+    if (n > 0) {
+      const t = n - 1;
+      s(r[t]), u(t);
+    }
+  }, [r, n]), k = o(() => {
+    if (n < r.length - 1) {
+      const t = n + 1;
+      s(r[t]), u(t);
+    }
+  }, [r, n]), b = o(() => {
+    l && a(!1);
+  }, [l]), E = o(() => {
+    a(!l);
+  }, [l]), K = o(() => {
+    const t = document.getElementById("example-input");
+    t && t.focus();
+  }, []);
+  m(
+    [
+      {
+        key: "s",
+        ctrlKey: !0,
+        action: g,
+        description: "Guardar",
+        preventDefault: !0
+      },
+      {
+        key: "z",
+        ctrlKey: !0,
+        action: x,
+        description: "Deshacer",
+        preventDefault: !0
+      },
+      {
+        key: "z",
+        ctrlKey: !0,
+        shiftKey: !0,
+        action: k,
+        description: "Rehacer",
+        preventDefault: !0
+      },
+      {
+        key: "Escape",
+        action: b,
+        description: "Cancelar edición"
+      },
+      {
+        key: "e",
+        ctrlKey: !0,
+        action: E,
+        description: "Alternar edición",
+        preventDefault: !0
+      },
+      {
+        key: "l",
+        ctrlKey: !0,
+        action: h,
+        description: "Limpiar",
+        preventDefault: !0
+      },
+      {
+        key: "f",
+        ctrlKey: !0,
+        action: K,
+        description: "Enfocar input",
+        preventDefault: !0
+      }
+    ],
+    {
+      enabled: !0,
+      target: window
+    }
+  );
+  const v = y(
+    "k",
+    () => {
+      alert("Función de búsqueda activada!");
+    },
+    { meta: !0 },
+    { description: "Buscar" }
+  ), C = y(
+    "Delete",
+    () => {
+      h();
+    },
+    {},
+    { description: "Eliminar todo", enabled: l }
+  );
+  m([v, C]);
+  const H = [
+    { key: "s", ctrlKey: !0, description: "Guardar" },
+    { key: "z", ctrlKey: !0, description: "Deshacer" },
+    { key: "z", ctrlKey: !0, shiftKey: !0, description: "Rehacer" },
+    { key: "e", ctrlKey: !0, description: "Alternar edición" },
+    { key: "l", ctrlKey: !0, description: "Limpiar" },
+    { key: "f", ctrlKey: !0, description: "Enfocar input" },
+    { key: "k", metaKey: !0, description: "Buscar" },
+    { key: "Delete", description: "Eliminar todo (solo en modo edición)" },
+    { key: "Escape", description: "Cancelar edición" }
+  ];
+  return /* @__PURE__ */ i("div", { style: { padding: "20px", maxWidth: "600px", margin: "0 auto" }, children: [
+    /* @__PURE__ */ e("h2", { children: "Ejemplo de useHotkeys Hook" }),
+    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ e("label", { htmlFor: "example-input", children: "Texto:" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          id: "example-input",
+          type: "text",
+          value: d,
+          onChange: (t) => s(t.target.value),
+          onFocus: () => a(!0),
+          onBlur: () => a(!1),
+          style: {
+            width: "100%",
+            padding: "10px",
+            margin: "5px 0",
+            border: l ? "2px solid blue" : "1px solid gray",
+            borderRadius: "4px"
+          },
+          placeholder: "Escribe algo aquí..."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ i("p", { children: [
+        /* @__PURE__ */ e("strong", { children: "Estado:" }),
+        " ",
+        l ? "Editando" : "No editando"
+      ] }),
+      /* @__PURE__ */ i("p", { children: [
+        /* @__PURE__ */ e("strong", { children: "Historial:" }),
+        " ",
+        r.length,
+        " elementos"
+      ] }),
+      /* @__PURE__ */ i("p", { children: [
+        /* @__PURE__ */ e("strong", { children: "Posición en historial:" }),
+        " ",
+        n + 1,
+        " ",
+        "de ",
+        r.length
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ e("h3", { children: "Hotkeys disponibles:" }),
+      /* @__PURE__ */ e("ul", { style: { listStyle: "none", padding: 0 }, children: H.map((t, c) => /* @__PURE__ */ i(
+        "li",
+        {
+          style: {
+            padding: "5px 0",
+            borderBottom: "1px solid #eee",
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ e("span", { children: t.description }),
+            /* @__PURE__ */ e(
+              "code",
+              {
+                style: {
+                  backgroundColor: "#f5f5f5",
+                  padding: "2px 6px",
+                  borderRadius: "3px",
+                  fontSize: "12px"
+                },
+                children: [
+                  t.ctrlKey && "Ctrl",
+                  t.altKey && "Alt",
+                  t.shiftKey && "Shift",
+                  t.metaKey && "⌘",
+                  t.key.toUpperCase()
+                ].filter(Boolean).join("+")
+              }
+            )
+          ]
+        },
+        c
+      )) })
+    ] }),
+    /* @__PURE__ */ i("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ e("h3", { children: "Historial:" }),
+      /* @__PURE__ */ e("ul", { children: r.map((t, c) => /* @__PURE__ */ e(
+        "li",
+        {
+          style: {
+            padding: "5px 0",
+            opacity: c === n ? 1 : 0.6,
+            fontWeight: c === n ? "bold" : "normal"
+          },
+          children: t
+        },
+        c
+      )) })
+    ] }),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          backgroundColor: "#f9f9f9",
+          padding: "15px",
+          borderRadius: "5px",
+          fontSize: "14px"
+        },
+        children: [
+          /* @__PURE__ */ e("p", { children: /* @__PURE__ */ e("strong", { children: "Instrucciones:" }) }),
+          /* @__PURE__ */ i("ul", { children: [
+            /* @__PURE__ */ e("li", { children: "Escribe algo en el input" }),
+            /* @__PURE__ */ i("li", { children: [
+              "Usa ",
+              /* @__PURE__ */ e("code", { children: "Ctrl+S" }),
+              " para guardar"
+            ] }),
+            /* @__PURE__ */ i("li", { children: [
+              "Usa ",
+              /* @__PURE__ */ e("code", { children: "Ctrl+Z" }),
+              " para deshacer"
+            ] }),
+            /* @__PURE__ */ i("li", { children: [
+              "Usa ",
+              /* @__PURE__ */ e("code", { children: "Ctrl+Shift+Z" }),
+              " para rehacer"
+            ] }),
+            /* @__PURE__ */ i("li", { children: [
+              "Usa ",
+              /* @__PURE__ */ e("code", { children: "Ctrl+E" }),
+              " para alternar modo edición"
+            ] }),
+            /* @__PURE__ */ i("li", { children: [
+              "Usa ",
+              /* @__PURE__ */ e("code", { children: "Ctrl+L" }),
+              " para limpiar"
+            ] }),
+            /* @__PURE__ */ i("li", { children: [
+              "Usa ",
+              /* @__PURE__ */ e("code", { children: "Escape" }),
+              " para cancelar edición"
+            ] }),
+            /* @__PURE__ */ i("li", { children: [
+              "Usa ",
+              /* @__PURE__ */ e("code", { children: "Delete" }),
+              " para eliminar todo (solo en modo edición)"
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  w as HotkeysExample
+};

package/dist/hooks/useHotkeys/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useHotkey';
+export * from './useHotkeys';

package/dist/hooks/useHotkeys/index.js

@@ -0,0 +1,6 @@
+import { useHotkey as r } from "./useHotkey.js";
+import { useHotkeys as s } from "./useHotkeys.js";
+export {
+  r as useHotkey,
+  s as useHotkeys
+};

package/dist/hooks/useHotkeys/useHotkey.d.ts

@@ -0,0 +1,17 @@
+import { HotkeyConfig } from '../../types';
+import { UseHotkeysOptions } from './types';
+/**
+ * Hook for handling a single hotkey combination
+ *
+ * @param config - Single hotkey configuration
+ * @param options - Options for the hotkey
+ *
+ * @example
+ * useHotkey({
+ *   key: 's',
+ *   ctrlKey: true,
+ *   action: handleSave,
+ *   description: 'Save document'
+ * });
+ */
+export declare function useHotkey(config: HotkeyConfig, options?: UseHotkeysOptions): void;

package/dist/hooks/useHotkeys/useHotkey.js

@@ -0,0 +1,7 @@
+import { useHotkeys as t } from "./useHotkeys.js";
+function s(o, e = {}) {
+  t([o], e);
+}
+export {
+  s as useHotkey
+};

package/dist/hooks/useHotkeys/useHotkeys.d.ts

@@ -0,0 +1,38 @@
+import { HotkeyConfig } from '../../types';
+import { UseHotkeysOptions } from './types';
+/**
+ * Hook for handling keyboard shortcuts (hotkeys) with support for modifier keys
+ * and multiple key combinations.
+ *
+ * @param hotkeys - Array of hotkey configurations
+ * @param options - Global options for all hotkeys
+ *
+ * @example
+ * // Basic usage
+ * useHotkeys([
+ *   { key: 'Enter', action: handleSubmit },
+ *   { key: 'Escape', action: handleCancel }
+ * ]);
+ *
+ * @example
+ * // With modifier keys
+ * useHotkeys([
+ *   { key: 's', ctrlKey: true, action: handleSave, description: 'Save' },
+ *   { key: 'k', metaKey: true, action: handleSearch, description: 'Search' },
+ *   { key: 'z', ctrlKey: true, action: handleUndo, description: 'Undo' },
+ *   { key: 'z', ctrlKey: true, shiftKey: true, action: handleRedo, description: 'Redo' }
+ * ]);
+ *
+ * @example
+ * // With individual configuration
+ * useHotkeys([
+ *   {
+ *     key: 'Delete',
+ *     action: handleDelete,
+ *     preventDefault: true,
+ *     enabled: canDelete,
+ *     description: 'Delete item'
+ *   }
+ * ]);
+ */
+export declare function useHotkeys(hotkeys: HotkeyConfig[], options?: UseHotkeysOptions): void;

package/dist/hooks/useHotkeys/useHotkeys.js

@@ -0,0 +1,31 @@
+import { useRef as K, useCallback as y, useEffect as w } from "react";
+function M(h, p = {}) {
+  const { enabled: a = !0, target: c = window, preventDefault: f = !1, stopPropagation: l = !1 } = p, u = K([]);
+  u.current = h;
+  const i = y((t, e) => {
+    const o = t.key.toLowerCase() === e.key.toLowerCase(), n = !!e.ctrlKey === t.ctrlKey, s = !!e.shiftKey === t.shiftKey, d = !!e.altKey === t.altKey, k = !!e.metaKey === t.metaKey;
+    return o && n && s && d && k;
+  }, []), r = y(
+    (t) => {
+      if (!a) return;
+      const e = t;
+      for (const o of u.current)
+        if (o.enabled !== !1 && i(e, o)) {
+          const n = o.preventDefault ?? f, s = o.stopPropagation ?? l;
+          n && t.preventDefault(), s && t.stopPropagation(), o.action(e);
+          break;
+        }
+    },
+    [a, f, l, i]
+  );
+  w(() => {
+    const t = c;
+    if (!(!t || !a))
+      return t.addEventListener("keydown", r), () => {
+        t.removeEventListener("keydown", r);
+      };
+  }, [c, a, r]);
+}
+export {
+  M as useHotkeys
+};

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,7 @@
+import { ControlRenderer as e, controls as n } from "./components/ControlRenderer/controls/index.js";
+import { DevPanel as l } from "./components/DevPanel/DevPanel.js";
+export {
+  e as ControlRenderer,
+  l as DevPanel,
+  n as controls
+};

package/dist/utils/className/className.d.ts

@@ -0,0 +1,14 @@
+type ClassValue = string | null | undefined | {
+    [key: string]: boolean;
+};
+/**
+ * A helper function to handle class name conditions easily.
+ * Receives an object containing strings or an object with the CSS class as key
+ * and a condition to add or remove it as value.
+ * @param classNames - The classnames object
+ * @returns The classes separated by a space
+ */
+export declare function className(...classNames: ClassValue[]): {
+    className: string;
+};
+export {};

package/dist/utils/className/className.js

@@ -0,0 +1,15 @@
+function f(...o) {
+  const s = [];
+  for (const e of o)
+    if (e) {
+      if (typeof e == "string")
+        s.push(e);
+      else if (typeof e == "object")
+        for (const [t, n] of Object.entries(e))
+          n && s.push(t);
+    }
+  return { className: s.join(" ") };
+}
+export {
+  f as className
+};

package/dist/utils/className/index.d.ts

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

package/dist/utils/className/index.js

@@ -0,0 +1,4 @@
+import { className as m } from "./className.js";
+export {
+  m as className
+};

package/dist/utils/createHotkey/createHotkey.d.ts

@@ -0,0 +1,19 @@
+import { HotkeyConfig } from '../../types';
+/**
+ * Utility function to create a hotkey configuration object
+ *
+ * @param key - The key to listen for
+ * @param action - The action to execute
+ * @param modifiers - Optional modifier keys
+ * @param options - Additional options
+ *
+ * @example
+ * const saveHotkey = createHotkey('s', handleSave, { ctrl: true });
+ * const searchHotkey = createHotkey('k', handleSearch, { meta: true });
+ */
+export declare function createHotkey(key: string, action: (event: KeyboardEvent) => void, modifiers?: {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+}, options?: Partial<Omit<HotkeyConfig, "key" | "action">>): HotkeyConfig;

package/dist/utils/createHotkey/createHotkey.js

@@ -0,0 +1,14 @@
+function c(e, a, t = {}, y = {}) {
+  return {
+    key: e,
+    action: a,
+    ctrlKey: t.ctrl,
+    shiftKey: t.shift,
+    altKey: t.alt,
+    metaKey: t.meta,
+    ...y
+  };
+}
+export {
+  c as createHotkey
+};

package/dist/utils/createHotkey/index.d.ts

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

package/dist/utils/createHotkey/index.js

@@ -0,0 +1,4 @@
+import { createHotkey as r } from "./createHotkey.js";
+export {
+  r as createHotkey
+};

package/dist/utils/debounce/debounce.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds
+ * @param func - The function to debounce
+ * @param wait - The number of milliseconds to delay
+ * @returns The debounced function
+ */
+export declare function debounce<T extends (...args: unknown[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;

package/dist/utils/debounce/debounce.js

@@ -0,0 +1,9 @@
+function i(t, o) {
+  let e;
+  return (...u) => {
+    clearTimeout(e), e = setTimeout(() => t(...u), o);
+  };
+}
+export {
+  i as debounce
+};

package/dist/utils/debounce/index.d.ts

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

package/dist/utils/debounce/index.js

@@ -0,0 +1,4 @@
+import { debounce as r } from "./debounce.js";
+export {
+  r as debounce
+};

package/dist/utils/formatHotkey/formatHotkey.d.ts

@@ -0,0 +1,12 @@
+import { HotkeyConfig } from '../../types';
+/**
+ * Utility function to format hotkey combination as a human-readable string
+ *
+ * @param config - Hotkey configuration
+ * @returns Human-readable string representation
+ *
+ * @example
+ * formatHotkey({ key: 's', ctrlKey: true }) // "Ctrl+S"
+ * formatHotkey({ key: 'k', metaKey: true }) // "⌘+K" (on Mac) or "Meta+K"
+ */
+export declare function formatHotkey(config: HotkeyConfig): string;

package/dist/utils/formatHotkey/formatHotkey.js

@@ -0,0 +1,8 @@
+import { isMacOS as p } from "../isMacOS/isMacOS.js";
+function a(e) {
+  const t = [], s = p();
+  return e.ctrlKey && t.push(s ? "⌃" : "Ctrl"), e.altKey && t.push(s ? "⌥" : "Alt"), e.shiftKey && t.push(s ? "⇧" : "Shift"), e.metaKey && t.push(s ? "⌘" : "Meta"), t.push(e.key.toUpperCase()), t.join("+");
+}
+export {
+  a as formatHotkey
+};

package/dist/utils/formatHotkey/index.d.ts

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

package/dist/utils/formatHotkey/index.js

@@ -0,0 +1,4 @@
+import { formatHotkey as t } from "./formatHotkey.js";
+export {
+  t as formatHotkey
+};