baraqex 1.0.38 → 1.0.40

package/dist/index.js

@@ -15,7 +15,84 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// node_modules/frontend-hamroun/dist/index.mjs
+// node_modules/frontend-hamroun/dist/index.js
+function jsx(type, props) {
+  console.log("JSX Transform:", { type, props });
+  const processedProps = { ...props };
+  if (arguments.length > 2) {
+    processedProps.children = Array.prototype.slice.call(arguments, 2);
+  }
+  return { type, props: processedProps };
+}
+async function createElement(vnode) {
+  console.log("Creating element from:", vnode);
+  if (vnode == null) {
+    return document.createTextNode("");
+  }
+  if (typeof vnode === "boolean") {
+    return document.createTextNode("");
+  }
+  if (typeof vnode === "number" || typeof vnode === "string") {
+    return document.createTextNode(String(vnode));
+  }
+  if (Array.isArray(vnode)) {
+    const fragment = document.createDocumentFragment();
+    for (const child of vnode) {
+      const node = await createElement(child);
+      fragment.appendChild(node);
+    }
+    return fragment;
+  }
+  if ("type" in vnode && vnode.props !== void 0) {
+    const { type, props } = vnode;
+    if (typeof type === "function") {
+      try {
+        const result = await type(props || {});
+        const node = await createElement(result);
+        if (node instanceof Element) {
+          node.setAttribute("data-component-id", type.name || type.toString());
+        }
+        return node;
+      } catch (error) {
+        console.error("Error rendering component:", error);
+        return document.createTextNode("");
+      }
+    }
+    const element = document.createElement(type);
+    for (const [key, value] of Object.entries(props || {})) {
+      if (key === "children")
+        continue;
+      if (key.startsWith("on") && typeof value === "function") {
+        const eventName = key.toLowerCase().slice(2);
+        const existingHandler = element.__events?.[eventName];
+        if (existingHandler) {
+          element.removeEventListener(eventName, existingHandler);
+        }
+        element.addEventListener(eventName, value);
+        if (!element.__events) {
+          element.__events = {};
+        }
+        element.__events[eventName] = value;
+      } else if (key === "style" && typeof value === "object") {
+        Object.assign(element.style, value);
+      } else if (key === "className") {
+        element.setAttribute("class", String(value));
+      } else if (key !== "key" && key !== "ref") {
+        element.setAttribute(key, String(value));
+      }
+    }
+    const children = props?.children;
+    if (children != null) {
+      const childArray = Array.isArray(children) ? children.flat() : [children];
+      for (const child of childArray) {
+        const childNode = await createElement(child);
+        element.appendChild(childNode);
+      }
+    }
+    return element;
+  }
+  return document.createTextNode(String(vnode));
+}
 function batchUpdates(fn) {
   if (isBatching) {
     queue.push(fn);
@@ -26,57 +103,65 @@ function batchUpdates(fn) {
     fn();
     while (queue.length > 0) {
       const nextFn = queue.shift();
-      nextFn == null ? void 0 : nextFn();
+      nextFn?.();
     }
   } finally {
     isBatching = false;
   }
 }
+function createContext(defaultValue) {
+  const contextId = Symbol("context");
+  const Provider = ({ value, children }) => {
+    contexts.set(contextId, value);
+    return children;
+  };
+  const Consumer = ({ children }) => {
+    const value = contexts.get(contextId) ?? defaultValue;
+    return children(value);
+  };
+  const context = {
+    Provider,
+    Consumer,
+    displayName: "Context"
+  };
+  return context;
+}
+function useContext(context) {
+  return {};
+}
 function setRenderCallback(callback, element, container) {
   globalRenderCallback = callback;
   globalContainer = container;
   currentElement = element;
 }
-function prepareRender() {
+function prepareRender(component = null, isServerSideRender = false) {
   currentRender++;
+  isSSR = isServerSideRender;
   stateIndices.set(currentRender, 0);
+  if (!states.has(currentRender)) {
+    states.set(currentRender, []);
+  }
   return currentRender;
 }
 function finishRender() {
-  if (isServer) {
-    serverStates.delete(currentRender);
-  }
-  currentRender = 0;
 }
 function useState(initial) {
   if (!currentRender) {
     throw new Error("useState must be called within a render");
   }
-  if (isServer) {
-    if (!serverStates.has(currentRender)) {
-      serverStates.set(currentRender, /* @__PURE__ */ new Map());
-    }
-    const componentState = serverStates.get(currentRender);
-    const index2 = stateIndices.get(currentRender) || 0;
-    if (!componentState.has(index2)) {
-      componentState.set(index2, initial);
-    }
-    const state2 = componentState.get(index2);
-    const setState2 = (newValue) => {
-    };
-    stateIndices.set(currentRender, index2 + 1);
-    return [state2, setState2];
-  }
   if (!states.has(currentRender)) {
     states.set(currentRender, []);
   }
   const componentStates = states.get(currentRender);
-  const index = stateIndices.get(currentRender);
+  const index = stateIndices.get(currentRender) || 0;
   if (index >= componentStates.length) {
     componentStates.push(initial);
   }
   const state = componentStates[index];
   const setState = (newValue) => {
+    if (isSSR) {
+      return;
+    }
     const nextValue = typeof newValue === "function" ? newValue(componentStates[index]) : newValue;
     if (componentStates[index] === nextValue)
       return;
@@ -93,19 +178,24 @@ function useState(initial) {
 function useEffect(callback, deps) {
   if (!currentRender)
     throw new Error("useEffect must be called within a render");
-  const effectIndex = stateIndices.get(currentRender);
+  if (isSSR) {
+    const effectIndex2 = stateIndices.get(currentRender) || 0;
+    stateIndices.set(currentRender, effectIndex2 + 1);
+    return;
+  }
+  const effectIndex = stateIndices.get(currentRender) || 0;
   if (!effects.has(currentRender)) {
     effects.set(currentRender, []);
   }
   const componentEffects = effects.get(currentRender);
   const prevEffect = componentEffects[effectIndex];
   if (!prevEffect || !deps || !prevEffect.deps || deps.some((dep, i) => dep !== prevEffect.deps[i])) {
-    if (prevEffect == null ? void 0 : prevEffect.cleanup) {
+    if (prevEffect?.cleanup) {
       prevEffect.cleanup();
     }
     queueMicrotask(() => {
       const cleanup = callback() || void 0;
-      componentEffects[effectIndex] = { cleanup, deps };
+      componentEffects[effectIndex] = { cleanup, deps: deps || [] };
     });
   }
   stateIndices.set(currentRender, effectIndex + 1);
@@ -113,7 +203,7 @@ function useEffect(callback, deps) {
 function useMemo(factory, deps) {
   if (!currentRender)
     throw new Error("useMemo must be called within a render");
-  const memoIndex = stateIndices.get(currentRender);
+  const memoIndex = stateIndices.get(currentRender) || 0;
   if (!memos.has(currentRender)) {
     memos.set(currentRender, []);
   }
@@ -121,7 +211,7 @@ function useMemo(factory, deps) {
   const prevMemo = componentMemos[memoIndex];
   if (!prevMemo || deps && deps.some((dep, i) => !Object.is(dep, prevMemo.deps[i]))) {
     const value = factory();
-    componentMemos[memoIndex] = { value, deps };
+    componentMemos[memoIndex] = { value, deps: deps || [] };
     stateIndices.set(currentRender, memoIndex + 1);
     return value;
   }
@@ -131,7 +221,7 @@ function useMemo(factory, deps) {
 function useRef(initial) {
   if (!currentRender)
     throw new Error("useRef must be called within a render");
-  const refIndex = stateIndices.get(currentRender);
+  const refIndex = stateIndices.get(currentRender) || 0;
   if (!refs.has(currentRender)) {
     refs.set(currentRender, []);
   }
@@ -148,6 +238,9 @@ function useRef(initial) {
 }
 async function rerender(rendererId) {
   try {
+    if (isSSR) {
+      return;
+    }
     const componentEffects = effects.get(rendererId);
     if (componentEffects) {
       componentEffects.forEach((effect) => {
@@ -167,211 +260,619 @@ function useErrorBoundary() {
   const [error, setError] = useState(null);
   return [error, () => setError(null)];
 }
-function createContext(defaultValue) {
-  const context = {
-    Provider: ({ value, children }) => {
-      return children;
-    },
-    Consumer: ({ children }) => {
-      return children(defaultValue);
-    },
-    _id: Symbol(),
-    useSelector: (selector) => {
-      return selector(defaultValue);
+async function render(element, container) {
+  try {
+    setRenderCallback(render, element, container);
+    const renderId = prepareRender(element);
+    const domNode = await createElement(element);
+    if (container instanceof Element) {
+      container.innerHTML = "";
+    } else {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
+      }
     }
-  };
-  return context;
-}
-function useContext(context) {
-  return context;
+    container.appendChild(domNode);
+    finishRender();
+    console.log("Render completed successfully");
+  } catch (error) {
+    console.error("Error during render:", error);
+    throw error;
+  }
 }
-function jsx(type, props) {
-  console.log("JSX Transform:", { type, props });
-  const processedProps = { ...props };
-  if (arguments.length > 2) {
-    processedProps.children = Array.prototype.slice.call(arguments, 2);
+async function hydrate(element, container) {
+  try {
+    console.log("Starting hydration...");
+    await render(element, container);
+    console.log("Hydration completed successfully");
+  } catch (error) {
+    console.error("Error during hydration:", error);
+    throw error;
   }
-  return { type, props: processedProps };
 }
-async function createElement(vnode) {
-  var _a;
-  console.log("Creating element from:", vnode);
-  if (vnode == null) {
-    return document.createTextNode("");
+async function renderToString(element) {
+  prepareRender(element);
+  try {
+    const html = await renderNodeToString(element);
+    return html;
+  } finally {
   }
-  if (typeof vnode === "boolean") {
-    return document.createTextNode("");
+}
+async function renderNodeToString(node) {
+  if (node == null || typeof node === "boolean") {
+    return "";
   }
-  if (typeof vnode === "number" || typeof vnode === "string") {
-    return document.createTextNode(String(vnode));
+  if (typeof node === "string" || typeof node === "number") {
+    return escapeHtml(String(node));
   }
-  if (Array.isArray(vnode)) {
-    const fragment = document.createDocumentFragment();
-    for (const child of vnode) {
-      const node = await createElement(child);
-      fragment.appendChild(node);
-    }
-    return fragment;
+  if (Array.isArray(node)) {
+    const results = await Promise.all(node.map((child) => renderNodeToString(child)));
+    return results.join("");
   }
-  if ("type" in vnode && vnode.props !== void 0) {
-    const { type, props } = vnode;
+  if (node && typeof node === "object" && "type" in node) {
+    const { type, props = {} } = node;
     if (typeof type === "function") {
       try {
-        const result = await type(props || {});
-        const node = await createElement(result);
-        if (node instanceof Element) {
-          node.setAttribute("data-component-id", type.name || type.toString());
+        const componentRenderId = prepareRender(type);
+        try {
+          const result = await type(props);
+          return await renderNodeToString(result);
+        } finally {
+          finishRender();
         }
-        return node;
       } catch (error) {
         console.error("Error rendering component:", error);
-        return document.createTextNode("");
+        return `<!-- Error rendering component: ${error.message} -->`;
       }
     }
-    const element = document.createElement(type);
-    for (const [key, value] of Object.entries(props || {})) {
-      if (key === "children")
-        continue;
-      if (key.startsWith("on") && typeof value === "function") {
-        const eventName = key.toLowerCase().slice(2);
-        const existingHandler = (_a = element.__events) == null ? void 0 : _a[eventName];
-        if (existingHandler) {
-          element.removeEventListener(eventName, existingHandler);
-        }
-        element.addEventListener(eventName, value);
-        if (!element.__events) {
-          element.__events = {};
-        }
-        element.__events[eventName] = value;
-      } else if (key === "style" && typeof value === "object") {
-        Object.assign(element.style, value);
-      } else if (key === "className") {
-        element.setAttribute("class", String(value));
-      } else if (key !== "key" && key !== "ref") {
-        element.setAttribute(key, String(value));
-      }
+    if (typeof type === "string") {
+      return await renderDOMElement(type, props);
     }
-    const children = props == null ? void 0 : props.children;
-    if (children != null) {
-      const childArray = Array.isArray(children) ? children.flat() : [children];
-      for (const child of childArray) {
-        const childNode = await createElement(child);
-        element.appendChild(childNode);
-      }
-    }
-    return element;
   }
-  return document.createTextNode(String(vnode));
+  if (typeof node === "object") {
+    return escapeHtml(JSON.stringify(node));
+  }
+  return escapeHtml(String(node));
 }
-async function hydrate(element, container) {
-  isHydrating = true;
-  try {
-    await render(element, container);
-  } finally {
-    isHydrating = false;
+async function renderDOMElement(tagName, props) {
+  const { children, ...attrs } = props;
+  const voidElements = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  const attributeString = Object.entries(attrs).filter(([key, value]) => {
+    if (key.startsWith("on") || key === "key" || key === "ref")
+      return false;
+    if (value == null || value === false)
+      return false;
+    return true;
+  }).map(([key, value]) => {
+    if (key === "className")
+      key = "class";
+    if (value === true)
+      return key;
+    if (key === "style" && typeof value === "object" && value !== null) {
+      const styleString = Object.entries(value).map(([prop, val]) => `${kebabCase(prop)}:${val}`).join(";");
+      return `style="${escapeHtml(styleString)}"`;
+    }
+    return `${key}="${escapeHtml(String(value))}"`;
+  }).join(" ");
+  const openTag = `<${tagName}${attributeString ? " " + attributeString : ""}>`;
+  if (voidElements.has(tagName)) {
+    return openTag.slice(0, -1) + "/>";
   }
+  const closeTag = `</${tagName}>`;
+  if (children != null) {
+    const childrenString = await renderNodeToString(children);
+    return openTag + childrenString + closeTag;
+  }
+  return openTag + closeTag;
 }
-async function render(element, container) {
-  console.log("Rendering to:", container.id);
-  batchUpdates(async () => {
-    const rendererId = prepareRender();
-    try {
-      setRenderCallback(render, element, container);
-      const domNode = await createElement(element);
-      if (!isHydrating) {
-        container.innerHTML = "";
+function escapeHtml(text) {
+  const htmlEscapes = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#x27;",
+    "/": "&#x2F;"
+  };
+  return text.replace(/[&<>"'/]/g, (match) => htmlEscapes[match]);
+}
+function kebabCase(str) {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+function arePropsEqual(oldProps, newProps) {
+  const oldKeys = Object.keys(oldProps).filter((k) => k !== "children");
+  const newKeys = Object.keys(newProps).filter((k) => k !== "children");
+  if (oldKeys.length !== newKeys.length)
+    return false;
+  return oldKeys.every((key) => oldProps[key] === newProps[key]);
+}
+function diff(oldNode, newNode) {
+  if (oldNode == null || newNode == null)
+    return oldNode !== newNode;
+  if (typeof oldNode !== typeof newNode)
+    return true;
+  if (typeof newNode === "string" || typeof newNode === "number")
+    return oldNode !== newNode;
+  if (newNode.type !== oldNode.type)
+    return true;
+  return !arePropsEqual(oldNode.props, newNode.props);
+}
+function shouldComponentUpdate(oldProps, newProps) {
+  return !arePropsEqual(oldProps, newProps);
+}
+function parsePath(path5) {
+  const pattern = path5.replace(/\/+$/, "").replace(/^\/+/, "/").replace(/\/:([^/]+)/g, "/([^/]+)");
+  const paramNames = [];
+  path5.replace(/\/:([^/]+)/g, (_, paramName) => {
+    paramNames.push(paramName);
+    return "";
+  });
+  return { pattern, paramNames };
+}
+function matchPath(pathname, route) {
+  const { path: path5, exact = false } = route;
+  const { pattern, paramNames } = parsePath(path5);
+  const regex = new RegExp(`^${pattern}${exact ? "$" : ""}`);
+  const match = pathname.match(regex);
+  if (!match)
+    return null;
+  const params = {};
+  paramNames.forEach((name, index) => {
+    params[name] = match[index + 1];
+  });
+  return params;
+}
+function RouterProvider({ routes, children }) {
+  const getInitialLocation = () => {
+    if (typeof window === "undefined") {
+      return { pathname: "/", search: "", hash: "" };
+    }
+    return {
+      pathname: window.location.pathname,
+      search: window.location.search,
+      hash: window.location.hash
+    };
+  };
+  const [location, setLocation] = useState(getInitialLocation());
+  const [params, setParams] = useState({});
+  useEffect(() => {
+    for (const route of routes) {
+      const matchedParams = matchPath(location.pathname, route);
+      if (matchedParams) {
+        setParams(matchedParams);
+        break;
       }
-      container.appendChild(domNode);
-    } finally {
-      finishRender();
     }
+  }, [location, routes]);
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    const handlePopState = () => {
+      setLocation({
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash
+      });
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
+  const navigate = (to, options = {}) => {
+    if (typeof window === "undefined")
+      return;
+    const { replace = false, state = null } = options;
+    if (replace) {
+      window.history.replaceState(state, "", to);
+    } else {
+      window.history.pushState(state, "", to);
+    }
+    setLocation({
+      pathname: window.location.pathname,
+      search: window.location.search,
+      hash: window.location.hash
+    });
+  };
+  const match = (path5) => {
+    const { pattern } = parsePath(path5);
+    const regex = new RegExp(`^${pattern}`);
+    return regex.test(location.pathname);
+  };
+  const routerValue = {
+    location: {
+      pathname: location.pathname,
+      search: location.search,
+      hash: location.hash
+    },
+    params,
+    navigate,
+    match
+  };
+  return jsx(RouterContext.Provider, { value: routerValue, children });
+}
+function Route({ path: path5, component: Component2, props = {} }) {
+  const context = useContext();
+  const params = context.params;
+  const locationPathname = context.location.pathname;
+  const routeToMatch = { path: path5, component: Component2 };
+  const match = matchPath(locationPathname, routeToMatch);
+  if (!match)
+    return null;
+  return jsx(Component2, { ...props, params });
+}
+function Switch({ children }) {
+  const context = useContext();
+  const locationPathname = context.location.pathname;
+  const child = Array.isArray(children) ? children.find((child2) => {
+    if (!child2 || typeof child2.type !== "function" || !child2.props.path)
+      return false;
+    const routeObj = {
+      path: child2.props.path,
+      component: child2.type,
+      exact: child2.props.exact || false
+    };
+    return matchPath(locationPathname, routeObj);
+  }) : children;
+  return child || null;
+}
+function Link({ to, replace = false, state = null, className = "", activeClassName = "", children, ...rest }) {
+  const context = useContext();
+  const navigate = context.navigate;
+  const match = context.match;
+  const handleClick = (e) => {
+    e.preventDefault();
+    navigate(to, { replace, state });
+  };
+  const isActive = match(to);
+  const classes = [
+    className,
+    isActive ? activeClassName : ""
+  ].filter(Boolean).join(" ");
+  return jsx("a", {
+    href: to,
+    className: classes || void 0,
+    onClick: handleClick,
+    ...rest,
+    children
   });
 }
-function renderToString(vnode) {
-  prepareRender();
-  const html = renderNodeToString(vnode);
-  finishRender();
-  return html;
+function Redirect({ to, replace = true }) {
+  const context = useContext();
+  const navigate = context.navigate;
+  useEffect(() => {
+    navigate(to, { replace });
+  }, [to]);
+  return null;
 }
-function renderNodeToString(vnode) {
-  var _a, _b, _c;
-  if (vnode === null || vnode === void 0)
-    return "";
-  if (typeof vnode === "boolean")
-    return "";
-  if (typeof vnode === "number" || typeof vnode === "string")
-    return escapeHtml(String(vnode));
-  if (typeof vnode.type === "function") {
-    const Component2 = vnode.type;
-    const renderedNode = Component2(vnode.props || {});
-    return renderNodeToString(renderedNode);
-  }
-  if (typeof vnode.type === "string") {
-    const tag = vnode.type;
-    let attrs = "";
-    let children = "";
-    if (vnode.props) {
-      for (const [key, value] of Object.entries(vnode.props)) {
-        if (key === "children")
-          continue;
-        if (key.startsWith("on"))
-          continue;
-        if (key === "className") {
-          attrs += ` class="${escapeHtml(value)}"`;
-          continue;
-        }
-        if (typeof value === "string" || typeof value === "number") {
-          attrs += ` ${key}="${escapeHtml(String(value))}"`;
-        } else if (value === true) {
-          attrs += ` ${key}`;
-        }
+function useLocation() {
+  const context = useContext();
+  return context.location;
+}
+function useParams() {
+  const context = useContext();
+  return context.params;
+}
+function useNavigate() {
+  const context = useContext();
+  return context.navigate;
+}
+function useForm(options) {
+  const { initialValues, validate, onSubmit } = options;
+  const [values, setValues] = useState(initialValues);
+  const [errors, setErrors] = useState({});
+  const [touched, setTouched] = useState({});
+  const [dirty, setDirty] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitCount, setSubmitCount] = useState(0);
+  const isValid = Object.keys(errors).length === 0;
+  const isDirty = Object.values(dirty).some(Boolean);
+  useEffect(() => {
+    if (validate) {
+      const validationErrors = validate(values);
+      setErrors(validationErrors || {});
+    }
+  }, [values, validate]);
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    const fieldValue = type === "checkbox" ? checked : value;
+    setValues((prev) => ({
+      ...prev,
+      [name]: fieldValue
+    }));
+    setDirty((prev) => ({
+      ...prev,
+      [name]: true
+    }));
+  };
+  const handleBlur = (e) => {
+    const { name } = e.target;
+    setTouched((prev) => ({
+      ...prev,
+      [name]: true
+    }));
+  };
+  const setFieldValue = (field, value) => {
+    setValues((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+    setDirty((prev) => ({
+      ...prev,
+      [field]: true
+    }));
+  };
+  const setFieldError = (field, error) => {
+    setErrors((prev) => ({
+      ...prev,
+      [field]: error
+    }));
+  };
+  const updateValues = (newValues) => {
+    setValues((prev) => ({
+      ...prev,
+      ...newValues
+    }));
+    const dirtyFields = {};
+    Object.keys(newValues).forEach((key) => {
+      dirtyFields[key] = true;
+    });
+    setDirty((prev) => ({
+      ...prev,
+      ...dirtyFields
+    }));
+  };
+  const resetForm = () => {
+    setValues(initialValues);
+    setErrors({});
+    setTouched({});
+    setDirty({});
+    setIsSubmitting(false);
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const allTouched = {};
+    Object.keys(values).forEach((key) => {
+      allTouched[key] = true;
+    });
+    setTouched(allTouched);
+    let validationErrors = {};
+    if (validate) {
+      validationErrors = validate(values);
+      setErrors(validationErrors || {});
+    }
+    if (Object.keys(validationErrors).length === 0 && onSubmit) {
+      setIsSubmitting(true);
+      setSubmitCount((count) => count + 1);
+      try {
+        await onSubmit(values, {
+          fields: Object.keys(values).reduce((acc, key) => {
+            acc[key] = {
+              value: values[key],
+              error: errors[key],
+              touched: touched[key] || false,
+              dirty: dirty[key] || false
+            };
+            return acc;
+          }, {}),
+          isValid,
+          isDirty,
+          isSubmitting: true,
+          submitCount: submitCount + 1
+        });
+      } finally {
+        setIsSubmitting(false);
       }
     }
-    const childrenArray = ((_a = vnode.props) == null ? void 0 : _a.children) ? Array.isArray(vnode.props.children) ? vnode.props.children : [vnode.props.children] : [];
-    for (const child of childrenArray) {
-      children += renderNodeToString(child);
-    }
-    const selfClosing = [
-      "area",
-      "base",
-      "br",
-      "col",
-      "embed",
-      "hr",
-      "img",
-      "input",
-      "link",
-      "meta",
-      "param",
-      "source",
-      "track",
-      "wbr"
-    ];
-    if (selfClosing.includes(tag)) {
-      return `<${tag}${attrs}/>`;
-    }
-    return `<${tag}${attrs}>${children}</${tag}>`;
-  }
-  if (vnode.type === Symbol.for("react.fragment")) {
-    let fragmentOutput = "";
-    const children = Array.isArray((_b = vnode.props) == null ? void 0 : _b.children) ? vnode.props.children : ((_c = vnode.props) == null ? void 0 : _c.children) ? [vnode.props.children] : [];
-    for (const child of children) {
-      fragmentOutput += renderNodeToString(child);
-    }
-    return fragmentOutput;
-  }
-  console.warn("Unknown vnode type:", vnode.type);
-  return "";
+  };
+  return {
+    values,
+    errors,
+    touched,
+    dirty,
+    isValid,
+    isDirty,
+    isSubmitting,
+    submitCount,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+    setFieldValue,
+    setFieldError,
+    setValues: updateValues,
+    resetForm
+  };
 }
-function escapeHtml(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+function createEventBus() {
+  const events = /* @__PURE__ */ new Map();
+  const onceHandlers = /* @__PURE__ */ new WeakMap();
+  const on = (event, handler) => {
+    if (!events.has(event)) {
+      events.set(event, /* @__PURE__ */ new Set());
+    }
+    events.get(event).add(handler);
+    return () => off(event, handler);
+  };
+  const once = (event, handler) => {
+    const onceWrapper = (...args) => {
+      off(event, onceWrapper);
+      handler(...args);
+    };
+    onceHandlers.set(handler, onceWrapper);
+    return on(event, onceWrapper);
+  };
+  const off = (event, handler) => {
+    if (!handler) {
+      events.delete(event);
+      return;
+    }
+    const wrappedHandler = onceHandlers.get(handler);
+    const handlerToRemove = wrappedHandler || handler;
+    if (events.has(event)) {
+      events.get(event).delete(handlerToRemove);
+      if (events.get(event).size === 0) {
+        events.delete(event);
+      }
+    }
+  };
+  const emit = (event, ...args) => {
+    if (!events.has(event)) {
+      return;
+    }
+    const handlers = Array.from(events.get(event));
+    for (const handler of handlers) {
+      handler(...args);
+    }
+  };
+  const clear = (event) => {
+    if (event) {
+      events.delete(event);
+    } else {
+      events.clear();
+    }
+  };
+  return { on, once, off, emit, clear };
+}
+function useEvent(event, handler, options = {}) {
+  return options.once ? globalEventBus.once(event, handler) : globalEventBus.on(event, handler);
+}
+function createStore(reducer, initialState, middlewares = []) {
+  let state = initialState;
+  let listeners = [];
+  let dispatch = (action) => {
+    state = reducer(state, action);
+    listeners.forEach((listener) => listener());
+    return action;
+  };
+  if (middlewares.length > 0) {
+    const middlewareAPI = {
+      getState: () => state,
+      dispatch: (action) => dispatch(action),
+      subscribe: (listener) => subscribe(listener)
+    };
+    const chain = middlewares.map((middleware) => middleware(middlewareAPI));
+    dispatch = chain.reduce((a, b) => (next) => a(b(next)))(dispatch);
+  }
+  function subscribe(listener) {
+    listeners.push(listener);
+    return function unsubscribe() {
+      listeners = listeners.filter((l) => l !== listener);
+    };
+  }
+  dispatch({ type: "@@INIT" });
+  return {
+    getState: () => state,
+    dispatch,
+    subscribe
+  };
+}
+function StoreProvider({ store, children }) {
+  const [state, setState] = useState(store.getState());
+  useEffect(() => {
+    const unsubscribe = store.subscribe(() => {
+      setState(store.getState());
+    });
+    return unsubscribe;
+  }, [store]);
+  return jsx(StoreContext.Provider, {
+    value: { store, state },
+    children
+  });
+}
+function useSelector(selector) {
+  const context = useContext();
+  return selector(context.state);
+}
+function useDispatch() {
+  const context = useContext();
+  return context.store.dispatch;
+}
+function useStore() {
+  const context = useContext();
+  return context.store;
+}
+function emitAppInit(data) {
+  globalEventBus.emit(LifecycleEvents.APP_INIT, data);
+}
+function emitAppMounted(rootElement) {
+  globalEventBus.emit(LifecycleEvents.APP_MOUNTED, rootElement);
+}
+function emitAppUpdated() {
+  globalEventBus.emit(LifecycleEvents.APP_UPDATED);
+}
+function emitAppError(error) {
+  globalEventBus.emit(LifecycleEvents.APP_ERROR, error);
 }
-var isBatching, queue, currentRender, states, stateIndices, effects, memos, refs, globalRenderCallback, globalContainer, currentElement, isServer, serverStates, Fragment, isHydrating, server;
+function emitAppDestroyed() {
+  globalEventBus.emit(LifecycleEvents.APP_DESTROYED);
+}
+function emitComponentCreated(info) {
+  globalEventBus.emit(LifecycleEvents.COMPONENT_CREATED, info);
+}
+function emitComponentMounted(info, element) {
+  globalEventBus.emit(LifecycleEvents.COMPONENT_MOUNTED, info, element);
+}
+function emitComponentUpdated(info, prevProps, newProps) {
+  globalEventBus.emit(LifecycleEvents.COMPONENT_UPDATED, info, prevProps, newProps);
+}
+function emitComponentError(info, error) {
+  globalEventBus.emit(LifecycleEvents.COMPONENT_ERROR, info, error);
+}
+function emitComponentUnmounted(info) {
+  globalEventBus.emit(LifecycleEvents.COMPONENT_UNMOUNTED, info);
+}
+function onAppInit(handler) {
+  return globalEventBus.on(LifecycleEvents.APP_INIT, handler);
+}
+function onAppMounted(handler) {
+  return globalEventBus.on(LifecycleEvents.APP_MOUNTED, handler);
+}
+function onAppUpdated(handler) {
+  return globalEventBus.on(LifecycleEvents.APP_UPDATED, handler);
+}
+function onAppError(handler) {
+  return globalEventBus.on(LifecycleEvents.APP_ERROR, handler);
+}
+function onAppDestroyed(handler) {
+  return globalEventBus.on(LifecycleEvents.APP_DESTROYED, handler);
+}
+function onComponentCreated(handler) {
+  return globalEventBus.on(LifecycleEvents.COMPONENT_CREATED, handler);
+}
+function onComponentMounted(handler) {
+  return globalEventBus.on(LifecycleEvents.COMPONENT_MOUNTED, handler);
+}
+function onComponentUpdated(handler) {
+  return globalEventBus.on(LifecycleEvents.COMPONENT_UPDATED, handler);
+}
+function onComponentError(handler) {
+  return globalEventBus.on(LifecycleEvents.COMPONENT_ERROR, handler);
+}
+function onComponentUnmounted(handler) {
+  return globalEventBus.on(LifecycleEvents.COMPONENT_UNMOUNTED, handler);
+}
+var Fragment, isBatching, queue, contexts, currentRender, isSSR, states, stateIndices, effects, memos, refs, globalRenderCallback, globalContainer, currentElement, Component, RouterContext, globalEventBus, StoreContext, logger, thunk, LifecycleEvents;
 var init_dist = __esm({
-  "node_modules/frontend-hamroun/dist/index.mjs"() {
+  "node_modules/frontend-hamroun/dist/index.js"() {
+    Fragment = ({ children }) => children;
     isBatching = false;
     queue = [];
+    contexts = /* @__PURE__ */ new Map();
     currentRender = 0;
+    isSSR = false;
     states = /* @__PURE__ */ new Map();
     stateIndices = /* @__PURE__ */ new Map();
     effects = /* @__PURE__ */ new Map();
@@ -380,15 +881,139 @@ var init_dist = __esm({
     globalRenderCallback = null;
     globalContainer = null;
     currentElement = null;
-    isServer = typeof window === "undefined";
-    serverStates = /* @__PURE__ */ new Map();
-    Fragment = ({ children }) => children;
-    isHydrating = false;
-    server = {
-      async getServer() {
-        throw new Error("Server module can only be used in Node.js environment");
+    Component = class {
+      constructor(props = {}) {
+        this.state = {};
+        this.element = null;
+        this._mounted = false;
+        this.props = props;
+      }
+      componentDidMount() {
+      }
+      async setState(newState) {
+        const prevState = { ...this.state };
+        this.state = { ...prevState, ...newState };
+        console.log(`${this.constructor.name} state updated:`, {
+          prev: prevState,
+          next: this.state
+        });
+        await Promise.resolve();
+        if (this._mounted) {
+          await this.update();
+        } else {
+          await this.update();
+        }
+      }
+      _replayEvents(oldElement, newElement) {
+        const oldEvents = oldElement.__events || {};
+        Object.entries(oldEvents).forEach(([event, handler]) => {
+          newElement.addEventListener(event, handler);
+        });
+        newElement.__events = oldEvents;
+      }
+      _deepCloneWithEvents(node) {
+        const clone = node.cloneNode(false);
+        const events = node.__events || {};
+        clone.__events = events;
+        Object.entries(events).forEach(([event, handler]) => {
+          clone.addEventListener(event, handler);
+        });
+        Array.from(node.childNodes).forEach((child) => {
+          if (child instanceof HTMLElement) {
+            clone.appendChild(this._deepCloneWithEvents(child));
+          } else {
+            clone.appendChild(child.cloneNode(true));
+          }
+        });
+        return clone;
+      }
+      async update() {
+        const vdom = this.render();
+        if (!vdom)
+          return document.createTextNode("");
+        const rendered = await createElement(vdom);
+        if (rendered instanceof HTMLElement) {
+          return this._updateElement(rendered);
+        }
+        const wrapper = document.createElement("div");
+        wrapper.appendChild(rendered);
+        return this._updateElement(wrapper);
+      }
+      async _updateElement(rendered) {
+        const newElement = this._deepCloneWithEvents(rendered);
+        newElement.__instance = this;
+        if (!this.element) {
+          this.element = newElement;
+          if (!this._mounted) {
+            this._mounted = true;
+            queueMicrotask(() => this.componentDidMount());
+          }
+        } else if (this.element.parentNode) {
+          this.element.parentNode.replaceChild(newElement, this.element);
+          this.element = newElement;
+        }
+        return this.element;
+      }
+      render() {
+        throw new Error("Component must implement render() method");
+      }
+    };
+    RouterContext = createContext({
+      location: {
+        pathname: "/",
+        search: "",
+        hash: ""
+      },
+      params: {},
+      navigate: () => {
+      },
+      match: () => false
+    });
+    globalEventBus = createEventBus();
+    StoreContext = createContext({
+      store: {
+        getState: () => ({}),
+        dispatch: () => {
+        },
+        subscribe: () => () => {
+        }
+      },
+      state: {}
+    });
+    logger = (store) => (next) => (action) => {
+      console.group(action.type);
+      console.log("Previous state:", store.getState());
+      console.log("Action:", action);
+      const result = next(action);
+      console.log("Next state:", store.getState());
+      console.groupEnd();
+      return result;
+    };
+    thunk = (store) => (next) => (action) => {
+      if (typeof action === "function") {
+        return action(store.dispatch, store.getState);
       }
+      return next(action);
     };
+    (function(LifecycleEvents2) {
+      LifecycleEvents2["APP_INIT"] = "app:init";
+      LifecycleEvents2["APP_MOUNTED"] = "app:mounted";
+      LifecycleEvents2["APP_UPDATED"] = "app:updated";
+      LifecycleEvents2["APP_ERROR"] = "app:error";
+      LifecycleEvents2["APP_DESTROYED"] = "app:destroyed";
+      LifecycleEvents2["COMPONENT_CREATED"] = "component:created";
+      LifecycleEvents2["COMPONENT_MOUNTED"] = "component:mounted";
+      LifecycleEvents2["COMPONENT_UPDATED"] = "component:updated";
+      LifecycleEvents2["COMPONENT_ERROR"] = "component:error";
+      LifecycleEvents2["COMPONENT_UNMOUNTED"] = "component:unmounted";
+      LifecycleEvents2["ROUTER_BEFORE_CHANGE"] = "router:before-change";
+      LifecycleEvents2["ROUTER_AFTER_CHANGE"] = "router:after-change";
+      LifecycleEvents2["ROUTER_ERROR"] = "router:error";
+      LifecycleEvents2["STORE_INITIALIZED"] = "store:initialized";
+      LifecycleEvents2["STORE_BEFORE_ACTION"] = "store:before-action";
+      LifecycleEvents2["STORE_AFTER_ACTION"] = "store:after-action";
+      LifecycleEvents2["STORE_ERROR"] = "store:error";
+    })(LifecycleEvents || (LifecycleEvents = {}));
   }
 });
 
@@ -1342,13 +1967,13 @@ function createDevServer(options = {}) {
   });
 }
 function createProductionServer(config) {
-  const server2 = new Server({
+  const server = new Server({
     ...config,
     // Fix the PORT parsing
     port: config.port || (process.env.PORT ? parseInt(process.env.PORT) : 8080)
   });
-  server2.addShutdownHandler();
-  return server2;
+  server.addShutdownHandler();
+  return server;
 }
 function getRequestIp(req) {
   return req.ip || req.headers["x-forwarded-for"]?.split(",")[0].trim() || req.socket.remoteAddress || "";
@@ -1559,13 +2184,14 @@ var init_server = __esm({
               // Could be parsed from URL
               api: { serverTime: (/* @__PURE__ */ new Date()).toISOString() }
             };
-            const { html, success, error } = await renderComponent(PageComponent, initialProps);
-            if (!success) {
+            const renderResult = await renderComponent(PageComponent, initialProps);
+            if (!renderResult.success) {
               return {
-                html: generateErrorPage(500, "Failed to render page", error instanceof Error ? error : new Error("Unknown error")),
+                html: generateErrorPage(500, "Failed to render page", renderResult.error instanceof Error ? renderResult.error : new Error("Unknown error")),
                 statusCode: 500
               };
             }
+            const htmlContent = renderResult.html;
             let pageTitle = "My App";
             try {
               if (typeof PageComponent.getTitle === "function") {
@@ -1576,7 +2202,7 @@ var init_server = __esm({
             } catch (e) {
             }
             const componentName = getComponentName(pagePath, pagesDir);
-            const fullHtml = generateDocument(html, {
+            const fullHtml = generateDocument(htmlContent, {
               title: pageTitle,
               // Get description from component if available
               description: typeof PageComponent.getDescription === "function" ? PageComponent.getDescription(initialProps) : PageComponent.description || "",
@@ -1694,11 +2320,11 @@ var init_server = __esm({
         process.on("SIGINT", gracefulShutdown);
       }
     };
-    renderComponent = async (Component, props = {}) => {
+    renderComponent = (Component2, props = {}) => {
       try {
-        const html = renderToString(Component(props));
+        const html = renderToString(Component2(props));
         return {
-          html,
+          html: typeof html === "string" ? html : String(html),
           success: true
         };
       } catch (error) {
@@ -1955,34 +2581,57 @@ if (isNode && !isBrowser) {
 }
 function renderToString3(content) {
   if (typeof content === "string") {
-    return Promise.resolve(content);
+    return content;
   }
   if (typeof content === "function") {
     try {
       const result = content();
-      return Promise.resolve(String(result));
+      return String(result);
     } catch (error) {
-      return Promise.resolve(`<!-- Error rendering: ${error} -->`);
+      return `<!-- Error rendering: ${error} -->`;
     }
   }
-  return Promise.resolve(String(content));
+  return String(content);
 }
 console.log("Baraqex - powered by Frontend Hamroun Framework with additional utilities");
 export {
   ApiRouter2 as ApiRouter,
   AuthService2 as AuthService,
   BaraqexServer,
+  Component,
   Database2 as Database,
   Fragment,
+  LifecycleEvents,
+  Link,
+  Redirect,
+  Route,
+  RouterProvider,
+  StoreProvider,
+  Switch,
   baraqexRenderToString,
   batchUpdates,
   callWasmFunction,
   createContext,
   createDevServer2 as createDevServer,
+  createElement,
+  createEventBus,
   createProductionServer2 as createProductionServer,
   createServer2 as createServer,
+  createStore,
+  diff,
+  emitAppDestroyed,
+  emitAppError,
+  emitAppInit,
+  emitAppMounted,
+  emitAppUpdated,
+  emitComponentCreated,
+  emitComponentError,
+  emitComponentMounted,
+  emitComponentUnmounted,
+  emitComponentUpdated,
   ensureDirectory2 as ensureDirectory,
   errorHandler2 as errorHandler,
+  globalEventBus as eventBus,
   generateDocument,
   generateErrorPage,
   generateLoadingPage,
@@ -1996,10 +2645,22 @@ export {
   isDirectoryEmpty2 as isDirectoryEmpty,
   isWasmReady,
   jsx,
+  jsx as jsxDEV,
   jsx as jsxs,
   loadGoWasm,
   loadGoWasmFromFile2 as loadGoWasmFromFile,
+  logger,
   notFoundHandler2 as notFoundHandler,
+  onAppDestroyed,
+  onAppError,
+  onAppInit,
+  onAppMounted,
+  onAppUpdated,
+  onComponentCreated,
+  onComponentError,
+  onComponentMounted,
+  onComponentUnmounted,
+  onComponentUpdated,
   rateLimit2 as rateLimit,
   readJsonFile2 as readJsonFile,
   render,
@@ -2009,14 +2670,23 @@ export {
   safeJsonParse2 as safeJsonParse,
   sendError2 as sendError,
   sendSuccess2 as sendSuccess,
-  server,
+  shouldComponentUpdate,
+  thunk,
   useContext,
+  useDispatch,
   useEffect,
   useErrorBoundary,
+  useEvent,
+  useForm,
   useGoWasm,
+  useLocation,
   useMemo,
+  useNavigate,
+  useParams,
   useRef,
+  useSelector,
   useState,
+  useStore,
   validateFields2 as validateFields,
   validateFileUpload2 as validateFileUpload,
   writeJsonFile2 as writeJsonFile