diff --git a/docs/native-debug-notes.md b/docs/native-debug-notes.md
index 083efd3..4fc45fc 100644
--- a/docs/native-debug-notes.md
+++ b/docs/native-debug-notes.md
@@ -189,3 +189,74 @@ CSS property Lynx-native treats differently from Lynx-web.
2. If still there: add explicit `justify-content:flex-start` to `.day-group`.
3. If still there: inspect the first `.todo` box in the Lynx devtool to see
exactly which box (header / row / body) owns the extra pixels.
+
+---
+
+## Part C — follow-up: repeat focus, keyboard gap, and scrolling
+
+### Empty composer could not be focused again
+
+The composer previously drew its hint as an absolutely positioned sibling:
+
+```html
+又有事情忙啦？
+
+```
+
+The first focus worked because `openInput()` invoked the native `focus` UI
+method. After a blur, however, the empty-state text could own Native hit
+testing. Web happened to put `x-textarea` on top, which explains why the same
+sequence could not be reproduced there. The hint now uses the textarea's
+built-in `placeholder` attribute and `::placeholder` styling, so no sibling can
+intercept the second tap and native caret behavior remains intact.
+
+### Composer controls sat too far above the keyboard
+
+`keyboardHeight` already moves the page bottom to the keyboard top. The idle
+bottom bar then added another `28px + safe-area-inset-bottom`, producing a
+large double gap on iOS. Idle spacing is unchanged, but while the native
+`keyboardstatuschanged` event reports an open keyboard, the bottom padding is
+overridden to 8px.
+
+### Scroll direction compatibility
+
+The timeline and day picker previously declared only:
+
+```html
+scroll-orientation="vertical"
+```
+
+They now also pass the legacy direction as a real boolean:
+
+```html
+:scroll-y="true"
+```
+
+The quick-day strip similarly combines horizontal orientation with
+`:scroll-x="true"`. `scroll-orientation` replaced `scroll-x` / `scroll-y` in
+Lynx 3.0; keeping both same-direction declarations covers different Explorer
+hosts without changing modern behavior. The `sdkVersion` reported by Lynx
+DevTool is a protocol/client version and is **not** treated as proof of the
+embedded Lynx engine version.
+
+Stable inspection IDs:
+
+- `#timeline-scroll`
+- `#day-picker-scroll`
+- `#quick-days-scroll`
+
+### Physical-device acceptance
+
+1. Open the composer, blur it through either picker, close the picker, then
+ tap the still-empty textarea. The keyboard must return every time.
+2. With the keyboard open, the bottom controls should end about 8px above the
+ keyboard rather than above an additional safe-area-sized gap.
+3. Populate enough todos to exceed one screen. Query `#timeline-scroll` with
+ the scroll-view `getScrollInfo` UI method, call `scrollBy({ offset: 120 })`,
+ and verify the resulting vertical offset is greater than zero; then confirm
+ the same movement with a real finger drag.
+4. Open the day picker. Its eight 52px rows exceed the 320px viewport; repeat
+ `getScrollInfo` / `scrollBy` on `#day-picker-scroll` and finish with a real
+ finger drag to the final option.
+5. Horizontally drag `#quick-days-scroll` through all eight pills and select a
+ later day. The existing full day and calendar pickers must remain usable.
diff --git a/docs/superpowers/plans/2026-07-14-completed-toggle-starter-todos-native-scroll.md b/docs/superpowers/plans/2026-07-14-completed-toggle-starter-todos-native-scroll.md
new file mode 100644
index 0000000..b20d8eb
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-14-completed-toggle-starter-todos-native-scroll.md
@@ -0,0 +1,218 @@
+# Completed Toggle, Starter Todos, and Native Scrolling Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace list filters with a show-completed switch, seed only genuinely fresh starts, and make both native scroll views use Lynx-compatible bounded single-child layouts.
+
+**Architecture:** Put deterministic starter-data creation and timeline projection in small pure TypeScript modules so behavior is unit-testable outside the renderer. Change persistence loading to return `null` only when the storage key is absent or invalid. Restructure each `` around one linear direct child and explicitly bound the main flex scroller.
+
+**Tech Stack:** TypeScript 5.9, Vue Lynx 0.4, Lynx ``, Node test runner, Rspeedy.
+
+---
+
+## File map
+
+- Create `src/starterTimeline.ts`: construct the three instructional todos for a supplied date.
+- Create `src/timelineView.ts`: project stored timeline data according to `showCompleted`.
+- Modify `src/store.ts`: preserve the difference between no value and an explicitly stored empty timeline.
+- Modify `src/App.vue`: load starter data, replace filters with a toggle, and wrap timeline scroll content.
+- Modify `src/App.css`: style the app-bar switch and bound the main scroller/linear wrapper.
+- Modify `src/components/DayPickerSheet.vue`: add the single direct child required by Lynx scroll-view.
+- Modify `src/components/daypicker.css`: give the day-picker wrapper linear column layout.
+- Create `tests/starter-timeline.test.ts`: starter data behavior.
+- Create `tests/timeline-view.test.ts`: completed visibility behavior.
+- Modify `tests/web-regressions.test.ts`: persistence and structural regressions.
+
+### Task 1: Fresh-start persistence and starter data
+
+**Files:**
+- Create: `src/starterTimeline.ts`
+- Create: `tests/starter-timeline.test.ts`
+- Modify: `src/store.ts`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing starter and persistence tests**
+
+```ts
+test('creates three pending instructional todos for the supplied date', () => {
+ const timeline = createStarterTimeline('2026-07-14')
+ const todos = timeline['2026-07-14'].todos
+ assert.deepEqual(todos.map((todo) => todo.text), [
+ '打开右上角查看已完成',
+ '点击文字编辑事项',
+ '点击圆圈完成事项',
+ ])
+ assert.ok(todos.every((todo) => !todo.done && todo.dayType === 0))
+})
+
+test('missing storage is distinct from an explicitly stored empty timeline', async () => {
+ localValues.delete('busyWeek')
+ assert.equal(await loadTimeline(), null)
+ localValues.set('busyWeek', '{}')
+ assert.deepEqual(await loadTimeline(), {})
+})
+```
+
+- [ ] **Step 2: Run the tests and verify RED**
+
+Run: `node --test tests/starter-timeline.test.ts tests/web-regressions.test.ts`
+
+Expected: FAIL because `starterTimeline.ts` does not exist and missing storage still resolves to `{}`.
+
+- [ ] **Step 3: Implement deterministic starter construction and nullable loading**
+
+```ts
+export function createStarterTimeline(date: string): Timeline {
+ const texts = [
+ '打开右上角查看已完成',
+ '点击文字编辑事项',
+ '点击圆圈完成事项',
+ ]
+ return {
+ [date]: {
+ date,
+ todos: texts.map((text, index) => ({
+ id: `starter-${index + 1}`,
+ date,
+ dayType: 0,
+ done: false,
+ text,
+ })),
+ },
+ }
+}
+```
+
+Change `parse` and `loadTimeline` to return `Timeline | null`, returning `null` for absent/malformed raw data and preserving parsed `{}`.
+
+- [ ] **Step 4: Run focused tests and verify GREEN**
+
+Run: `node --test tests/starter-timeline.test.ts tests/web-regressions.test.ts`
+
+Expected: all focused tests pass.
+
+### Task 2: Show-completed projection and app-bar toggle
+
+**Files:**
+- Create: `src/timelineView.ts`
+- Create: `tests/timeline-view.test.ts`
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing projection and structure tests**
+
+```ts
+test('hides completed todos until showCompleted is enabled', () => {
+ assert.deepEqual(getVisibleDays(timeline, false)[0].todos.map((todo) => todo.id), ['active'])
+ assert.deepEqual(getVisibleDays(timeline, true)[0].todos.map((todo) => todo.id), ['active', 'done'])
+})
+
+test('uses one app-bar show-completed control instead of filter tabs', () => {
+ assert.doesNotMatch(appSource, /class="filters"/)
+ assert.match(appSource, /class="completed-toggle"/)
+ assert.match(appSource, /showCompleted\.value|showCompleted = !showCompleted/)
+})
+```
+
+- [ ] **Step 2: Run the tests and verify RED**
+
+Run: `node --test tests/timeline-view.test.ts tests/web-regressions.test.ts`
+
+Expected: FAIL because the projection module and app-bar toggle do not exist.
+
+- [ ] **Step 3: Implement projection and toggle**
+
+```ts
+export function getVisibleDays(timeline: Timeline, showCompleted: boolean): VisibleDay[] {
+ return Object.keys(timeline)
+ .sort()
+ .map((key) => ({
+ key,
+ todos: timeline[key].todos.filter((todo) => showCompleted || !todo.done),
+ }))
+ .filter((day) => day.todos.length > 0)
+}
+```
+
+In `App.vue`, replace `activeFilter` and `filters` with `const showCompleted = ref(false)`, load `stored ?? createStarterTimeline(getTodayDate())`, use `getVisibleDays`, and render a tappable `.completed-toggle` in `.app-bar`. Add a track and thumb whose active classes reflect `showCompleted`. Add a computed empty-state message for the all-completed-hidden case.
+
+In `App.css`, set `.app-bar { justify-content: space-between; }`, group the logo in `.brand`, and add the switch label/track/thumb styles with a 44px minimum touch target and short transform/color transitions. Delete the filter bar styles.
+
+- [ ] **Step 4: Run focused tests and verify GREEN**
+
+Run: `node --test tests/timeline-view.test.ts tests/web-regressions.test.ts`
+
+Expected: all focused tests pass.
+
+### Task 3: Native-compatible scroll-view children
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+- Modify: `src/components/DayPickerSheet.vue`
+- Modify: `src/components/daypicker.css`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing structural regression tests**
+
+```ts
+test('native scroll views use bounded single linear content children', () => {
+ assert.match(appSource, /]*>\s*/s)
+ assert.match(appCss, /\.timeline\s*\{[^}]*height:\s*0/s)
+ assert.match(appCss, /\.timeline-content\s*\{[^}]*display:\s*linear[^}]*linear-direction:\s*column/s)
+ assert.match(dayPickerSource, /]*>\s*/s)
+ assert.match(dayPickerCss, /\.dp-content\s*\{[^}]*display:\s*linear[^}]*linear-direction:\s*column/s)
+})
+```
+
+- [ ] **Step 2: Run the structural test and verify RED**
+
+Run: `node --test tests/web-regressions.test.ts`
+
+Expected: FAIL because neither single-child wrapper exists and timeline height is unbounded.
+
+- [ ] **Step 3: Implement the wrapper structure and bounded sizes**
+
+Wrap all direct timeline children in ``. Wrap all day-picker rows in ``. Add:
+
+```css
+.timeline { flex: 1; height: 0; width: 100%; padding-top: 10px; }
+.timeline-content { display: linear; linear-direction: column; width: 100%; }
+.dp-content { display: linear; linear-direction: column; width: 100%; }
+```
+
+Keep `.dp-list { height: 320px; }` and both vertical `scroll-orientation` attributes.
+
+- [ ] **Step 4: Run structural tests and verify GREEN**
+
+Run: `node --test tests/web-regressions.test.ts`
+
+Expected: all structural regressions pass.
+
+### Task 4: Full verification and publication
+
+**Files:**
+- Verify all modified files.
+
+- [ ] **Step 1: Run full automated verification**
+
+Run: `git diff --check && node --test tests/*.test.ts && npx tsc --noEmit && npm run build:web`
+
+Expected: zero test failures, TypeScript exit 0, and successful Lynx/Web production bundles plus static assembly.
+
+- [ ] **Step 2: Run browser behavior checks**
+
+Serve `dist/`, then verify at mobile and desktop sizes:
+
+- fresh localStorage shows exactly three starter todos and persists them;
+- stored `{}` remains empty after reload;
+- completing a todo hides it while the switch is off;
+- enabling the switch shows pending and completed todos together;
+- a long generated timeline scrolls vertically;
+- the day selector scroll offset changes after a vertical wheel/drag;
+- no page errors occur.
+
+- [ ] **Step 3: Commit and push**
+
+Stage only the planned source, test, and plan files. Preserve unrelated `artifacts/` and the pre-existing untracked plan. Commit with `feat: add completed toggle and starter todos` and push `HEAD` to `origin/claude/vue-lynx-port-mxmd1y` so the branch preview rebuilds.
diff --git a/docs/superpowers/plans/2026-07-15-header-menu-and-clear-motion.md b/docs/superpowers/plans/2026-07-15-header-menu-and-clear-motion.md
new file mode 100644
index 0000000..f6674ac
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-15-header-menu-and-clear-motion.md
@@ -0,0 +1,150 @@
+# Header Menu and Clear-Style Timeline Motion Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Show completed todos by default, move the Web overflow menu trigger into the app header, and animate retained todos/day cards into their new positions when content disappears.
+
+**Architecture:** A pure timeline geometry module maps visible data to fixed-height day and todo slots. Vue renders those slots with explicit Y transforms so CSS can interpolate order changes even though Vue Lynx `TransitionGroup` lacks FLIP move support; nested card/row elements keep independent enter/leave motion. The Web host retains the overflow menu content but binds it to the Lynx shadow-root brand instead of a floating button.
+
+**Tech Stack:** Vue Lynx 0.4, TypeScript, Lynx CSS transitions, Node test runner, Rspeedy, Lynx Web Platform.
+
+---
+
+### Task 1: Default completed visibility and hidden Web menu trigger
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `web/index.html`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing source-regression assertions**
+
+Assert that `showCompleted` initializes with `true`, `web/index.html` contains no `ovf-btn`, and the menu script queries `.brand` and handles keyboard activation.
+
+- [ ] **Step 2: Run the focused test and verify RED**
+
+Run: `node --test --test-name-pattern='completed visibility|header brand' tests/web-regressions.test.ts`
+
+Expected: FAIL because the state is `false`, the button is present, and no brand binding exists.
+
+- [ ] **Step 3: Implement the minimal state and host changes**
+
+Change the state to:
+
+```ts
+const showCompleted = ref(true)
+```
+
+Remove the `.ovf-btn` markup and CSS. Keep `.ovf-menu`, bind `.brand` after the shadow root mounts, and toggle on click, Enter, or Space. Add `role="button"`, `tabindex="0"`, and `aria-label="更多"` to the Web shadow element.
+
+- [ ] **Step 4: Run the focused test and verify GREEN**
+
+Run: `node --test --test-name-pattern='completed visibility|header brand' tests/web-regressions.test.ts`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/App.vue web/index.html tests/web-regressions.test.ts
+git commit -m "feat: move web menu into header"
+```
+
+### Task 2: Deterministic Clear-style timeline geometry
+
+**Files:**
+- Create: `src/timelineMotion.ts`
+- Create: `tests/timeline-motion.test.ts`
+
+- [ ] **Step 1: Write failing geometry tests**
+
+Use two days with fixed ids. Assert that todo offsets advance by `52`, day offsets include `10 + 42 + rows * 52`, and removing an earlier row changes both the next retained todo and the next day by exactly `52`.
+
+- [ ] **Step 2: Run the new test and verify RED**
+
+Run: `node --test tests/timeline-motion.test.ts`
+
+Expected: FAIL with module-not-found for `src/timelineMotion.ts`.
+
+- [ ] **Step 3: Implement the pure layout function**
+
+Export `TODO_ROW_HEIGHT`, `DAY_HEADER_HEIGHT`, `DAY_GAP`, and `createTimelineMotionLayout(days)`. Return `{ height, days }`, where each day record contains `offset`, `todosHeight`, and a todo-id-to-offset map.
+
+- [ ] **Step 4: Run the new test and verify GREEN**
+
+Run: `node --test tests/timeline-motion.test.ts`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/timelineMotion.ts tests/timeline-motion.test.ts
+git commit -m "feat: calculate timeline motion slots"
+```
+
+### Task 3: Render and animate retained positions
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+- Modify: `web/index.html`
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing structure and motion assertions**
+
+Assert that the template renders `.day-slot` and `.todo-slot` with layout-derived transforms and container heights. Assert that CSS absolutely positions both slots, transitions their transforms, applies enter/leave transforms to nested `.day-group`/`.todo`, and includes all new selectors in reduced-motion CSS.
+
+- [ ] **Step 2: Run the focused test and verify RED**
+
+Run: `node --test --test-name-pattern='Clear-style motion|reduced-motion' tests/web-regressions.test.ts`
+
+Expected: FAIL because the slot structure and transitions do not exist.
+
+- [ ] **Step 3: Integrate the layout into the Vue template**
+
+Compute `motionLayout` from `visibleDays`. Give `.day-list` its calculated height, wrap every card in a keyed `.day-slot` with its calculated Y transform, give `.day-todos` its calculated height, and wrap every row in a keyed `.todo-slot` with its calculated Y transform.
+
+- [ ] **Step 4: Add coordinated CSS motion**
+
+Use `position: relative` on `.day-list`/`.day-todos`, absolute slots at `top: 0; left: 0`, and transform transitions around `260–300ms` with `cubic-bezier(0.22, 1, 0.36, 1)`. Move presence styles onto nested elements so slot transforms and exit transforms never overwrite each other. Add reduced-motion selectors for slot transforms and container heights.
+
+- [ ] **Step 5: Run the focused and complete test suites**
+
+Run: `node --test --test-name-pattern='Clear-style motion|reduced-motion' tests/web-regressions.test.ts && node --test tests/*.test.ts`
+
+Expected: all tests PASS.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/App.vue src/App.css web/index.html tests/web-regressions.test.ts
+git commit -m "feat: animate timeline reflow"
+```
+
+### Task 4: Build and behavior verification
+
+**Files:**
+- Verify only; no planned production edits.
+
+- [ ] **Step 1: Run static and production checks**
+
+Run: `git diff --check && node --test tests/*.test.ts && npx tsc --noEmit && npm run build:web`
+
+Expected: zero failures; both `main.lynx.bundle` and `main.web.bundle` are emitted.
+
+- [ ] **Step 2: Run the assembled Web app**
+
+Serve `dist/`, clear storage, and verify completed todos are visible by default. Verify clicking the brand opens the menu, clicking the switch does not, and no floating overflow button exists.
+
+- [ ] **Step 3: Verify timeline motion**
+
+Load multiple completed and pending todos across two dates. Toggle completed visibility and delete a pending todo. Capture positions across animation frames and confirm retained todo and day-card Y positions interpolate rather than jump.
+
+- [ ] **Step 4: Verify reduced motion**
+
+Emulate `prefers-reduced-motion: reduce` and confirm slot/container transition durations resolve to approximately zero while all state changes still complete.
+
+- [ ] **Step 5: Push the established remote branch and verify deployment**
+
+Push `HEAD` to `origin/claude/vue-lynx-port-mxmd1y`, wait for the Vercel commit status, and confirm `/`, `/main.web.bundle`, and `/main.lynx.bundle` return HTTP 200.
diff --git a/docs/superpowers/plans/2026-07-15-native-correctness-responsive-polish.md b/docs/superpowers/plans/2026-07-15-native-correctness-responsive-polish.md
new file mode 100644
index 0000000..1cc0fba
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-15-native-correctness-responsive-polish.md
@@ -0,0 +1,279 @@
+# Native Correctness and Responsive Polish Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Restore repeatable Native composer focus and scrolling, tighten keyboard avoidance, add a quick horizontal day chooser, and finish the requested Web/todo interaction polish without changing BusyWeek's existing visual language.
+
+**Architecture:** Keep the existing Vue Lynx component structure and make compatibility fixes at the element boundary. Every native scroll container will expose both the modern `scroll-orientation` attribute and an explicit boolean legacy `scroll-x`/`scroll-y` attribute, covering host/runtime differences without assuming the DevTool protocol version is the Lynx engine version. Composer focus recovery stays in `App.vue`, while desktop-only sheet placement remains in the Web host's injected media-query stylesheet so Native keeps its bottom-sheet presentation.
+
+**Tech Stack:** Vue 3, Vue Lynx 0.4.0, legacy scroll-direction compatibility, Rspeedy, Node test runner, Lynx for Web.
+
+---
+
+## File map
+
+- Modify `src/App.vue`: composer refocus surface, keyboard-open class, quick-day pills, legacy scroll attributes, todo hit targets, final-row class.
+- Modify `src/App.css`: focus-overlay behavior, keyboard spacing, pills, row highlight removal, final-row border.
+- Modify `src/components/DayPickerSheet.vue`: legacy vertical scroll compatibility.
+- Modify `web/index.html`: left-anchored hidden menu and desktop picker-sheet adaptation.
+- Modify `tests/web-regressions.test.ts`: source-level cross-platform regression coverage for all requested behaviors.
+- Modify `docs/native-debug-notes.md`: record the legacy scroll-direction compatibility rationale and physical-device acceptance checks.
+
+### Task 1: Lock the regressions down
+
+**Files:**
+- Modify: `tests/web-regressions.test.ts`
+
+- [ ] **Step 1: Write failing source-level regression tests**
+
+Add assertions that require:
+
+```ts
+assert.match(appSource, /id="timeline-scroll"[^>]*:scroll-y="true"/)
+assert.match(dayPickerSource, /id="day-picker-scroll"[^>]*:scroll-y="true"/)
+assert.doesNotMatch(appSource, /class="bw-text addpage-ph"/)
+assert.match(appSource, /\s*0/)
+assert.match(appCss, /\.addpage--keyboard\s+\.addpage-bottom\s*\{[^}]*padding-bottom:\s*8px/s)
+assert.match(appSource, /class="quick-days"[^>]*scroll-orientation="horizontal"[^>]*scroll-x/)
+assert.match(appSource, /@tap="pickQuickDay\(offset\)"/)
+assert.match(appSource, /class="todo-body"[^>]*@tap="startEdit\(todo\)"/)
+assert.doesNotMatch(appCss, /\.todo:active/)
+assert.match(appSource, /'todo--last':\s*todoIndex\s*===\s*day\.todos\.length\s*-\s*1/)
+assert.match(appCss, /\.todo--last\s*\{[^}]*border-bottom-width:\s*0/s)
+assert.match(webHost, /\.ovf\s*\{[^}]*left:\s*12px[^}]*right:\s*auto/s)
+assert.match(webHost, /\.sheet-panel:not\(\[l-e-name\]\)\s*\{[^}]*width:\s*500px[^}]*align-self:\s*flex-end[^}]*margin-right:\s*86px[^}]*margin-bottom:\s*63px/s)
+```
+
+- [ ] **Step 2: Run the focused tests and confirm RED**
+
+Run: `node --test --experimental-strip-types tests/web-regressions.test.ts`
+
+Expected: new assertions fail because the compatibility attributes, focus surface, quick pills, todo last-row treatment, left menu, and desktop sheet rules are absent.
+
+### Task 2: Fix Native scroll and composer keyboard behavior
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+- Modify: `src/components/DayPickerSheet.vue`
+- Modify: `docs/native-debug-notes.md`
+
+- [ ] **Step 1: Add backward-compatible scroll declarations**
+
+Use both generations of the Lynx API with a real boolean value and stable inspection IDs:
+
+```vue
+
+
+```
+
+`scroll-orientation` replaced the legacy direction flags in Lynx 3.0. Both declarations point in the same direction, while the explicit boolean avoids older Native hosts interpreting a bare attribute as an empty string. The DevTool-reported `sdkVersion` is not treated as proof of the engine version.
+
+- [ ] **Step 2: Make the empty composer surface refocusable**
+
+Remove the absolutely positioned sibling ``, which can own Native hit testing after the first blur. Use the textarea's built-in placeholder so taps continue to target the input and native caret behavior remains untouched:
+
+```vue
+
+```
+
+```css
+.addpage-input::placeholder {
+ color: rgba(255, 255, 255, 0.68);
+}
+```
+
+- [ ] **Step 3: Tighten the Native keyboard gap**
+
+Add a state class driven only by the native keyboard event:
+
+```vue
+:class="{
+ 'addpage--open': state === 'INPUT',
+ 'addpage--keyboard': keyboardHeight > 0,
+}"
+```
+
+Override the idle safe-area padding while the keyboard is open:
+
+```css
+.addpage--keyboard .addpage-bottom { padding-bottom: 8px; }
+```
+
+- [ ] **Step 4: Document the device-specific cause and acceptance checks**
+
+Record that SDK 1.4.0 predates `scroll-orientation` and list the checks: scroll the timeline past the first viewport, scroll all eight day-picker rows, blur and retap the empty composer, and verify the controls sit about 8 px above the keyboard.
+
+- [ ] **Step 5: Run the focused tests**
+
+Run: `node --test --experimental-strip-types tests/web-regressions.test.ts`
+
+Expected: the Native scroll/focus/keyboard assertions pass; later-task assertions may still fail.
+
+### Task 3: Add the horizontal quick-day chooser
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+
+- [ ] **Step 1: Add a fixed set of relative-day choices and action**
+
+```ts
+const quickDayOffsets = [0, 1, 2, 3, 4, 5, 6, 7]
+const selectedDayOffset = computed(() =>
+ getDateDiff(newTodoDate.value, getTodayDate()),
+)
+function pickQuickDay(offset: number) {
+ newTodoDate.value = getDiffDate(offset)
+}
+```
+
+- [ ] **Step 2: Render direct horizontal scroll children**
+
+Place a `scroll-view` above the existing day/date/add row and retain the existing picker buttons:
+
+```vue
+
+
+ {{ getPickerLabel(offset) }}
+
+
+```
+
+- [ ] **Step 3: Style compact, fixed-width pills**
+
+Give the scroller a 50 px viewport, each pill a non-shrinking 44 px touch target, and use the existing translucent-white composer palette with a solid-white selected state.
+
+- [ ] **Step 4: Run focused tests**
+
+Run: `node --test --experimental-strip-types tests/web-regressions.test.ts`
+
+Expected: quick-day compatibility and selection assertions pass.
+
+### Task 4: Correct todo interaction boundaries and card edge
+
+**Files:**
+- Modify: `src/App.vue`
+- Modify: `src/App.css`
+
+- [ ] **Step 1: Make only the body start editing**
+
+Change the row loop to expose `todoIndex`, move `@tap="startEdit(todo)"` from the text node to `.todo-body`, and use `@tap.stop` for checkbox and delete controls.
+
+- [ ] **Step 2: Remove whole-row pressed/editing color**
+
+Delete `.todo:active` and the background declaration from `.todo--editing`. Keep the class only for desktop delete-button visibility.
+
+- [ ] **Step 3: Remove the duplicated final divider**
+
+Apply:
+
+```vue
+'todo--last': todoIndex === day.todos.length - 1
+```
+
+and:
+
+```css
+.todo--last { border-bottom-width: 0; }
+```
+
+- [ ] **Step 4: Run focused tests**
+
+Run: `node --test --experimental-strip-types tests/web-regressions.test.ts`
+
+Expected: todo hit-target, highlight, and edge assertions pass.
+
+### Task 5: Finish desktop Web adaptation
+
+**Files:**
+- Modify: `web/index.html`
+
+- [ ] **Step 1: Anchor the hidden menu to the header's left edge**
+
+Set `.ovf` to `left: 12px; right: auto` and `.ovf-menu` to `left: 0; right: auto; transform-origin: top left`.
+
+- [ ] **Step 2: Turn picker bottom sheets into desktop popovers**
+
+Inside the existing `min-width: 640px` injected stylesheet add:
+
+```css
+.sheet-panel:not([l-e-name]) {
+ width: 500px;
+ align-self: flex-end;
+ margin-right: 86px;
+ margin-bottom: 63px;
+ border-radius: 18px;
+ padding-bottom: 12px;
+ opacity: 0;
+ transform: translateY(24px) scale(0.98);
+ transform-origin: bottom right;
+}
+.sheet-root--open:not([l-e-name]) .sheet-panel:not([l-e-name]) {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+}
+```
+
+Also convert the day choices to a compact two-column desktop grid with a 208 px list viewport (`.dp-content { display:flex; flex-wrap:wrap }`, `.dp-item { width:50% }`). Keep the calendar in one 500 px panel so seven columns remain comfortably tappable.
+
+- [ ] **Step 3: Run focused tests**
+
+Run: `node --test --experimental-strip-types tests/web-regressions.test.ts`
+
+Expected: all source-level regression tests pass.
+
+### Task 6: Verify, build, inspect, and publish
+
+**Files:**
+- No additional production files expected.
+
+- [ ] **Step 1: Run the full automated suite**
+
+Run: `node --test --experimental-strip-types tests/*.test.ts`
+
+Expected: all tests pass with zero failures.
+
+- [ ] **Step 2: Build Native and assembled Web artifacts**
+
+Run: `npm run build && npm run build:web`
+
+Expected: both commands exit 0 with `main.lynx.bundle` and assembled Web output.
+
+- [ ] **Step 3: Verify Web interaction and responsive layout**
+
+At mobile and desktop widths, confirm composer blur/retap, horizontal pills, picker selection, body-only edit targeting, checkbox independence, left menu placement, desktop picker geometry, and timeline scrolling.
+
+- [ ] **Step 4: Verify on the physical iPhone**
+
+Open the locally served `main.lynx.bundle?fullscreen=true` in Lynx Explorer and confirm the four Native checks from Task 2 plus quick-day horizontal scrolling and checkbox/edit separation.
+
+- [ ] **Step 5: Review tracked diff and preserve unrelated files**
+
+Run: `git status --short && git diff --check && git diff --stat`
+
+Expected: only the files listed in this plan are tracked changes; pre-existing `artifacts/` and `docs/superpowers/plans/2026-07-14-native-input-layout-fixes.md` remain untracked and unstaged.
+
+- [ ] **Step 6: Commit and push the deployment branch**
+
+Stage only intended files, commit with `fix: finish native interactions and responsive pickers`, then push `HEAD:claude/vue-lynx-port-mxmd1y`.
+
+Expected: the remote deployment branch advances and the updated preview build starts.
diff --git a/docs/superpowers/specs/2026-07-14-completed-toggle-starter-todos-native-scroll-design.md b/docs/superpowers/specs/2026-07-14-completed-toggle-starter-todos-native-scroll-design.md
new file mode 100644
index 0000000..9042041
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-14-completed-toggle-starter-todos-native-scroll-design.md
@@ -0,0 +1,54 @@
+# Completed Toggle, Starter Todos, and Native Scrolling Design
+
+## Goals
+
+- Replace the three-way filter bar with one app-bar control that shows or hides completed todos.
+- Seed a fresh installation with three instructional todos.
+- Preserve an explicitly stored empty timeline instead of reseeding it.
+- Make the main timeline and day selector scroll reliably on native Lynx when their content overflows.
+
+## App-bar control
+
+The secondary filter bar and its `all / active / done` state are removed. The app bar keeps the BusyWeek logo on the left and adds a compact `显示已完成` switch on the right.
+
+The switch is off at launch and is session-only:
+
+- Off: show pending todos only.
+- On: show both pending and completed todos.
+
+Completed todos keep their current checked and struck-through presentation. When completed todos are hidden and every stored todo is complete, the empty state explains that all pending work is complete and points to the switch. Otherwise the existing empty state remains.
+
+## Fresh-start data
+
+Persistence loading must distinguish two states that are currently both represented by `{}`:
+
+- No stored value: return `null` and create starter data.
+- A stored value, including `{}`: return that value unchanged.
+
+The starter timeline contains three pending todos for the current date:
+
+1. `打开右上角查看已完成`
+2. `点击文字编辑事项`
+3. `点击圆圈完成事项`
+
+The generated ids are deterministic starter-only ids, the date is supplied by the caller, and `dayType` is `0`. On Web, the first load seeds and persists these todos; later loads use localStorage. A stored `{}` remains empty. On a native host without persistent storage, a new process is a fresh start and receives the starter data again, while deletes remain respected for the lifetime of the in-memory store.
+
+Malformed stored JSON is treated as missing data so the application can recover by replacing it with valid starter data.
+
+## Native scroll structure
+
+Lynx documents that direct children of `` support only linear/sticky layout and recommends a single child wrapper for complex content. Both broken surfaces currently violate that constraint.
+
+- Main timeline: add one `.timeline-content` direct child using linear column layout; keep all empty state, transition groups, and spacer inside it. Give `.timeline` a bounded flex box with `height: 0; flex: 1` so content can overflow the viewport.
+- Day selector: add one `.dp-content` direct child using linear column layout inside the already fixed-height `.dp-list`.
+
+This keeps the existing vertical `scroll-orientation`, row sizes, transitions, and Web layout unchanged.
+
+## Testing
+
+- Unit-test starter todo content, date, pending state, and fresh object creation.
+- Unit-test persistence distinction between a missing key and a stored `{}`.
+- Unit-test pending-only versus show-completed timeline projection.
+- Add structural regression tests for the app-bar toggle and single-child linear scroll wrappers.
+- Run TypeScript checks and both Lynx/Web production builds.
+- Browser-test the switch, fresh-start persistence, stored-empty behavior, long timeline scrolling, and day selector scrolling. Native-specific structure is verified against Lynx's documented scroll-view constraints; final physical-device confirmation remains the decisive native check.
diff --git a/docs/superpowers/specs/2026-07-15-header-menu-and-clear-motion-design.md b/docs/superpowers/specs/2026-07-15-header-menu-and-clear-motion-design.md
new file mode 100644
index 0000000..0c6e87b
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-15-header-menu-and-clear-motion-design.md
@@ -0,0 +1,61 @@
+# Header Menu and Clear-Style Timeline Motion Design
+
+## Goals
+
+- Show completed todos by default while keeping the app-bar switch as the explicit visibility control.
+- Remove the Web-only floating overflow button and expose its existing menu by tapping the BusyWeek header brand area.
+- Replace the current enter/leave-only list behavior with continuous displacement motion for retained todos and day cards.
+
+## Constraints and root cause
+
+`vue-lynx@0.4.0` implements `TransitionGroup` enter and leave classes, but its runtime does not implement Vue's FLIP move phase. The `moveClass` prop exists in the public component shape but is never applied. Consequently, a leaving todo can animate horizontally while retained siblings receive their new layout positions in one frame and appear to flash into place.
+
+The solution must run through the same Vue/Lynx template on Native and Web, retain the main timeline's single linear scroll child, and avoid browser-only layout measurement APIs.
+
+## Considered approaches
+
+1. Add `.todo-move` and `.day-move` CSS. This is the normal Vue solution but cannot work until Vue Lynx implements the missing FLIP phase.
+2. Delay the data mutation until the exit animation ends. This preserves the exit but only postpones the sibling jump and makes persistence/state timing more complex.
+3. Use data-driven position slots, following Evan You's HTML5 Clear v2. Every retained item transitions between explicit order-derived `translateY` positions while the departing item transitions independently. This is deterministic without DOM measurements and is the selected approach.
+
+## Timeline layout model
+
+Create a small pure `timelineMotion` module with the shared geometry:
+
+- todo row height: `52px`
+- day header height: `42px`
+- gap before each day card: `10px`
+
+For each visible day, the module produces:
+
+- the day slot's cumulative Y offset;
+- the day todo container height;
+- every todo slot's `index * 52` Y offset;
+- the total day-list height.
+
+The template uses two levels of absolute slots inside bounded relative containers:
+
+- `.day-slot` transitions to its new cumulative Y position. Its inner `.day-group` owns the existing card visuals and enter/leave animation.
+- `.todo-slot` transitions to its new row Y position. Its inner `.todo` owns the existing row visuals and enter/leave animation.
+
+The `.day-list` and each `.day-todos` container transition their calculated height. Therefore a deletion or completed-filter change produces three coordinated signals: the removed content exits left, retained rows move into their exact new slots, and later day cards move with the collapsing card height. Reduced-motion mode reduces all new transform and height transitions to `0.01ms`.
+
+## Header and Web menu
+
+`showCompleted` starts as `true`, so both pending and completed todos are visible on launch. The switch remains session-only and can hide completed todos.
+
+The Web host removes `.ovf-btn` entirely. The existing copy-bundle and Legacy menu remains in light DOM but has no persistent visual trigger. Its script waits for the Lynx shadow root, binds the `.brand` area, and toggles the menu on click or Enter/Space. The brand receives Web-only button semantics and a focus target. Clicking the completed toggle does not open the menu because it is outside the brand target.
+
+Clicking elsewhere closes the menu. Copy behavior and the full-screen Lynx bundle URL remain unchanged. Native has no Web menu binding, so tapping the brand remains inert there.
+
+## Verification
+
+- Unit-test layout offsets before and after removing rows and entire days.
+- Add structural regression tests for default-visible completed state, removal of the floating Web button, header-brand menu binding, nested motion slots, and reduced-motion coverage.
+- Run all Node tests, TypeScript, and production Lynx/Web builds.
+- In the Web runtime, verify the menu, completed switch, deletion, filtering, retained-row displacement, retained-day displacement, and reduced-motion behavior.
+- Treat physical Lynx Explorer verification as the final authority for Native motion timing.
+
+## Reference
+
+The motion model follows the ordering strategy in [yyx990803/HTML5-Clear-v2](https://github.com/yyx990803/HTML5-Clear-v2): items are absolutely positioned and their Y transforms are updated when their order changes, so surrounding content visibly moves instead of being reflowed instantaneously.
diff --git a/package-lock.json b/package-lock.json
index 85766b9..3867239 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "3.0.0",
"license": "ISC",
"dependencies": {
+ "@lynx-js/web-core": "https://pkg.pr.new/@lynx-js/web-core@2971",
"vue": "^3.5.0",
"vue-lynx": "0.4.0"
},
@@ -371,14 +372,7 @@
"node": "^18.14 || >=19.4"
}
},
- "node_modules/@lynx-js/template-webpack-plugin/node_modules/@rspack/lite-tapable": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@rspack/lite-tapable/-/lite-tapable-1.1.0.tgz",
- "integrity": "sha512-E2B0JhYFmVAwdDiG14+DW0Di4Ze4Jg10Pc4/lILUrd5DRCaklduz2OvJ5HYQ6G+hd+WTzqQb3QnDNfK4yvAFYw==",
- "license": "MIT",
- "peer": true
- },
- "node_modules/@lynx-js/web-core": {
+ "node_modules/@lynx-js/template-webpack-plugin/node_modules/@lynx-js/web-core": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/@lynx-js/web-core/-/web-core-0.21.0.tgz",
"integrity": "sha512-GrmABxobiXmFQvjTe9fiSNgZKnG+pswJjSBuD/XOlit+u7vpC1xR1yxJBocalLlSwGJVzpdFE1AbG7y14nQdBw==",
@@ -406,7 +400,7 @@
}
}
},
- "node_modules/@lynx-js/web-elements": {
+ "node_modules/@lynx-js/template-webpack-plugin/node_modules/@lynx-js/web-elements": {
"version": "0.12.3",
"resolved": "https://registry.npmjs.org/@lynx-js/web-elements/-/web-elements-0.12.3.tgz",
"integrity": "sha512-2hww4llLjwl/Q6y53V4roTNnqc/KYtIq2g8E2UD3Lnh35IJKdFTOQGDfyi82vbfkLD+XAvSIHDvP+fQufV6kqg==",
@@ -420,6 +414,60 @@
"tslib": "^2.5.0"
}
},
+ "node_modules/@lynx-js/template-webpack-plugin/node_modules/@lynx-js/web-worker-rpc": {
+ "version": "0.21.0",
+ "resolved": "https://registry.npmjs.org/@lynx-js/web-worker-rpc/-/web-worker-rpc-0.21.0.tgz",
+ "integrity": "sha512-lRVzwz7+vMzSkcHEfDNquNH40f3oki9T3PVDMN4nsLqxu5OesFhRQhLN8HMPaNlx0OL24ZrFdGuRtu0vbxhOOA==",
+ "license": "Apache-2.0",
+ "peer": true
+ },
+ "node_modules/@lynx-js/template-webpack-plugin/node_modules/@rspack/lite-tapable": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/@rspack/lite-tapable/-/lite-tapable-1.1.0.tgz",
+ "integrity": "sha512-E2B0JhYFmVAwdDiG14+DW0Di4Ze4Jg10Pc4/lILUrd5DRCaklduz2OvJ5HYQ6G+hd+WTzqQb3QnDNfK4yvAFYw==",
+ "license": "MIT",
+ "peer": true
+ },
+ "node_modules/@lynx-js/web-core": {
+ "version": "0.22.1",
+ "resolved": "https://pkg.pr.new/@lynx-js/web-core@2971",
+ "integrity": "sha512-xqkFVXp+6IToy2s31qDDwSWG0NyXT7/8g+0wJF8sMvr+d+C4hTWN3P+h88FSpStZP33yaQDrl0ArJKw1goH4+g==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@lynx-js/web-elements": "0.12.5",
+ "@lynx-js/web-worker-rpc": "https://pkg.pr.new/lynx-family/lynx-stack/@lynx-js/web-worker-rpc@76a4d76",
+ "wasm-feature-detect": "^1.8.0"
+ },
+ "peerDependencies": {
+ "@lynx-js/css-serializer": "0.1.6",
+ "@lynx-js/lynx-core": "0.1.4",
+ "tslib": "^2.5.0"
+ },
+ "peerDependenciesMeta": {
+ "@lynx-js/css-serializer": {
+ "optional": true
+ },
+ "@lynx-js/lynx-core": {
+ "optional": true
+ },
+ "tslib": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@lynx-js/web-elements": {
+ "version": "0.12.5",
+ "resolved": "https://registry.npmjs.org/@lynx-js/web-elements/-/web-elements-0.12.5.tgz",
+ "integrity": "sha512-plNOkiI/AvdSqTmsN8jDBtll3SOqfrnLUuqicn3DrMUT7tizUhX6569dLNae8dk9KQqnS1pukUK9d/P/Nw9edg==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "dompurify": "^3.3.1",
+ "markdown-it": "^14.1.0"
+ },
+ "peerDependencies": {
+ "tslib": "^2.5.0"
+ }
+ },
"node_modules/@lynx-js/web-rsbuild-server-middleware": {
"version": "0.19.9",
"resolved": "https://registry.npmjs.org/@lynx-js/web-rsbuild-server-middleware/-/web-rsbuild-server-middleware-0.19.9.tgz",
@@ -428,11 +476,10 @@
"license": "Apache-2.0"
},
"node_modules/@lynx-js/web-worker-rpc": {
- "version": "0.21.0",
- "resolved": "https://registry.npmjs.org/@lynx-js/web-worker-rpc/-/web-worker-rpc-0.21.0.tgz",
- "integrity": "sha512-lRVzwz7+vMzSkcHEfDNquNH40f3oki9T3PVDMN4nsLqxu5OesFhRQhLN8HMPaNlx0OL24ZrFdGuRtu0vbxhOOA==",
- "license": "Apache-2.0",
- "peer": true
+ "version": "0.22.1",
+ "resolved": "https://pkg.pr.new/lynx-family/lynx-stack/@lynx-js/web-worker-rpc@76a4d76",
+ "integrity": "sha512-ixu83cgVbDNL6srOp1S3k5Ww+LkGqO3dMvluAv8VYYRyvoU6i7shp1x14S0TKYktO/VHNQRbojXn6WXIlbtivQ==",
+ "license": "Apache-2.0"
},
"node_modules/@lynx-js/webpack-dev-transport": {
"version": "0.2.0",
@@ -538,9 +585,9 @@
"license": "MIT"
},
"node_modules/@rsbuild/core": {
- "version": "1.7.5",
- "resolved": "https://registry.npmjs.org/@rsbuild/core/-/core-1.7.5.tgz",
- "integrity": "sha512-i37urpoV4y9NSsGiUOuLdoI42KJ5h4gAZ8EG8Ilmsond3bxoAoOCu7YvC+1pJ7p+r16suVPW8cki891ZKHOoXQ==",
+ "version": "1.7.6",
+ "resolved": "https://registry.npmjs.org/@rsbuild/core/-/core-1.7.6.tgz",
+ "integrity": "sha512-T1mLz745L59SM4F5HQFkeGAAsDBeHh2e5sT0cSC5c7xkBpstVWXJrQe5HALS+GvIxiV8cUOy2yD8QBT/Ah11lg==",
"license": "MIT",
"peer": true,
"dependencies": {
@@ -1094,8 +1141,7 @@
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
"license": "MIT",
- "optional": true,
- "peer": true
+ "optional": true
},
"node_modules/@types/ws": {
"version": "8.18.1",
@@ -1585,8 +1631,7 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
- "license": "Python-2.0",
- "peer": true
+ "license": "Python-2.0"
},
"node_modules/array-buffer-byte-length": {
"version": "1.0.2",
@@ -2478,11 +2523,10 @@
}
},
"node_modules/dompurify": {
- "version": "3.4.11",
- "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
- "integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
+ "version": "3.4.12",
+ "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.12.tgz",
+ "integrity": "sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==",
"license": "(MPL-2.0 OR Apache-2.0)",
- "peer": true,
"optionalDependencies": {
"@types/trusted-types": "^2.0.7"
}
@@ -2741,9 +2785,9 @@
}
},
"node_modules/es-module-lexer": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
- "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz",
+ "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==",
"license": "MIT",
"peer": true
},
@@ -3128,13 +3172,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
- "node_modules/glob-to-regexp": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
- "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
- "license": "BSD-2-Clause",
- "peer": true
- },
"node_modules/globalthis": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
@@ -3858,9 +3895,9 @@
}
},
"node_modules/linkify-it": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.1.tgz",
- "integrity": "sha512-wVoTjP4Q6R0NW5hiZkVJaFZPWgtXfoGF+6LucL3/FtiNjmcHhYjEr5f1Kqjirc1nBW07J/ZuRFumqr2oqccEWg==",
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.2.tgz",
+ "integrity": "sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==",
"funding": [
{
"type": "github",
@@ -3872,7 +3909,6 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"uc.micro": "^2.0.0"
}
@@ -3929,9 +3965,9 @@
}
},
"node_modules/markdown-it": {
- "version": "14.2.0",
- "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.2.0.tgz",
- "integrity": "sha512-1TGiQiJVRQ3NPmZH6sx5Cfnmg6GQm9jvC1ch4TK511NjSJvjzKLzn5pPfZRNZkRPZP0HqCioSndqH8v2nRaWVQ==",
+ "version": "14.3.0",
+ "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.3.0.tgz",
+ "integrity": "sha512-RCEsPjR+sr0x+AuYp601tKTkgFG4YEPLCzHST3cQ/fhlJkqAkz1L2/Qbp1j9qw5SBwQHFBoW8+hoN5xssOF0Tw==",
"funding": [
{
"type": "github",
@@ -3943,11 +3979,10 @@
}
],
"license": "MIT",
- "peer": true,
"dependencies": {
"argparse": "^2.0.1",
- "entities": "^4.4.0",
- "linkify-it": "^5.0.1",
+ "entities": "^4.5.0",
+ "linkify-it": "^5.0.2",
"mdurl": "^2.0.0",
"punycode.js": "^2.3.1",
"uc.micro": "^2.1.0"
@@ -3961,7 +3996,6 @@
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"license": "BSD-2-Clause",
- "peer": true,
"engines": {
"node": ">=0.12"
},
@@ -3988,8 +4022,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/media-typer": {
"version": "0.3.0",
@@ -4050,6 +4083,82 @@
"webpack": "^5.0.0"
}
},
+ "node_modules/minimizer-webpack-plugin": {
+ "version": "5.6.1",
+ "resolved": "https://registry.npmjs.org/minimizer-webpack-plugin/-/minimizer-webpack-plugin-5.6.1.tgz",
+ "integrity": "sha512-DoeAZz8Q1C1znwsUzej1fdoi4jCf7/+Em27ouLqfK/+3m8G+D7yDhUwrc3CNhjSzGUN1kn7Iv4sWmjflQHenpw==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "@jridgewell/trace-mapping": "^0.3.25",
+ "jest-worker": "^27.4.5",
+ "schema-utils": "^4.3.0",
+ "terser": "^5.31.1"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/webpack"
+ },
+ "peerDependencies": {
+ "webpack": "^5.1.0"
+ },
+ "peerDependenciesMeta": {
+ "@minify-html/node": {
+ "optional": true
+ },
+ "@swc/core": {
+ "optional": true
+ },
+ "@swc/css": {
+ "optional": true
+ },
+ "@swc/html": {
+ "optional": true
+ },
+ "clean-css": {
+ "optional": true
+ },
+ "cssnano": {
+ "optional": true
+ },
+ "csso": {
+ "optional": true
+ },
+ "esbuild": {
+ "optional": true
+ },
+ "html-minifier-terser": {
+ "optional": true
+ },
+ "lightningcss": {
+ "optional": true
+ },
+ "postcss": {
+ "optional": true
+ },
+ "uglify-js": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/minimizer-webpack-plugin/node_modules/jest-worker": {
+ "version": "27.5.1",
+ "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+ "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+ "license": "MIT",
+ "peer": true,
+ "dependencies": {
+ "@types/node": "*",
+ "merge-stream": "^2.0.0",
+ "supports-color": "^8.0.0"
+ },
+ "engines": {
+ "node": ">= 10.13.0"
+ }
+ },
"node_modules/mrmime": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -4797,7 +4906,6 @@
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=6"
}
@@ -5525,9 +5633,9 @@
}
},
"node_modules/terser": {
- "version": "5.48.0",
- "resolved": "https://registry.npmjs.org/terser/-/terser-5.48.0.tgz",
- "integrity": "sha512-J/9An6vs9Us6wKRriSFXBWdRZapREHqFzdNUKk0pmu804EMR6dr6winwo7e5JDxN4xahxQsuysyYFwlwj4XN/Q==",
+ "version": "5.49.0",
+ "resolved": "https://registry.npmjs.org/terser/-/terser-5.49.0.tgz",
+ "integrity": "sha512-SNiDnXyHSrxVcIOtVbULzcTmniUiwcV7Nwdyj1twVubeTmbjoa8p69KKDpfkdoOavuM4/GRm1+ykI8qqnavHoA==",
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
@@ -5543,82 +5651,6 @@
"node": ">=10"
}
},
- "node_modules/terser-webpack-plugin": {
- "version": "5.6.1",
- "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.6.1.tgz",
- "integrity": "sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==",
- "license": "MIT",
- "peer": true,
- "dependencies": {
- "@jridgewell/trace-mapping": "^0.3.25",
- "jest-worker": "^27.4.5",
- "schema-utils": "^4.3.0",
- "terser": "^5.31.1"
- },
- "engines": {
- "node": ">= 10.13.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/webpack"
- },
- "peerDependencies": {
- "webpack": "^5.1.0"
- },
- "peerDependenciesMeta": {
- "@minify-html/node": {
- "optional": true
- },
- "@swc/core": {
- "optional": true
- },
- "@swc/css": {
- "optional": true
- },
- "@swc/html": {
- "optional": true
- },
- "clean-css": {
- "optional": true
- },
- "cssnano": {
- "optional": true
- },
- "csso": {
- "optional": true
- },
- "esbuild": {
- "optional": true
- },
- "html-minifier-terser": {
- "optional": true
- },
- "lightningcss": {
- "optional": true
- },
- "postcss": {
- "optional": true
- },
- "uglify-js": {
- "optional": true
- }
- }
- },
- "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
- "version": "27.5.1",
- "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
- "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
- "license": "MIT",
- "peer": true,
- "dependencies": {
- "@types/node": "*",
- "merge-stream": "^2.0.0",
- "supports-color": "^8.0.0"
- },
- "engines": {
- "node": ">= 10.13.0"
- }
- },
"node_modules/terser/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -5778,8 +5810,7 @@
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
- "license": "MIT",
- "peer": true
+ "license": "MIT"
},
"node_modules/unbox-primitive": {
"version": "1.1.0",
@@ -6033,9 +6064,9 @@
}
},
"node_modules/webpack": {
- "version": "5.107.2",
- "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.107.2.tgz",
- "integrity": "sha512-v7RhXaJbpMlV0D7hC7lb2EbnxkoeUqf9qhKr6lozx3Q48pmFrqqNRmZFUEGmi7pSwm6fCQ2H1IjvCkHqdpVdjQ==",
+ "version": "5.108.4",
+ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.108.4.tgz",
+ "integrity": "sha512-yur8LyJoeiWh47dErD+Ok7vlbmDsJ3UbbRPAoxbGJ54WpE2y5yVo5G/inUzujnYgw3tPmBRdn+G7PoxXaYC33w==",
"license": "MIT",
"peer": true,
"dependencies": {
@@ -6048,19 +6079,18 @@
"acorn-import-phases": "^1.0.3",
"browserslist": "^4.28.1",
"chrome-trace-event": "^1.0.2",
- "enhanced-resolve": "^5.22.0",
+ "enhanced-resolve": "^5.22.2",
"es-module-lexer": "^2.1.0",
"eslint-scope": "5.1.1",
"events": "^3.2.0",
- "glob-to-regexp": "^0.4.1",
"graceful-fs": "^4.2.11",
"loader-runner": "^4.3.2",
"mime-db": "^1.54.0",
+ "minimizer-webpack-plugin": "^5.6.1",
"neo-async": "^2.6.2",
"schema-utils": "^4.3.3",
"tapable": "^2.3.0",
- "terser-webpack-plugin": "^5.5.0",
- "watchpack": "^2.5.1",
+ "watchpack": "^2.5.2",
"webpack-sources": "^3.5.0"
},
"bin": {
@@ -6080,9 +6110,9 @@
}
},
"node_modules/webpack-sources": {
- "version": "3.5.0",
- "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.5.0.tgz",
- "integrity": "sha512-HPuy+uuoTCaaoEoI1LQ3JN9+vrPBvEesnnX1jADHy728cHSMlq4wUc4afYqahq2B1mhQVZxCXOkNTnXltr+2vQ==",
+ "version": "3.5.1",
+ "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.5.1.tgz",
+ "integrity": "sha512-jyuiGJdtvY434z5bUZrjz67v76/ePNvFZTp9Mdz29IlH4+GPsgyGjiv0fKI+M7BdkU6ADjulUcKAd3tUK3WlEw==",
"license": "MIT",
"peer": true,
"engines": {
@@ -6097,9 +6127,9 @@
"peer": true
},
"node_modules/webpack/node_modules/enhanced-resolve": {
- "version": "5.24.0",
- "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.0.tgz",
- "integrity": "sha512-SkE2t82KlkkxQRVMVLAGKxLfORGQfrkx5dkj+vlgXRVNEdPc4eZcR+J/Fvj8C+yKSFH5L0q3NFlyufOVQnCcYQ==",
+ "version": "5.24.2",
+ "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.2.tgz",
+ "integrity": "sha512-rpsZEGT1jFuve6QlpyRp9ckQ+kN61hvF9BzCPyMdaKTm8UJce96KBn3sorXOFXlzjPrs3Vc4T1NsSroZ3PxlFw==",
"license": "MIT",
"peer": true,
"dependencies": {
diff --git a/package.json b/package.json
index 7211f61..4106a34 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"preview": "rspeedy preview"
},
"dependencies": {
+ "@lynx-js/web-core": "https://pkg.pr.new/@lynx-js/web-core@2971",
"vue": "^3.5.0",
"vue-lynx": "0.4.0"
},
diff --git a/src/App.css b/src/App.css
index d3c490b..6dc17e8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,7 +14,7 @@
to { opacity: 1; }
}
-/* ===== Pinned header (app bar + filters never scroll) ===== */
+/* ===== Pinned app bar ===== */
.header {
position: relative;
z-index: 10;
@@ -32,10 +32,17 @@
display: flex;
flex-direction: row;
align-items: center;
+ justify-content: space-between;
height: 56px;
padding-left: 18px;
padding-right: 18px;
}
+.brand {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+}
.logo {
color: #ffffff;
font-size: 20px;
@@ -49,45 +56,81 @@
margin-top: 4px;
}
-.filters {
- position: relative;
+.completed-toggle {
display: flex;
flex-direction: row;
-}
-.filter {
- flex: 1;
- display: flex;
align-items: center;
justify-content: center;
height: 44px;
+ padding-left: 10px;
}
-.filter:active { background-color: rgba(255, 255, 255, 0.08); }
-.filter-text {
- color: rgba(255, 255, 255, 0.72);
- font-size: 15px;
- transition: color 0.25s ease, font-weight 0.25s ease;
-}
-.filter-text--active {
- color: #ffffff;
- font-weight: 700;
+.completed-toggle-label {
+ color: rgba(255, 255, 255, 0.74);
+ font-size: 13px;
+ margin-right: 8px;
+ transition: color 0.2s ease;
+}
+.completed-toggle-label--on { color: #ffffff; }
+.completed-toggle-track {
+ width: 38px;
+ height: 22px;
+ border-radius: 11px;
+ background-color: rgba(255, 255, 255, 0.28);
+ transition: background-color 0.22s ease;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
-.filter-indicator {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 33.333%;
- height: 3px;
- border-radius: 3px;
+.completed-toggle-track--on { background-color: rgba(255, 255, 255, 0.55); }
+.completed-toggle-thumb {
+ width: 18px;
+ height: 18px;
+ margin-left: 2px;
+ border-radius: 9px;
background-color: #ffffff;
- transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
+ box-shadow: 0px 1px 4px rgba(0, 60, 100, 0.28);
+ transform: translateX(0);
+ transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.5, 1);
}
+.completed-toggle-thumb--on { transform: translateX(16px); }
/* ===== Timeline — the only scroller ===== */
.timeline {
flex: 1;
+ height: 0;
width: 100%;
padding-top: 10px;
}
+.timeline-content {
+ display: linear;
+ linear-direction: column;
+ width: 100%;
+}
+.day-list {
+ position: relative;
+ width: 100%;
+ transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.day-slot {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.day-todos {
+ position: relative;
+ width: 100%;
+ transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.todo-slot {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 52px;
+ transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
.empty {
display: flex;
@@ -117,6 +160,9 @@
.empty-hint { color: #9aa1a9; font-size: 13px; margin-top: 6px; }
.day-group {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
width: 94%;
margin-left: 3%;
margin-top: 10px;
@@ -124,11 +170,6 @@
border-radius: 14px;
overflow: hidden;
box-shadow: 0px 3px 12px rgba(45, 60, 80, 0.08);
- animation: group-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-@keyframes group-in {
- from { opacity: 0; transform: translateY(14px) scale(0.98); }
- to { opacity: 1; transform: translateY(0) scale(1); }
}
.day-header {
@@ -169,19 +210,61 @@
and web — min-height + body padding produced stray top/bottom gaps on the
first/last row under Lynx's native flex layout. */
height: 52px;
- padding-left: 14px;
+ width: 100%;
+ padding-left: 4px;
padding-right: 10px;
border-bottom: 1px solid #f4f6f8;
- transition: background-color 0.2s ease;
- animation: todo-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
-.todo:active { background-color: #f7fafc; }
-.todo--editing { background-color: #f2faff; }
-@keyframes todo-in {
- from { opacity: 0; transform: translateY(-8px); }
- to { opacity: 1; transform: translateY(0); }
+.todo--last { border-bottom-width: 0; }
+
+/* Slot transforms own reordering (Vue Lynx TransitionGroup has no FLIP move
+ phase); nested rows/cards own presence so the two transforms never clash. */
+.todo-leave-active,
+.day-leave-active {
+ z-index: 2;
+}
+.todo-enter-active .todo {
+ transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
+ opacity 220ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.todo-leave-active .todo {
+ transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
+ opacity 160ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.todo-enter-from .todo {
+ opacity: 0;
+ transform: translateY(-10px) scale(0.985);
+}
+.todo-leave-to .todo {
+ opacity: 0;
+ transform: translateX(-24px) scale(0.985);
+}
+.day-enter-active .day-group {
+ transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
+ opacity 260ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.day-leave-active .day-group {
+ transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+ opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.day-enter-from .day-group {
+ opacity: 0;
+ transform: translateY(14px) scale(0.985);
+}
+.day-leave-to .day-group {
+ opacity: 0;
+ transform: translateX(-28px) scale(0.985);
}
+.checkbox-hit {
+ flex-shrink: 0;
+ width: 44px;
+ height: 52px;
+ margin-right: 3px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
.checkbox {
width: 24px;
height: 24px;
@@ -190,10 +273,9 @@
display: flex;
align-items: center;
justify-content: center;
- margin-right: 13px;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
-.checkbox:active { transform: scale(0.88); }
+.checkbox-hit:active .checkbox { transform: scale(0.88); }
.checkbox--checked { background-color: #03a9f4; border-color: #03a9f4; }
.checkbox-mark {
color: #ffffff;
@@ -307,15 +389,6 @@
position: relative;
display: flex;
}
-.addpage-ph {
- position: absolute;
- top: 22px;
- left: 22px;
- right: 22px;
- font-size: 22px;
- line-height: 32px;
- color: rgba(255, 255, 255, 0.68);
-}
/* On web this Lynx