feat(ui,store): live today clock, rail as lane filter, b toggle, quick look on space

preview/entry.ts

@@ -50,6 +50,46 @@ async function main(): Promise<void> {
       component: new Component() as never,
     },
   });
+
+  // Scenes for screenshots: open the page with a hash to land in a state.
+  const scene = location.hash.slice(1);
+  if (!scene) return;
+  const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+  await wait(50);
+  store.keyboard = true;
+  const first = store.spheres[0];
+  if (scene.startsWith("rail")) {
+    store.toggleRail();
+    store.railExpanded = new Set([first.path, store.spheres[1].path]);
+    if (scene === "rail-some") {
+      store.toggleSphere(store.spheres[2].path);
+      store.toggleLane(first.path, first.projects[0]);
+      store.cursorRail = `lane:${encodeURIComponent(first.path)} ${encodeURIComponent(first.projects[0])}`;
+    }
+    if (scene === "rail-none") store.filterNone();
+  }
+  if (scene.startsWith("peek")) {
+    if (scene === "peek-cal") store.view = "calendar";
+    if (scene === "peek-notes") store.showDone = true;
+    await wait(20);
+    const task = store.visible.find((item) => item.body.length > 0) ?? store.visible[0];
+    if (scene === "peek-cal") {
+      const key = task.due ?? task.scheduled;
+      if (key) store.focusDay(key);
+    }
+    store.zone = "task";
+    store.cursorTask = task.id;
+    await wait(50);
+    store.peek();
+  }
+  if (scene === "date") {
+    store.write(null, "[data-composer='toolbar']");
+    await wait(50);
+    for (let i = 0; i < 3; i += 1) {
+      document.activeElement?.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true }));
+      await wait(20);
+    }
+  }
 }
 
 void main();