frontend-hamroun 1.2.80 → 1.2.83

package/templates/ssr-template/dist/client.js

@@ -0,0 +1,951 @@
+// node_modules/frontend-hamroun/dist/index.mjs
+var isBatching = false;
+var queue = [];
+function batchUpdates(fn) {
+  if (isBatching) {
+    queue.push(fn);
+    return;
+  }
+  isBatching = true;
+  try {
+    fn();
+    while (queue.length > 0) {
+      const nextFn = queue.shift();
+      nextFn == null ? void 0 : nextFn();
+    }
+  } finally {
+    isBatching = false;
+  }
+}
+var currentRender = 0;
+var states = /* @__PURE__ */ new Map();
+var stateIndices = /* @__PURE__ */ new Map();
+var effects = /* @__PURE__ */ new Map();
+var memos = /* @__PURE__ */ new Map();
+var globalRenderCallback = null;
+var globalContainer = null;
+var currentElement = null;
+var isServer = typeof window === "undefined";
+var serverStates = /* @__PURE__ */ new Map();
+function setRenderCallback(callback, element, container) {
+  globalRenderCallback = callback;
+  globalContainer = container;
+  currentElement = element;
+}
+function prepareRender() {
+  currentRender++;
+  stateIndices.set(currentRender, 0);
+  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);
+  if (index >= componentStates.length) {
+    componentStates.push(initial);
+  }
+  const state = componentStates[index];
+  const setState = (newValue) => {
+    const nextValue = typeof newValue === "function" ? newValue(componentStates[index]) : newValue;
+    if (componentStates[index] === nextValue)
+      return;
+    componentStates[index] = nextValue;
+    if (isBatching) {
+      batchUpdates(() => rerender(currentRender));
+    } else {
+      rerender(currentRender);
+    }
+  };
+  stateIndices.set(currentRender, index + 1);
+  return [state, setState];
+}
+function useEffect(callback, deps) {
+  if (!currentRender)
+    throw new Error("useEffect must be called within a render");
+  const effectIndex = stateIndices.get(currentRender);
+  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) {
+      prevEffect.cleanup();
+    }
+    queueMicrotask(() => {
+      const cleanup = callback() || void 0;
+      componentEffects[effectIndex] = { cleanup, deps };
+    });
+  }
+  stateIndices.set(currentRender, effectIndex + 1);
+}
+function useMemo(factory, deps) {
+  if (!currentRender)
+    throw new Error("useMemo must be called within a render");
+  const memoIndex = stateIndices.get(currentRender);
+  if (!memos.has(currentRender)) {
+    memos.set(currentRender, []);
+  }
+  const componentMemos = memos.get(currentRender);
+  const prevMemo = componentMemos[memoIndex];
+  if (!prevMemo || deps && deps.some((dep, i) => !Object.is(dep, prevMemo.deps[i]))) {
+    const value = factory();
+    componentMemos[memoIndex] = { value, deps };
+    stateIndices.set(currentRender, memoIndex + 1);
+    return value;
+  }
+  stateIndices.set(currentRender, memoIndex + 1);
+  return prevMemo.value;
+}
+async function rerender(rendererId) {
+  try {
+    const componentEffects = effects.get(rendererId);
+    if (componentEffects) {
+      componentEffects.forEach((effect) => {
+        if (effect.cleanup)
+          effect.cleanup();
+      });
+      effects.set(rendererId, []);
+    }
+    if (globalRenderCallback && globalContainer && currentElement) {
+      await globalRenderCallback(currentElement, globalContainer);
+    }
+  } catch (error) {
+    console.error("Error during rerender:", error);
+  }
+}
+function useErrorBoundary() {
+  const [error, setError] = useState(null);
+  return [error, () => setError(null)];
+}
+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) {
+  var _a;
+  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 = (_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));
+      }
+    }
+    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));
+}
+var isHydrating = false;
+async function hydrate(element, container) {
+  isHydrating = true;
+  try {
+    await render(element, container);
+  } finally {
+    isHydrating = false;
+  }
+}
+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 = "";
+      }
+      container.appendChild(domNode);
+    } finally {
+      finishRender();
+    }
+  });
+}
+
+// src/App.tsx
+function TodoItem({ todo, onToggle, onDelete }) {
+  return /* @__PURE__ */ jsx("div", { className: `todo-item ${todo.completed ? "completed" : ""}` }, /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      checked: todo.completed,
+      onChange: () => onToggle(todo.id),
+      className: "todo-checkbox"
+    }
+  ), /* @__PURE__ */ jsx("span", { className: "todo-text" }, todo.text), /* @__PURE__ */ jsx("span", { className: `todo-priority priority-${todo.priority}` }, todo.priority === "high" && "\u{1F534}", todo.priority === "medium" && "\u{1F7E1}", todo.priority === "low" && "\u{1F7E2}", todo.priority), /* @__PURE__ */ jsx("div", { className: "todo-actions" }, /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onDelete(todo.id),
+      className: "btn btn-sm btn-danger",
+      title: "Delete todo"
+    },
+    "\u{1F5D1}\uFE0F"
+  )));
+}
+function ThemeToggleButton({ theme, onToggle }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: onToggle,
+      className: "btn btn-secondary theme-toggle",
+      title: "Toggle theme"
+    },
+    theme === "light" ? "\u{1F319}" : "\u2600\uFE0F"
+  );
+}
+function AppFooter({ theme, isBrowser }) {
+  return /* @__PURE__ */ jsx("footer", { className: "app-footer" }, /* @__PURE__ */ jsx("div", { className: "container" }, /* @__PURE__ */ jsx("p", null, "Built with Frontend Hamroun \u2022 Hooks: useState, useEffect, useMemo, useErrorBoundary"), /* @__PURE__ */ jsx("p", null, "Theme: ", /* @__PURE__ */ jsx("strong", null, theme), " \u2022 Environment: ", /* @__PURE__ */ jsx("strong", null, isBrowser ? "Client" : "Server"))));
+}
+function App() {
+  const [todos, setTodos] = useState([
+    { id: 1, text: "Learn Frontend Hamroun hooks", completed: false, priority: "high" },
+    { id: 2, text: "Build a todo app", completed: false, priority: "medium" },
+    { id: 3, text: "Master SSR concepts", completed: true, priority: "low" }
+  ]);
+  const [newTask, setNewTask] = useState("");
+  const [taskFilter, setTaskFilter] = useState("all");
+  const [taskPriority, setTaskPriority] = useState("medium");
+  const [theme, setTheme] = useState("light");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, resetError] = useErrorBoundary();
+  const isBrowser = typeof window !== "undefined";
+  useEffect(() => {
+    if (!isBrowser)
+      return;
+    console.log("Todo App mounted");
+    const savedTodos = localStorage.getItem("todos");
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTodos) {
+      try {
+        setTodos(JSON.parse(savedTodos));
+      } catch (e) {
+        console.error("Failed to load saved todos");
+      }
+    }
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+    return () => {
+      console.log("Todo App unmounting");
+    };
+  }, []);
+  useEffect(() => {
+    if (!isBrowser)
+      return;
+    document.body.className = `theme-${theme}`;
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme, isBrowser]);
+  useEffect(() => {
+    if (!isBrowser || todos.length === 0)
+      return;
+    localStorage.setItem("todos", JSON.stringify(todos));
+  }, [todos, isBrowser]);
+  const filteredTodos = useMemo(() => {
+    console.log("Filtering todos - memoized computation");
+    return todos.filter((todo) => {
+      if (taskFilter === "completed")
+        return todo.completed;
+      if (taskFilter === "active")
+        return !todo.completed;
+      if (taskFilter === "high")
+        return todo.priority === "high";
+      if (taskFilter === "medium")
+        return todo.priority === "medium";
+      if (taskFilter === "low")
+        return todo.priority === "low";
+      return true;
+    });
+  }, [todos, taskFilter]);
+  const todoStats = useMemo(() => {
+    const total = todos.length;
+    const completed = todos.filter((t) => t.completed).length;
+    const active = total - completed;
+    const highPriority = todos.filter((t) => t.priority === "high" && !t.completed).length;
+    return { total, completed, active, highPriority };
+  }, [todos]);
+  const handleToggleTodo = (id) => {
+    console.log("Toggling todo:", id);
+    setTodos((prev) => prev.map(
+      (todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+  const handleDeleteTodo = (id) => {
+    console.log("Deleting todo:", id);
+    setTodos((prev) => prev.filter((todo) => todo.id !== id));
+  };
+  const handleAddTodo = (text, priority) => {
+    if (!text || !text.trim())
+      return;
+    const newTodo = {
+      id: Date.now(),
+      text: text.trim(),
+      completed: false,
+      priority: priority || "medium"
+    };
+    setTodos((prev) => [...prev, newTodo]);
+  };
+  const addTask = () => {
+    if (newTask.trim()) {
+      setIsLoading(true);
+      setTimeout(() => {
+        handleAddTodo(newTask, taskPriority);
+        setNewTask("");
+        setIsLoading(false);
+      }, 300);
+    }
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      addTask();
+    }
+  };
+  const clearCompleted = () => {
+    setTodos((prev) => prev.filter((todo) => !todo.completed));
+  };
+  const markAllComplete = () => {
+    setTodos((prev) => prev.map((todo) => ({ ...todo, completed: true })));
+  };
+  const toggleTheme = () => {
+    setTheme((prev) => prev === "light" ? "dark" : "light");
+  };
+  const simulateError = () => {
+    throw new Error("Simulated error for testing error boundary");
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "error-container" }, /* @__PURE__ */ jsx("h2", null, "Something went wrong!"), /* @__PURE__ */ jsx("p", null, error.message), /* @__PURE__ */ jsx("button", { onClick: resetError, className: "btn btn-primary" }, "Try Again"));
+  }
+  return /* @__PURE__ */ jsx("div", { className: `app theme-${theme}` }, /* @__PURE__ */ jsx("header", { className: "app-header" }, /* @__PURE__ */ jsx("div", { className: "container" }, /* @__PURE__ */ jsx("h1", { className: "app-title" }, "\u{1F4DD} Todo App", /* @__PURE__ */ jsx("span", { className: "subtitle" }, "Built with Frontend Hamroun")), /* @__PURE__ */ jsx("div", { className: "header-controls" }, /* @__PURE__ */ jsx(ThemeToggleButton, { theme, onToggle: toggleTheme }), /* @__PURE__ */ jsx("div", { className: "stats" }, /* @__PURE__ */ jsx("span", { className: "stat" }, "Total: ", /* @__PURE__ */ jsx("strong", null, todoStats.total)), /* @__PURE__ */ jsx("span", { className: "stat" }, "Active: ", /* @__PURE__ */ jsx("strong", null, todoStats.active)), /* @__PURE__ */ jsx("span", { className: "stat" }, "Done: ", /* @__PURE__ */ jsx("strong", null, todoStats.completed)))))), /* @__PURE__ */ jsx("main", { className: "main-content" }, /* @__PURE__ */ jsx("div", { className: "container" }, /* @__PURE__ */ jsx("section", { className: "card add-todo-section" }, /* @__PURE__ */ jsx("h2", null, "\u2795 Add New Todo"), /* @__PURE__ */ jsx("div", { className: "add-todo-form" }, /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value: newTask,
+      onChange: (e) => setNewTask(e.target.value),
+      onKeyPress: handleKeyPress,
+      placeholder: "What needs to be done?",
+      className: "input todo-input",
+      disabled: isLoading
+    }
+  ), /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: taskPriority,
+      onChange: (e) => setTaskPriority(e.target.value),
+      className: "select priority-select",
+      disabled: isLoading
+    },
+    /* @__PURE__ */ jsx("option", { value: "low" }, "\u{1F7E2} Low Priority"),
+    /* @__PURE__ */ jsx("option", { value: "medium" }, "\u{1F7E1} Medium Priority"),
+    /* @__PURE__ */ jsx("option", { value: "high" }, "\u{1F534} High Priority")
+  ), /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: addTask,
+      className: `btn btn-primary add-btn ${isLoading ? "loading" : ""}`,
+      disabled: isLoading || !newTask.trim()
+    },
+    isLoading ? "\u23F3 Adding..." : "\u2795 Add Todo"
+  ))), /* @__PURE__ */ jsx("section", { className: "card filters-section" }, /* @__PURE__ */ jsx("h2", null, "\u{1F50D} Filter Todos"), /* @__PURE__ */ jsx("div", { className: "filters" }, ["all", "active", "completed", "high", "medium", "low"].map((filterType) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      key: filterType,
+      onClick: () => setTaskFilter(filterType),
+      className: `btn btn-sm filter-btn ${taskFilter === filterType ? "btn-primary" : "btn-outline"}`
+    },
+    filterType === "all" && "\u{1F4CB} All",
+    filterType === "active" && "\u23F3 Active",
+    filterType === "completed" && "\u2705 Completed",
+    filterType === "high" && "\u{1F534} High Priority",
+    filterType === "medium" && "\u{1F7E1} Medium Priority",
+    filterType === "low" && "\u{1F7E2} Low Priority"
+  ))), /* @__PURE__ */ jsx("div", { className: "bulk-actions" }, /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: markAllComplete,
+      className: "btn btn-success btn-sm",
+      disabled: todoStats.active === 0
+    },
+    "\u2705 Mark All Complete"
+  ), /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: clearCompleted,
+      className: "btn btn-warning btn-sm",
+      disabled: todoStats.completed === 0
+    },
+    "\u{1F5D1}\uFE0F Clear Completed"
+  ))), /* @__PURE__ */ jsx("section", { className: "card todos-section" }, /* @__PURE__ */ jsx("div", { className: "section-header" }, /* @__PURE__ */ jsx("h2", null, "\u{1F4CB} Todo List"), /* @__PURE__ */ jsx("div", { className: "filter-info" }, "Showing ", /* @__PURE__ */ jsx("strong", null, filteredTodos.length), " of ", /* @__PURE__ */ jsx("strong", null, todoStats.total), " todos", taskFilter !== "all" && /* @__PURE__ */ jsx("span", { className: "filter-badge" }, taskFilter))), /* @__PURE__ */ jsx("div", { className: "todos-list" }, filteredTodos.length > 0 ? filteredTodos.map((todo) => /* @__PURE__ */ jsx(
+    TodoItem,
+    {
+      key: todo.id,
+      todo,
+      onToggle: handleToggleTodo,
+      onDelete: handleDeleteTodo
+    }
+  )) : /* @__PURE__ */ jsx("div", { className: "empty-state" }, /* @__PURE__ */ jsx("p", null, taskFilter === "all" ? "\u{1F389} No todos yet. Add one above!" : taskFilter === "completed" ? "\u{1F4DD} No completed todos yet." : taskFilter === "active" ? "\u{1F3AF} No active todos. Great job!" : `\u{1F50D} No ${taskFilter} priority todos found.`)))), /* @__PURE__ */ jsx("section", { className: "card actions-section" }, /* @__PURE__ */ jsx("h2", null, "\u2699\uFE0F Actions"), /* @__PURE__ */ jsx("div", { className: "action-buttons" }, /* @__PURE__ */ jsx("button", { onClick: simulateError, className: "btn btn-danger" }, "\u{1F4A5} Test Error Boundary"))))), /* @__PURE__ */ jsx(AppFooter, { theme, isBrowser }), /* @__PURE__ */ jsx("style", null, `
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+
+        :root {
+          --primary: #3b82f6;
+          --primary-dark: #2563eb;
+          --secondary: #6b7280;
+          --success: #10b981;
+          --warning: #f59e0b;
+          --danger: #ef4444;
+          --background: #ffffff;
+          --surface: #f9fafb;
+          --text: #111827;
+          --text-muted: #6b7280;
+          --border: #e5e7eb;
+          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+        }
+
+        [data-theme="dark"] {
+          --primary: #3b82f6;
+          --secondary: #9ca3af;
+          --success: #10b981;
+          --warning: #f59e0b;
+          --danger: #ef4444;
+          --background: #111827;
+          --surface: #1f2937;
+          --text: #f9fafb;
+          --text-muted: #9ca3af;
+          --border: #374151;
+        }
+
+        body {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          line-height: 1.6;
+          color: var(--text);
+          background-color: var(--background);
+          transition: all 0.3s ease;
+        }
+
+        .app {
+          min-height: 100vh;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .container {
+          max-width: 800px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+
+        /* Header */
+        .app-header {
+          background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+          color: white;
+          padding: 2rem 0;
+          box-shadow: var(--shadow-lg);
+        }
+
+        .app-header .container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+
+        .app-title {
+          font-size: 2rem;
+          font-weight: 700;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+        }
+
+        .subtitle {
+          font-size: 1rem;
+          font-weight: 400;
+          opacity: 0.9;
+        }
+
+        .header-controls {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+
+        .stats {
+          display: flex;
+          gap: 1rem;
+          font-size: 0.875rem;
+        }
+
+        .stat {
+          background: rgba(255, 255, 255, 0.2);
+          padding: 0.5rem 0.75rem;
+          border-radius: 0.5rem;
+          backdrop-filter: blur(10px);
+        }
+
+        /* Main content */
+        .main-content {
+          flex: 1;
+          padding: 2rem 0;
+        }
+
+        /* Cards */
+        .card {
+          background: var(--surface);
+          border-radius: 1rem;
+          padding: 1.5rem;
+          margin-bottom: 1.5rem;
+          box-shadow: var(--shadow);
+          border: 1px solid var(--border);
+          transition: transform 0.2s ease;
+        }
+
+        .card:hover {
+          transform: translateY(-2px);
+        }
+
+        .card h2 {
+          font-size: 1.25rem;
+          margin-bottom: 1rem;
+          color: var(--text);
+        }
+
+        /* Add Todo Form */
+        .add-todo-form {
+          display: flex;
+          gap: 0.75rem;
+          flex-wrap: wrap;
+        }
+
+        .todo-input {
+          flex: 1;
+          min-width: 250px;
+        }
+
+        .priority-select {
+          min-width: 150px;
+        }
+
+        /* Filters */
+        .filters {
+          display: flex;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+        }
+
+        .filter-btn {
+          font-size: 0.875rem;
+        }
+
+        .bulk-actions {
+          display: flex;
+          gap: 0.5rem;
+          flex-wrap: wrap;
+        }
+
+        /* Section Header */
+        .section-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+
+        .filter-info {
+          font-size: 0.875rem;
+          color: var(--text-muted);
+        }
+
+        .filter-badge {
+          background: var(--primary);
+          color: white;
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.75rem;
+          margin-left: 0.5rem;
+        }
+
+        /* Todos List */
+        .todos-list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        .todo-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 1rem;
+          background: var(--background);
+          border-radius: 0.5rem;
+          border: 1px solid var(--border);
+          transition: all 0.2s ease;
+        }
+
+        .todo-item:hover {
+          border-color: var(--primary);
+          box-shadow: var(--shadow);
+        }
+
+        .todo-item.completed {
+          opacity: 0.7;
+        }
+
+        .todo-item.completed .todo-text {
+          text-decoration: line-through;
+        }
+
+        .todo-checkbox {
+          width: 1.25rem;
+          height: 1.25rem;
+          cursor: pointer;
+        }
+
+        .todo-text {
+          flex: 1;
+          font-size: 1rem;
+        }
+
+        .todo-priority {
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+
+        .priority-high {
+          background: #fee2e2;
+          color: #991b1b;
+        }
+
+        .priority-medium {
+          background: #fef3c7;
+          color: #92400e;
+        }
+
+        .priority-low {
+          background: #dcfce7;
+          color: #166534;
+        }
+
+        .todo-actions {
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        /* Form elements */
+        .input, .select {
+          padding: 0.75rem;
+          border: 2px solid var(--border);
+          border-radius: 0.5rem;
+          font-size: 1rem;
+          background: var(--background);
+          color: var(--text);
+          transition: border-color 0.2s ease;
+        }
+
+        .input:focus, .select:focus {
+          outline: none;
+          border-color: var(--primary);
+        }
+
+        /* Buttons */
+        .btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          padding: 0.75rem 1.5rem;
+          border: none;
+          border-radius: 0.5rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          text-decoration: none;
+          user-select: none;
+        }
+
+        .btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .btn-sm {
+          padding: 0.5rem 1rem;
+          font-size: 0.75rem;
+        }
+
+        .btn-primary {
+          background: var(--primary);
+          color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+          background: var(--primary-dark);
+          transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+          background: var(--secondary);
+          color: white;
+        }
+
+        .btn-success {
+          background: var(--success);
+          color: white;
+        }
+
+        .btn-warning {
+          background: var(--warning);
+          color: white;
+        }
+
+        .btn-danger {
+          background: var(--danger);
+          color: white;
+        }
+
+        .btn-outline {
+          background: transparent;
+          color: var(--text);
+          border: 2px solid var(--border);
+        }
+
+        .btn-outline:hover:not(:disabled) {
+          background: var(--surface);
+          border-color: var(--primary);
+        }
+
+        .btn.loading {
+          position: relative;
+          color: transparent;
+        }
+
+        .btn.loading::after {
+          content: '';
+          position: absolute;
+          width: 1rem;
+          height: 1rem;
+          border: 2px solid transparent;
+          border-top: 2px solid currentColor;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+          color: white;
+        }
+
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+
+        .theme-toggle {
+          border-radius: 50%;
+          width: 3rem;
+          height: 3rem;
+          padding: 0;
+          font-size: 1.25rem;
+          background: rgba(255, 255, 255, 0.2);
+          color: white;
+          border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .theme-toggle:hover {
+          background: rgba(255, 255, 255, 0.3);
+          transform: scale(1.05);
+        }
+
+        /* Empty state */
+        .empty-state {
+          text-align: center;
+          padding: 3rem 1rem;
+          color: var(--text-muted);
+        }
+
+        .empty-state p {
+          font-size: 1.1rem;
+        }
+
+        /* Actions section */
+        .action-buttons {
+          display: flex;
+          gap: 1rem;
+          flex-wrap: wrap;
+        }
+
+        /* Footer */
+        .app-footer {
+          background: var(--surface);
+          border-top: 1px solid var(--border);
+          padding: 1.5rem 0;
+          text-align: center;
+          color: var(--text-muted);
+          font-size: 0.875rem;
+        }
+
+        .app-footer p {
+          margin: 0.25rem 0;
+        }
+
+        /* Error container */
+        .error-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+          padding: 2rem;
+          text-align: center;
+        }
+
+        .error-container h2 {
+          color: var(--danger);
+          margin-bottom: 1rem;
+        }
+
+        .error-container p {
+          color: var(--text-muted);
+          margin-bottom: 2rem;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+          .app-header .container {
+            flex-direction: column;
+            text-align: center;
+          }
+
+          .app-title {
+            font-size: 1.75rem;
+          }
+
+          .add-todo-form {
+            flex-direction: column;
+          }
+
+          .todo-input, .priority-select {
+            min-width: auto;
+            width: 100%;
+          }
+
+          .section-header {
+            flex-direction: column;
+            align-items: stretch;
+          }
+
+          .stats {
+            justify-content: center;
+          }
+
+          .filters {
+            justify-content: center;
+          }
+
+          .bulk-actions {
+            justify-content: center;
+          }
+        }
+
+        /* Smooth transitions */
+        * {
+          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+        }
+      `));
+}
+
+// src/client.tsx
+hydrate(jsx(App, {}), document.getElementById("root"));