xote 1.0.1 → 1.0.2

package/README.md

@@ -1,23 +1,36 @@
 # xote (pronounced [ˈʃɔtʃi])
+[![npm version](https://img.shields.io/npm/v/xote.svg)](https://www.npmjs.com/package/xote)
 
-A lightweight, zero-dependency UI library for ReScript with fine-grained reactivity powered by signals. Build reactive web applications with automatic dependency tracking and efficient updates.
+A lightweight, zero-dependency UI library for ReScript with fine-grained reactivity based on the [TC39 Signals proposal](https://github.com/tc39/proposal-signals). Build reactive web applications with automatic dependency tracking and efficient updates.
 
 ## Features
 
-- **Zero dependencies** - No runtime dependencies, pure ReScript implementation
-- **Reactive primitives** - Signals, computed values, and effects
-- **Component system** - Declarative UI components with automatic reactive updates
-- **Automatic dependency tracking** - No manual subscription management
-- **Batching and control** - Support for untracked reads and batched updates
-- **Lightweight** - Small bundle size, minimal overhead
+- Zero dependencies: pure ReScript implementation
+- Lightweight (~1kb) and efficient runtime
+- Declarative components for building reactive UIs (JSX support comming up soon)
+- Reactive primitives: signals, computed values, and effects
+- Automatic dependency tracking: no manual subscription management
+- Fine-grained updates: direct DOM updates without a virtual DOM
 
 ## Getting Started
 
-Comming soon.
-
 ### Installation
 
-Comming soon.
+```bash
+npm install xote
+# or
+yarn add xote
+# or
+pnpm add xote
+```
+
+Then, add it to your ReScript project’s dependencies in `rescript.json`:
+
+```json
+{
+  "bs-dependencies": ["xote"]
+}
+```
 
 ### Quick Example
 
@@ -27,13 +40,13 @@ open Xote
 // Create reactive state
 let count = Signal.make(0)
 
-// Create computed values
+// Derived value
 let doubled = Computed.make(() => Signal.get(count) * 2)
 
-// Define event handlers
+// Event handler
 let increment = (_evt: Dom.event) => Signal.update(count, n => n + 1)
 
-// Build your UI
+// Build the UI
 let app = Component.div(
   ~children=[
     Component.h1(~children=[Component.text("Counter")], ()),
@@ -51,266 +64,26 @@ let app = Component.div(
   ()
 )
 
-// Mount to DOM
+// Mount to the DOM
 Component.mountById(app, "app")
 ```
 
-## API Reference
-
-### Signals - Reactive State
-
-Signals are the foundation of reactive state management in Xote.
-
-```rescript
-// Create a signal with initial value
-let count = Signal.make(0)
-
-// Read signal value (tracks dependencies)
-let value = Signal.get(count) // => 0
-
-// Read without tracking
-let value = Signal.peek(count) // => 0
-
-// Update signal value
-Signal.set(count, 1)
-
-// Update with a function
-Signal.update(count, n => n + 1)
-```
-
-### Computed - Derived State
-
-Computed values automatically update when their dependencies change.
-
-```rescript
-let count = Signal.make(5)
-
-// Computed values are signals that derive from other signals
-let doubled = Computed.make(() => Signal.get(count) * 2)
-
-Signal.get(doubled) // => 10
-
-Signal.set(count, 10)
-Signal.get(doubled) // => 20
-```
-
-### Effects - Side Effects
-
-Effects run automatically when their dependencies change.
-
-```rescript
-let count = Signal.make(0)
-
-// Effect runs immediately and re-runs when count changes
-let disposer = Effect.run(() => {
-  Console.log("Count is now: " ++ Int.toString(Signal.get(count)))
-})
-
-Signal.set(count, 1) // Logs: "Count is now: 1"
-
-// Clean up effect
-disposer.dispose()
-```
-
-### Components - Building UI
-
-#### Basic Elements
-
-```rescript
-// Text nodes
-Component.text("Hello, world!")
-
-// Reactive text from signals
-let name = Signal.make("Alice")
-Component.textSignal(
-  Computed.make(() => "Hello, " ++ Signal.get(name))
-)
-
-// HTML elements
-Component.div(
-  ~attrs=[("class", "container"), ("id", "main")],
-  ~events=[("click", handleClick)],
-  ~children=[
-    Component.h1(~children=[Component.text("Title")], ()),
-    Component.p(~children=[Component.text("Content")], ())
-  ],
-  ()
-)
-```
-
-#### Reactive Lists
-
-Render lists that automatically update when data changes:
-
-```rescript
-let todos = Signal.make([
-  {id: 1, text: "Learn Xote"},
-  {id: 2, text: "Build an app"}
-])
-
-let todoItem = (todo) => {
-  Component.li(~children=[Component.text(todo.text)], ())
-}
-
-Component.ul(
-  ~children=[Component.list(todos, todoItem)],
-  ()
-)
-// List updates automatically when todos signal changes!
-```
-
-#### Event Handling
-
-```rescript
-let handleClick = (evt: Dom.event) => {
-  Console.log("Clicked!")
-}
-
-Component.button(
-  ~events=[("click", handleClick), ("mouseenter", handleHover)],
-  ~children=[Component.text("Click me")],
-  ()
-)
-```
-
-### Utilities
-
-#### Untracked Reads
-
-Read signals without creating dependencies.
-
-```rescript
-Core.untrack(() => {
-  let value = Signal.get(count) // Won't track this read
-  Console.log(value)
-})
-```
-
-#### Batching Updates
-
-Group multiple updates to run effects only once.
-
-```rescript
-Core.batch(() => {
-  Signal.set(count1, 10)
-  Signal.set(count2, 20)
-  Signal.set(count3, 30)
-})
-// Effects run once after all updates
-```
-
-## Complete Example
-
-### Counter Application
-
-```rescript
-open Xote
-
-// State management
-let counterValue = Signal.make(0)
-
-// Derived state
-let counterDisplay = Computed.make(() =>
-  "Count: " ++ Int.toString(Signal.get(counterValue))
-)
-
-let isEven = Computed.make(() =>
-  mod(Signal.get(counterValue), 2) == 0
-)
-
-// Event handlers
-let increment = (_evt: Dom.event) => {
-  Signal.update(counterValue, n => n + 1)
-}
-
-let decrement = (_evt: Dom.event) => {
-  Signal.update(counterValue, n => n - 1)
-}
-
-let reset = (_evt: Dom.event) => {
-  Signal.set(counterValue, 0)
-}
-
-// Side effects
-let _ = Effect.run(() => {
-  Console.log("Counter changed: " ++ Int.toString(Signal.get(counterValue)))
-})
-
-// UI Component
-let app = Component.div(
-  ~attrs=[("class", "app")],
-  ~children=[
-    Component.h1(~children=[Component.text("Xote Counter")], ()),
-
-    Component.div(
-      ~attrs=[("class", "counter-display")],
-      ~children=[
-        Component.h2(~children=[Component.textSignal(counterDisplay)], ()),
-        Component.p(~children=[
-          Component.textSignal(
-            Computed.make(() =>
-              Signal.get(isEven) ? "Even" : "Odd"
-            )
-          )
-        ], ())
-      ],
-      ()
-    ),
-
-    Component.div(
-      ~attrs=[("class", "controls")],
-      ~children=[
-        Component.button(
-          ~events=[("click", decrement)],
-          ~children=[Component.text("-")],
-          ()
-        ),
-        Component.button(
-          ~events=[("click", reset)],
-          ~children=[Component.text("Reset")],
-          ()
-        ),
-        Component.button(
-          ~events=[("click", increment)],
-          ~children=[Component.text("+")],
-          ()
-        )
-      ],
-      ()
-    )
-  ],
-  ()
-)
-
-// Mount to DOM
-Component.mountById(app, "app")
-```
+Classic counter: when you click the button, the counter updates reactively.
 
-## How It Works
+## Philosophy
 
-### Reactive System
+Xote focuses on clarity, control, and performance. It brings reactive programming to ReScript with minimal abstractions and no runtime dependencies. The goal is to offer precise, fine-grained updates and predictable behavior without a virtual DOM.
 
-- **Automatic dependency tracking** - When you read a signal with `Signal.get()` inside a computed or effect, it automatically tracks that dependency
-- **Fine-grained updates** - Only the specific computeds and effects that depend on changed signals are re-executed
-- **Synchronous by default** - Updates happen immediately and synchronously for predictable behavior
-- **Batching support** - Group multiple updates to minimize re-computation
+## Core Concepts
 
-### Component Rendering
+- **Signal**: Reactive state container  
+- **Computed**: Derived reactive value that updates automatically  
+- **Effect**: Function that re-runs when dependencies change  
+- **Component**: Declarative UI builder using ReScript functions  
 
-- **Initial render** - Components are rendered to real DOM elements on mount
-- **Reactive text** - `textSignal()` creates text nodes that automatically update when their signal changes
-- **Reactive lists** - `Component.list()` creates lists that automatically update when data changes
-- **Direct DOM manipulation** - No virtual DOM diffing, updates are precise and efficient
-- **Effect-based** - Signal changes trigger effects that update specific DOM nodes automatically
+For a more complete example, see the full [Todo App example](https://github.com/brnrdog/xote/blob/main/src/demo/Xote__TodoApp.res).
 
-## Best Practices
 
-1. **Keep signals at the top level** - Define signals outside component definitions for proper reactivity
-2. **Use computed for derived state** - Don't repeat calculations, use `Computed.make()`
-3. **Use `Component.list()` for reactive arrays** - Let the framework handle list updates automatically
-4. **Batch related updates** - Use `Core.batch()` when updating multiple signals together
-5. **Dispose effects when done** - Call `disposer.dispose()` for effects you no longer need
-6. **Use `peek()` when you don't want tracking** - Read signal values without creating dependencies
 
 ## License
 

package/docs/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.0.2](https://github.com/brnrdog/xote/compare/v1.0.1...v1.0.2) (2025-10-30)
+
+
+### Bug Fixes
+
+* version bump ([2794ae6](https://github.com/brnrdog/xote/commit/2794ae697f5c3448d946b9fc5c7d1c0defa8be1a))
+
 ## [1.0.1](https://github.com/brnrdog/xote/compare/v1.0.0...v1.0.1) (2025-10-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xote",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "repository": {
     "url": "https://github.com/brnrdog/xote"
   },
@@ -14,7 +14,9 @@
   },
   "keywords": [
     "rescript",
-    "signals"
+    "signals",
+    "xote",
+    "reactivity"
   ],
   "release": {
     "branches": [

package/src/demo/TodoApp.res

@@ -0,0 +1,289 @@
+open Xote
+
+type todo = {
+  id: int,
+  text: string,
+  completed: bool,
+}
+
+let todos = Signal.make([{id: 1, text: "Buy Milk", completed: true}])
+let nextId = ref(0)
+let inputValue = Signal.make("")
+let darkMode = Signal.make(false)
+
+// Computed values derived from todos
+let completedCount = Computed.make(() => {
+  Signal.get(todos)->Array.filter(todo => todo.completed)->Array.length
+})
+
+let activeCount = Computed.make(() => {
+  Signal.get(todos)->Array.filter(todo => !todo.completed)->Array.length
+})
+
+let totalCount = Computed.make(() => {
+  Signal.get(todos)->Array.length
+})
+
+let addTodo = (text: string) => {
+  if String.trim(text) != "" {
+    Signal.update(todos, list => {
+      Array.concat(list, [{id: nextId.contents, text, completed: false}])
+    })
+    nextId := nextId.contents + 1
+    Signal.set(inputValue, "")
+  }
+}
+
+let toggleTodo = (id: int) => {
+  todos->Signal.update(todos => {
+    let markAsComplete = todo => todo.id == id ? {...todo, completed: !todo.completed} : todo
+    todos->Array.map(markAsComplete)
+  })
+}
+
+let removeTodo = (id: int) => {
+  todos->Signal.update(todos => todos->Array.filter(todo => todo.id != id))
+}
+
+@val @scope("document") external querySelector: string => Nullable.t<Dom.element> = "querySelector"
+@get external target: Dom.event => Dom.element = "target"
+@get external value: Dom.element => string = "value"
+@set external setValue: (Dom.element, string) => unit = "value"
+@get external key: Dom.event => string = "key"
+
+let clearInput = () => {
+  switch querySelector(".todo-input")->Nullable.toOption {
+  | Some(input) => setValue(input, "")
+  | None => ()
+  }
+}
+
+let handleInput = (evt: Dom.event) => {
+  let newValue = evt->target->value
+  Signal.set(inputValue, newValue)
+}
+
+let getInputValue = () => {
+  switch querySelector(".todo-input")->Nullable.toOption {
+  | Some(input) => input->value
+  | None => ""
+  }
+}
+
+let handleKeyDown = (evt: Dom.event) => {
+  if evt->key == "Enter" {
+    addTodo(getInputValue())
+    clearInput()
+  }
+}
+
+let handleAddClick = (_evt: Dom.event) => {
+  addTodo(getInputValue())
+  clearInput()
+}
+
+let toggleTheme = (_evt: Dom.event) => {
+  Signal.update(darkMode, mode => !mode)
+}
+
+// Effect to sync dark mode with HTML class
+let _ = Effect.run(() => {
+  let isDark = Signal.get(darkMode)
+  if isDark {
+    %raw(`document.documentElement.classList.add('dark')`)
+  } else {
+    %raw(`document.documentElement.classList.remove('dark')`)
+  }
+})
+
+let todoItem = (todo: todo) => {
+  let checkboxAttrs = todo.completed
+    ? [("type", "checkbox"), ("checked", "checked"), ("class", "w-5 h-5 cursor-pointer")]
+    : [("type", "checkbox"), ("class", "w-5 h-5 cursor-pointer")]
+
+  Component.li(
+    ~attrs=[
+      (
+        "class",
+        "flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 mb-2 " ++ (
+          todo.completed ? "completed" : ""
+        ),
+      ),
+    ],
+    ~children=[
+      Component.input(~attrs=checkboxAttrs, ~events=[("change", _ => toggleTodo(todo.id))], ()),
+      Component.span(
+        ~attrs=[("class", "flex-1 text-gray-900 dark:text-gray-100")],
+        ~children=[Component.text(todo.text)],
+        (),
+      ),
+      Component.button(
+        ~events=[("click", _ => removeTodo(todo.id))],
+        ~children=[Component.Text("Delete")],
+        (),
+      ),
+    ],
+    (),
+  )
+}
+
+let inputElement = Component.input(
+  ~attrs=[
+    ("type", "text"),
+    ("placeholder", "What needs to be done?"),
+    (
+      "class",
+      "todo-input flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
+    ),
+  ],
+  ~events=[("input", handleInput), ("keydown", handleKeyDown)],
+  (),
+)
+
+let app = Component.div(
+  ~attrs=[("class", "max-w-2xl mx-auto p-6 space-y-6")],
+  ~children=[
+    Component.div(
+      ~attrs=[("class", "bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8")],
+      ~children=[
+        Component.div(
+          ~attrs=[("class", "flex items-center justify-between mb-6")],
+          ~children=[
+            Component.h1(
+              ~attrs=[("class", "text-3xl font-bold text-gray-900 dark:text-white")],
+              ~children=[Component.text("Todo List")],
+              (),
+            ),
+            Component.button(
+              ~attrs=[
+                (
+                  "class",
+                  "px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors",
+                ),
+              ],
+              ~events=[("click", toggleTheme)],
+              ~children=[
+                Component.textSignal(
+                  Computed.make(() => Signal.get(darkMode) ? "☀️ Light" : "🌙 Dark"),
+                ),
+              ],
+              (),
+            ),
+          ],
+          (),
+        ),
+        Component.div(
+          ~attrs=[
+            (
+              "class",
+              "grid grid-cols-3 gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700",
+            ),
+          ],
+          ~children=[
+            Component.div(
+              ~attrs=[("class", "flex flex-col items-center")],
+              ~children=[
+                Component.span(
+                  ~attrs=[
+                    (
+                      "class",
+                      "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1",
+                    ),
+                  ],
+                  ~children=[Component.text("Total")],
+                  (),
+                ),
+                Component.span(
+                  ~attrs=[("class", "text-2xl font-bold text-gray-900 dark:text-white")],
+                  ~children=[
+                    Component.textSignal(Computed.make(() => Int.toString(Signal.get(totalCount)))),
+                  ],
+                  (),
+                ),
+              ],
+              (),
+            ),
+            Component.div(
+              ~attrs=[("class", "flex flex-col items-center")],
+              ~children=[
+                Component.span(
+                  ~attrs=[
+                    (
+                      "class",
+                      "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1",
+                    ),
+                  ],
+                  ~children=[Component.text("Active")],
+                  (),
+                ),
+                Component.span(
+                  ~attrs=[("class", "text-2xl font-bold text-blue-600 dark:text-blue-400")],
+                  ~children=[
+                    Component.textSignal(
+                      Computed.make(() => Int.toString(Signal.get(activeCount))),
+                    ),
+                  ],
+                  (),
+                ),
+              ],
+              (),
+            ),
+            Component.div(
+              ~attrs=[("class", "flex flex-col items-center")],
+              ~children=[
+                Component.span(
+                  ~attrs=[
+                    (
+                      "class",
+                      "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1",
+                    ),
+                  ],
+                  ~children=[Component.text("Completed")],
+                  (),
+                ),
+                Component.span(
+                  ~attrs=[("class", "text-2xl font-bold text-green-600 dark:text-green-400")],
+                  ~children=[
+                    Component.textSignal(
+                      Computed.make(() => Int.toString(Signal.get(completedCount))),
+                    ),
+                  ],
+                  (),
+                ),
+              ],
+              (),
+            ),
+          ],
+          (),
+        ),
+        Component.div(
+          ~attrs=[("class", "flex gap-2 mb-6")],
+          ~children=[
+            inputElement,
+            Component.button(
+              ~attrs=[
+                (
+                  "class",
+                  "px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500",
+                ),
+              ],
+              ~events=[("click", handleAddClick)],
+              ~children=[Component.text("Add")],
+              (),
+            ),
+          ],
+          (),
+        ),
+        Component.ul(
+          ~attrs=[("class", "todo-list space-y-2")],
+          ~children=[Component.list(todos, todoItem)],
+          (),
+        ),
+      ],
+      (),
+    ),
+  ],
+  (),
+)
+
+Component.mountById(app, "app")

package/src/demo/TodoApp.res.mjs

@@ -0,0 +1,326 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__Effect from "../Xote__Effect.res.mjs";
+import * as Xote__Signal from "../Xote__Signal.res.mjs";
+import * as Xote__Computed from "../Xote__Computed.res.mjs";
+import * as Xote__Component from "../Xote__Component.res.mjs";
+
+var todos = Xote__Signal.make([{
+        id: 1,
+        text: "Buy Milk",
+        completed: true
+      }]);
+
+var nextId = {
+  contents: 0
+};
+
+var inputValue = Xote__Signal.make("");
+
+var darkMode = Xote__Signal.make(false);
+
+var completedCount = Xote__Computed.make(function () {
+      return Xote__Signal.get(todos).filter(function (todo) {
+                  return todo.completed;
+                }).length;
+    });
+
+var activeCount = Xote__Computed.make(function () {
+      return Xote__Signal.get(todos).filter(function (todo) {
+                  return !todo.completed;
+                }).length;
+    });
+
+var totalCount = Xote__Computed.make(function () {
+      return Xote__Signal.get(todos).length;
+    });
+
+function addTodo(text) {
+  if (text.trim() !== "") {
+    Xote__Signal.update(todos, (function (list) {
+            return list.concat([{
+                          id: nextId.contents,
+                          text: text,
+                          completed: false
+                        }]);
+          }));
+    nextId.contents = nextId.contents + 1 | 0;
+    return Xote__Signal.set(inputValue, "");
+  }
+  
+}
+
+function toggleTodo(id) {
+  Xote__Signal.update(todos, (function (todos) {
+          var markAsComplete = function (todo) {
+            if (todo.id === id) {
+              return {
+                      id: todo.id,
+                      text: todo.text,
+                      completed: !todo.completed
+                    };
+            } else {
+              return todo;
+            }
+          };
+          return todos.map(markAsComplete);
+        }));
+}
+
+function removeTodo(id) {
+  Xote__Signal.update(todos, (function (todos) {
+          return todos.filter(function (todo) {
+                      return todo.id !== id;
+                    });
+        }));
+}
+
+function clearInput() {
+  var input = document.querySelector(".todo-input");
+  if (!(input == null)) {
+    input.value = "";
+    return ;
+  }
+  
+}
+
+function handleInput(evt) {
+  var newValue = evt.target.value;
+  Xote__Signal.set(inputValue, newValue);
+}
+
+function getInputValue() {
+  var input = document.querySelector(".todo-input");
+  if (input == null) {
+    return "";
+  } else {
+    return input.value;
+  }
+}
+
+function handleKeyDown(evt) {
+  if (evt.key === "Enter") {
+    addTodo(getInputValue());
+    return clearInput();
+  }
+  
+}
+
+function handleAddClick(_evt) {
+  addTodo(getInputValue());
+  clearInput();
+}
+
+function toggleTheme(_evt) {
+  Xote__Signal.update(darkMode, (function (mode) {
+          return !mode;
+        }));
+}
+
+Xote__Effect.run(function () {
+      var isDark = Xote__Signal.get(darkMode);
+      if (isDark) {
+        return (document.documentElement.classList.add('dark'));
+      } else {
+        return (document.documentElement.classList.remove('dark'));
+      }
+    });
+
+function todoItem(todo) {
+  var checkboxAttrs = todo.completed ? [
+      [
+        "type",
+        "checkbox"
+      ],
+      [
+        "checked",
+        "checked"
+      ],
+      [
+        "class",
+        "w-5 h-5 cursor-pointer"
+      ]
+    ] : [
+      [
+        "type",
+        "checkbox"
+      ],
+      [
+        "class",
+        "w-5 h-5 cursor-pointer"
+      ]
+    ];
+  return Xote__Component.li([[
+                "class",
+                "flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 mb-2 " + (
+                  todo.completed ? "completed" : ""
+                )
+              ]], undefined, [
+              Xote__Component.input(checkboxAttrs, [[
+                      "change",
+                      (function (param) {
+                          toggleTodo(todo.id);
+                        })
+                    ]], undefined),
+              Xote__Component.span([[
+                      "class",
+                      "flex-1 text-gray-900 dark:text-gray-100"
+                    ]], undefined, [Xote__Component.text(todo.text)], undefined),
+              Xote__Component.button(undefined, [[
+                      "click",
+                      (function (param) {
+                          removeTodo(todo.id);
+                        })
+                    ]], [{
+                      TAG: "Text",
+                      _0: "Delete"
+                    }], undefined)
+            ], undefined);
+}
+
+var inputElement = Xote__Component.input([
+      [
+        "type",
+        "text"
+      ],
+      [
+        "placeholder",
+        "What needs to be done?"
+      ],
+      [
+        "class",
+        "todo-input flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      ]
+    ], [
+      [
+        "input",
+        handleInput
+      ],
+      [
+        "keydown",
+        handleKeyDown
+      ]
+    ], undefined);
+
+var app = Xote__Component.div([[
+        "class",
+        "max-w-2xl mx-auto p-6 space-y-6"
+      ]], undefined, [Xote__Component.div([[
+              "class",
+              "bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8"
+            ]], undefined, [
+            Xote__Component.div([[
+                    "class",
+                    "flex items-center justify-between mb-6"
+                  ]], undefined, [
+                  Xote__Component.h1([[
+                          "class",
+                          "text-3xl font-bold text-gray-900 dark:text-white"
+                        ]], undefined, [Xote__Component.text("Todo List")], undefined),
+                  Xote__Component.button([[
+                          "class",
+                          "px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                        ]], [[
+                          "click",
+                          toggleTheme
+                        ]], [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                  if (Xote__Signal.get(darkMode)) {
+                                    return "☀️ Light";
+                                  } else {
+                                    return "🌙 Dark";
+                                  }
+                                }))], undefined)
+                ], undefined),
+            Xote__Component.div([[
+                    "class",
+                    "grid grid-cols-3 gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700"
+                  ]], undefined, [
+                  Xote__Component.div([[
+                          "class",
+                          "flex flex-col items-center"
+                        ]], undefined, [
+                        Xote__Component.span([[
+                                "class",
+                                "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"
+                              ]], undefined, [Xote__Component.text("Total")], undefined),
+                        Xote__Component.span([[
+                                "class",
+                                "text-2xl font-bold text-gray-900 dark:text-white"
+                              ]], undefined, [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                        return Xote__Signal.get(totalCount).toString();
+                                      }))], undefined)
+                      ], undefined),
+                  Xote__Component.div([[
+                          "class",
+                          "flex flex-col items-center"
+                        ]], undefined, [
+                        Xote__Component.span([[
+                                "class",
+                                "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"
+                              ]], undefined, [Xote__Component.text("Active")], undefined),
+                        Xote__Component.span([[
+                                "class",
+                                "text-2xl font-bold text-blue-600 dark:text-blue-400"
+                              ]], undefined, [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                        return Xote__Signal.get(activeCount).toString();
+                                      }))], undefined)
+                      ], undefined),
+                  Xote__Component.div([[
+                          "class",
+                          "flex flex-col items-center"
+                        ]], undefined, [
+                        Xote__Component.span([[
+                                "class",
+                                "text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1"
+                              ]], undefined, [Xote__Component.text("Completed")], undefined),
+                        Xote__Component.span([[
+                                "class",
+                                "text-2xl font-bold text-green-600 dark:text-green-400"
+                              ]], undefined, [Xote__Component.textSignal(Xote__Computed.make(function () {
+                                        return Xote__Signal.get(completedCount).toString();
+                                      }))], undefined)
+                      ], undefined)
+                ], undefined),
+            Xote__Component.div([[
+                    "class",
+                    "flex gap-2 mb-6"
+                  ]], undefined, [
+                  inputElement,
+                  Xote__Component.button([[
+                          "class",
+                          "px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        ]], [[
+                          "click",
+                          handleAddClick
+                        ]], [Xote__Component.text("Add")], undefined)
+                ], undefined),
+            Xote__Component.ul([[
+                    "class",
+                    "todo-list space-y-2"
+                  ]], undefined, [Xote__Component.list(todos, todoItem)], undefined)
+          ], undefined)], undefined);
+
+Xote__Component.mountById(app, "app");
+
+export {
+  todos ,
+  nextId ,
+  inputValue ,
+  darkMode ,
+  completedCount ,
+  activeCount ,
+  totalCount ,
+  addTodo ,
+  toggleTodo ,
+  removeTodo ,
+  clearInput ,
+  handleInput ,
+  getInputValue ,
+  handleKeyDown ,
+  handleAddClick ,
+  toggleTheme ,
+  todoItem ,
+  inputElement ,
+  app ,
+}
+/* todos Not a pure module */