@vue-lynx-example/todomvc 0.1.1 → 0.2.2

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2026-present Xuan Huang (huxpro)
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,6 +1,8 @@
 # TodoMVC
 
-Classic [TodoMVC](https://todomvc.com) built with Vue 3 × Lynx using CSS Selector styling.
+Classic [TodoMVC](https://todomvc.com) built with Vue 3 × Lynx using CSS Selector styling. This version features iteratively improved UI, layout, and scrolling behaviors matching the modern reference clone.
+
+*(For the original unpolished version, see `examples/todomvc-day1`)*
 
 ## Features Exercised
 

package/lynx.config.ts

@@ -1,7 +1,23 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from '@lynx-js/rspeedy';
 import { pluginVueLynx } from 'vue-lynx/plugin';
 
+const exampleName = path.basename(path.dirname(fileURLToPath(import.meta.url)));
+
 export default defineConfig({
+  environments: {
+    web: {},
+    lynx: {},
+  },
+  output: {
+    assetPrefix: `https://vue.lynxjs.org/examples/${exampleName}/dist/`,
+  },
+  source: {
+    entry: {
+      main: './src/index.ts',
+    },
+  },
   plugins: [
     pluginVueLynx({
       optionsApi: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-lynx-example/todomvc",
-  "version": "0.1.1",
+  "version": "0.2.2",
   "private": false,
   "description": "TodoMVC built with Vue 3 × Lynx",
   "type": "module",
@@ -15,12 +15,8 @@
     "url": "https://github.com/Huxpro/vue-lynx",
     "directory": "examples/todomvc"
   },
-  "scripts": {
-    "build": "rspeedy build",
-    "dev": "rspeedy dev"
-  },
   "dependencies": {
-    "vue-lynx": "workspace:*"
+    "vue-lynx": "0.2.0"
   },
   "devDependencies": {
     "@lynx-js/rspeedy": "^0.13.5",
@@ -29,5 +25,9 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev"
   }
-}
+}

package/src/TodoApp.vue

@@ -8,6 +8,9 @@ import TodoFooter from './TodoFooter.vue'
 // ── State ──────────────────────────────────────────────────
 const todos = ref([])
 const filter = ref('all')
+const newTodo = ref('')
+const editedTodoId = ref(null)
+const editText = ref('')
 
 // ── Derived ────────────────────────────────────────────────
 const activeTodos = computed(() => todos.value.filter(t => !t.completed))
@@ -17,6 +20,15 @@ const filteredTodos = computed(() => {
   if (filter.value === 'completed') return completedTodos.value
   return todos.value
 })
+
+const TODO_ROW_HEIGHT = 58;
+const VIEWPORT_RESERVED_HEIGHT = 320;
+
+const mainScrollHeight = computed(
+  () => `${filteredTodos.value.length * TODO_ROW_HEIGHT}px`,
+)
+const mainScrollMaxHeight = `calc(100vh - ${VIEWPORT_RESERVED_HEIGHT}px)`
+
 const allCompleted = computed(() =>
   todos.value.length > 0 && activeTodos.value.length === 0,
 )
@@ -28,9 +40,14 @@ function uuid() {
 }
 
 // ── Actions ────────────────────────────────────────────────
+function updateNewTodo(value) {
+  newTodo.value = value
+}
+
 function addTodo(title) {
   if (!title.trim()) return
   todos.value.push({ id: uuid(), title: title.trim(), completed: false })
+  newTodo.value = ''
 }
 
 function toggleTodo(todo) {
@@ -39,14 +56,36 @@ function toggleTodo(todo) {
 
 function deleteTodo(todo) {
   todos.value = todos.value.filter(t => t.id !== todo.id)
+  if (editedTodoId.value === todo.id) {
+    editedTodoId.value = null
+    editText.value = ''
+  }
+}
+
+function startEdit(todo) {
+  editedTodoId.value = todo.id
+  editText.value = todo.title
+}
+
+function updateEdit(value) {
+  editText.value = value
 }
 
-function editTodo(todo, newTitle) {
-  if (!newTitle.trim()) {
+function doneEdit(todo) {
+  if (editedTodoId.value !== todo.id) {
+    return
+  }
+
+  const title = editText.value.trim()
+  editedTodoId.value = null
+  editText.value = ''
+
+  if (!title) {
     deleteTodo(todo)
     return
   }
-  todo.title = newTitle.trim()
+
+  todo.title = title
 }
 
 function toggleAll() {
@@ -64,47 +103,56 @@ function setFilter(f) {
 </script>
 
 <template>
-  <view class="todoapp">
-    <TodoHeader @add-todo="addTodo" />
-
-    <view class="main" v-if="todos.length > 0">
-      <!-- Toggle all -->
-      <view class="toggle-all-container">
-        <view
-          class="toggle-all-btn"
-          :class="{ 'all-completed': allCompleted }"
-          @tap="toggleAll"
-        >
-          <text class="toggle-all-icon">✓</text>
-        </view>
-        <text class="toggle-all-label">Mark all as complete</text>
-      </view>
+  <view class="page">
+    <view class="todoapp-shell">
+      <view class="todoapp">
+        <TodoHeader
+          :all-completed="allCompleted"
+          :has-todos="todos.length > 0"
+          :new-todo="newTodo"
+          @update-new-todo="updateNewTodo"
+          @add-todo="addTodo"
+          @toggle-all="toggleAll"
+        />
 
-      <!-- Todo list -->
-      <view class="todo-list">
-        <TodoItem
-          v-for="todo in filteredTodos"
-          :key="todo.id"
-          :todo="todo"
-          @toggle="toggleTodo"
-          @delete="deleteTodo"
-          @edit="editTodo"
+        <scroll-view
+          v-if="todos.length > 0"
+          scroll-orientation="vertical"
+          :style="{ height: mainScrollHeight, maxHeight: mainScrollMaxHeight }"
+        >
+          <view class="main">
+            <!-- Todo list -->
+            <view class="todo-list">
+              <TodoItem
+                v-for="todo in filteredTodos"
+                :key="todo.id"
+                :todo="todo"
+                :editing="editedTodoId === todo.id"
+                :edit-text="editedTodoId === todo.id ? editText : todo.title"
+                @toggle="toggleTodo"
+                @delete="deleteTodo"
+                @start-edit="startEdit"
+                @update-edit="updateEdit"
+                @done-edit="doneEdit"
+              />
+            </view>
+          </view>
+        </scroll-view>
+
+        <TodoFooter
+          v-if="todos.length > 0"
+          :active-count="activeTodos.length"
+          :completed-count="completedTodos.length"
+          :current-filter="filter"
+          @set-filter="setFilter"
+          @clear-completed="clearCompleted"
         />
       </view>
     </view>
 
-    <TodoFooter
-      v-if="todos.length > 0"
-      :active-count="activeTodos.length"
-      :completed-count="completedTodos.length"
-      :current-filter="filter"
-      @set-filter="setFilter"
-      @clear-completed="clearCompleted"
-    />
-
     <!-- Info -->
     <view class="info">
-      <text class="info-text">Tap a todo circle to toggle</text>
+      <text class="info-text">Tap the todo text to edit</text>
       <text class="info-text">Built with Vue 3 × Lynx</text>
     </view>
   </view>

package/src/TodoFooter.vue

@@ -10,9 +10,9 @@ function onClear() { emit('clear-completed') }
 
 <template>
   <view class="footer">
-    <view :style="{ flexDirection: 'row' }">
-      <text class="todo-count-number">{{ activeCount }}</text>
-      <text class="todo-count"> {{ activeCount === 1 ? 'item' : 'items' }} left</text>
+    <view class="todo-count">
+      <text class="todo-count-strong">{{ activeCount }}</text>
+      <text class="todo-count-label"> {{ activeCount === 1 ? 'item' : 'items' }} left</text>
     </view>
 
     <view class="filters">

package/src/TodoHeader.vue

@@ -1,23 +1,59 @@
 <script setup>
-const emit = defineEmits(['add-todo'])
+defineProps(['allCompleted', 'hasTodos', 'newTodo'])
+const emit = defineEmits(['update-new-todo', 'add-todo', 'toggle-all'])
 
-function onConfirm(e) {
+function onInput(e) {
   const value = e?.detail?.value ?? ''
+  emit('update-new-todo', value)
+}
+
+function onConfirm(e) {
+  let value = e?.detail?.value
+  if (value === undefined) {
+    value = ''
+  } else {
+    emit('update-new-todo', value)
+  }
+  
   if (value.trim()) {
     emit('add-todo', value)
   }
 }
+
+function onToggleAll() {
+  emit('toggle-all')
+}
 </script>
 
 <template>
   <view class="header">
     <text class="title">todos</text>
-    <input
-      class="new-todo"
-      type="text"
-      placeholder="What needs to be done?"
-      confirm-type="done"
-      @confirm="onConfirm"
-    />
+    <view class="new-todo-row">
+      <view
+        v-if="hasTodos"
+        class="header-toggle-all"
+        @tap="onToggleAll"
+      >
+        <text
+          class="header-toggle-all-icon"
+          :class="{ checked: allCompleted }"
+        >✓</text>
+      </view>
+      <view
+        v-else
+        class="header-toggle-all header-toggle-all-placeholder"
+      />
+
+      <input
+        class="new-todo with-toggle"
+        type="text"
+        :value="newTodo"
+        placeholder="What needs to be done?"
+        confirm-type="done"
+        autofocus
+        @input="onInput"
+        @confirm="onConfirm"
+      />
+    </view>
   </view>
 </template>

package/src/TodoItem.vue

@@ -1,10 +1,6 @@
 <script setup>
-import { ref } from 'vue'
-
-const props = defineProps(['todo'])
-const emit = defineEmits(['toggle', 'delete', 'edit'])
-
-const editing = ref(false)
+const props = defineProps(['todo', 'editing', 'editText'])
+const emit = defineEmits(['toggle', 'delete', 'start-edit', 'update-edit', 'done-edit'])
 
 function onToggle() {
   emit('toggle', props.todo)
@@ -15,42 +11,53 @@ function onDelete() {
 }
 
 function startEdit() {
-  editing.value = true
+  emit('start-edit', props.todo)
 }
 
-function onEditConfirm(e) {
+function onEditInput(e) {
   const value = e?.detail?.value ?? ''
-  editing.value = false
-  emit('edit', props.todo, value)
+  emit('update-edit', value)
 }
 
-function cancelEdit() {
-  editing.value = false
+function onDoneEdit(e) {
+  if (e) {
+    const value = e?.detail?.value ?? ''
+    emit('update-edit', value)
+  }
+  emit('done-edit', props.todo)
 }
 </script>
 
 <template>
-  <!-- Normal view -->
   <view
-    v-if="!editing"
     class="todo-item"
-    :class="{ completed: todo.completed }"
+    :class="{ completed: todo.completed, editing }"
   >
-    <view class="todo-toggle" @tap="onToggle">
-      <text v-if="todo.completed" class="checkmark">✓</text>
+    <!-- Normal view -->
+    <view
+      v-if="!editing"
+      class="todo-view"
+    >
+      <view class="todo-toggle" @tap="onToggle">
+        <text v-if="todo.completed" class="todo-toggle-icon">✓</text>
+      </view>
+      <view class="todo-label-hitbox" @tap="startEdit">
+        <text class="todo-label">{{ todo.title }}</text>
+      </view>
+      <text class="destroy" @tap="onDelete">✕</text>
     </view>
-    <text class="todo-label" @longpress="startEdit">{{ todo.title }}</text>
-    <text class="destroy" @tap="onDelete">✕</text>
-  </view>
 
-  <!-- Edit view -->
-  <view v-else class="edit-container">
-    <input
-      class="edit-input"
-      type="text"
-      :value="todo.title"
-      @confirm="onEditConfirm"
-      @blur="cancelEdit"
-    />
+    <!-- Edit view -->
+    <view v-else class="edit-container">
+      <input
+        class="edit-input"
+        type="text"
+        :value="editText"
+        autofocus
+        @input="onEditInput"
+        @confirm="onDoneEdit"
+        @blur="onDoneEdit"
+      />
+    </view>
   </view>
 </template>

package/src/todomvc.css

@@ -11,12 +11,28 @@
 
 /* ─── App Container ─────────────────────────────────────── */
 
-.todoapp {
+.page {
+  height: 100%;
+  background-color: #f5f5f5;
+}
+
+.todoapp-shell {
   display: flex;
-  flex-direction: column;
-  background-color: #fff;
-  position: relative;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 28px 16px 12px;
+}
+
+.todoapp {
   width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
+  background-color: #ffffff;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.16),
+    0 24px 50px rgba(0, 0, 0, 0.08);
 }
 
 /* ─── Header ────────────────────────────────────────────── */
@@ -24,73 +40,78 @@
 .header {
   display: flex;
   flex-direction: column;
-  align-items: center;
   padding-top: 12px;
+  width: 100%;
 }
 
 .header .title {
-  font-size: 60px;
+  font-size: 72px;
+  line-height: 1;
   font-weight: 200;
   color: rgba(175, 47, 47, 0.15);
   text-align: center;
+  margin-bottom: 10px;
 }
 
-.new-todo {
-  width: 90%;
-  padding: 16px 16px 16px 16px;
-  font-size: 18px;
-  border: 1px solid #999;
-  border-radius: 4px;
-  margin-top: 8px;
-  color: #4d4d4d;
-  background-color: #fff;
-}
-
-/* ─── Main Section ──────────────────────────────────────── */
-
-.main {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid #e6e6e6;
-}
-
-/* Toggle All */
-.toggle-all-container {
+.new-todo-row {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 8px 16px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid #ededed;
+  background-color: rgba(0, 0, 0, 0.002);
+  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+  width: 100%;
 }
 
-.toggle-all-btn {
-  width: 36px;
-  height: 36px;
+.header-toggle-all {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 18px;
+  width: 58px;
+  min-height: 60px;
+  flex-shrink: 0;
 }
 
-.toggle-all-btn.all-completed {
-  background-color: #737373;
+.header-toggle-all-placeholder {
+  opacity: 0;
 }
 
-.toggle-all-icon {
-  font-size: 20px;
+.header-toggle-all-icon {
+  text-align: center;
+  font-size: 24px;
   color: #e6e6e6;
 }
 
-.toggle-all-btn.all-completed .toggle-all-icon {
-  color: #fff;
+.header-toggle-all-icon.checked {
+  color: #737373;
 }
 
-.toggle-all-label {
-  font-size: 14px;
-  color: #e6e6e6;
-  margin-left: 8px;
+.new-todo {
+  flex: 1;
+  width: auto;
+  min-height: 60px;
+  padding: 16px 18px;
+  border-width: 0;
+  color: #4d4d4d;
+  font-size: 24px;
+  overflow: hidden;
+  text-overflow: clip;
 }
 
+.new-todo.with-toggle {
+  padding-left: 6px;
+}
+
+/* ─── Main Section ──────────────────────────────────────── */
+
+.main {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Toggle All */
+
 /* ─── Todo List ─────────────────────────────────────────── */
 
 .todo-list {
@@ -101,19 +122,26 @@
 /* ─── Todo Item ─────────────────────────────────────────── */
 
 .todo-item {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  border-bottom: 1px solid #ededed;
+}
+
+.todo-view {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #ededed;
+  min-height: 58px;
+  padding: 12px 18px;
 }
 
 /* Checkbox circle */
 .todo-toggle {
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  border: 2px solid #bddad5;
+  width: 34px;
+  height: 34px;
+  border-radius: 17px;
+  border: 1px solid #d9e6e4;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -122,23 +150,24 @@
 
 .todo-item.completed .todo-toggle {
   border-color: #5dc2af;
-  background-color: #5dc2af;
 }
 
-.checkmark {
+.todo-toggle-icon {
   font-size: 18px;
-  color: #fff;
-  font-weight: 700;
+  color: #5dc2af;
 }
 
 /* Todo label */
-.todo-label {
+.todo-label-hitbox {
   flex: 1;
-  font-size: 18px;
-  color: #4d4d4d;
-  margin-left: 12px;
+  margin-left: 14px;
   margin-right: 12px;
-  line-height: 1.4;
+}
+
+.todo-label {
+  font-size: 24px;
+  color: #4d4d4d;
+  line-height: 1.3;
 }
 
 .todo-item.completed .todo-label {
@@ -162,19 +191,28 @@
 .edit-container {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  padding: 4px 16px;
+  padding: 0 0 0 52px;
   border-bottom: 1px solid #ededed;
+  overflow: hidden;
+}
+
+.todo-item.editing .edit-container {
+  border-bottom-width: 0;
 }
 
 .edit-input {
+  width: auto;
   flex: 1;
-  font-size: 18px;
-  padding: 12px;
-  border: 1px solid #999;
-  border-radius: 4px;
+  box-sizing: border-box;
+  min-height: 58px;
+  padding: 12px 16px;
+  border: 1px solid #999999;
+  background-color: #ffffff;
   color: #4d4d4d;
-  background-color: #fff;
+  font-size: 24px;
+  box-shadow:
+    inset 0 -1px 5px rgba(0, 0, 0, 0.2),
+    0 0 1px rgba(0, 0, 0, 0.12);
 }
 
 /* ─── Footer ────────────────────────────────────────────── */
@@ -183,20 +221,37 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 10px 16px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 16px;
+  color: #777777;
   border-top: 1px solid #e6e6e6;
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.08),
+    0 8px 0 -3px #f6f6f6,
+    0 9px 1px -3px rgba(0, 0, 0, 0.08),
+    0 16px 0 -6px #f6f6f6,
+    0 17px 2px -6px rgba(0, 0, 0, 0.08);
 }
 
 .todo-count {
-  font-size: 13px;
-  color: #777;
-  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 14px;
+  color: #777777;
 }
 
-.todo-count-number {
+.todo-count-strong {
+  font-size: 14px;
   font-weight: 700;
-  font-size: 13px;
-  color: #777;
+  color: #777777;
+}
+
+.todo-count-label {
+  font-size: 14px;
+  color: #777777;
 }
 
 /* Filter buttons */
@@ -205,15 +260,17 @@
   flex-direction: row;
   flex: 1;
   justify-content: center;
-  gap: 4px;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 180px;
 }
 
 .filter-btn {
-  font-size: 13px;
-  color: #777;
   padding: 3px 8px;
   border: 1px solid transparent;
   border-radius: 3px;
+  color: #777777;
+  font-size: 14px;
 }
 
 .filter-btn.selected {
@@ -222,9 +279,8 @@
 
 /* Clear completed */
 .clear-completed {
-  font-size: 13px;
-  color: #777;
-  flex-shrink: 0;
+  font-size: 14px;
+  color: #777777;
 }
 
 /* ─── Info Footer ───────────────────────────────────────── */