fix(css,preview): scope utilities under the view root, preview with real boards and foreign css

preview/entry.ts

@@ -2,17 +2,46 @@ import { Component, TFile } from "obsidian";
 import { mount } from "svelte";
 import App from "../src/ui/app.svelte";
 import { DEFAULT_SETTINGS } from "../src/settings";
+import type { BeaverCalendarSettings } from "../src/settings";
 import { BoardStore } from "../src/vault/store.svelte";
 
-const BOARDS = ["personal", "work", "reading", "home"];
-const FOLDER = "Boards";
+const FIXTURES = ["personal", "work", "reading", "home"];
+
+/**
+ * Settings come off the query string, so a screenshot can start from the
+ * same preferences a real vault has: ?groupBy=due&includeArchive=1&railCollapsed=1
+ */
+function prefsFromQuery(): Partial<BeaverCalendarSettings> {
+  const params = new URLSearchParams(location.search);
+  const out: Record<string, unknown> = {};
+  const flag = (value: string): boolean => value === "1" || value === "true";
+  for (const [key, value] of params) {
+    if (!(key in DEFAULT_SETTINGS)) continue;
+    const current = DEFAULT_SETTINGS[key as keyof BeaverCalendarSettings];
+    out[key] = typeof current === "boolean" ? flag(value) : value;
+  }
+  return out as Partial<BeaverCalendarSettings>;
+}
 
 async function main(): Promise<void> {
+  // Real boards when the server was given a folder, the fixtures otherwise.
+  const index = (await (await fetch("/boards.json")).json()) as {
+    folder: string;
+    names: string[];
+  } | null;
+  const folder = index?.folder ?? "Boards";
+  const sources = index
+    ? index.names.map((name) => ({ path: `${folder}/${name}`, url: `/boards/${name}` }))
+    : FIXTURES.map((name) => ({
+        path: `${folder}/${name}.md`,
+        url: `/tests/fixtures/${name}.md`,
+      }));
+
   const files = new Map<string, string>();
   await Promise.all(
-    BOARDS.map(async (name) => {
-      const response = await fetch(`/tests/fixtures/${name}.md`);
-      files.set(`${FOLDER}/${name}.md`, await response.text());
+    sources.map(async ({ path, url }) => {
+      const response = await fetch(url);
+      files.set(path, await response.text());
     }),
   );
   const handles = new Map(
@@ -37,7 +66,7 @@ async function main(): Promise<void> {
     plugins: { plugins: {} },
   };
 
-  const settings = { ...DEFAULT_SETTINGS, boardsFolder: FOLDER };
+  const settings = { ...DEFAULT_SETTINGS, boardsFolder: folder, ...prefsFromQuery() };
   const store = new BoardStore(app as never, settings, () => {});
   await store.reloadAll();
 
@@ -58,6 +87,14 @@ async function main(): Promise<void> {
   await wait(50);
   store.keyboard = true;
   const first = store.spheres[0];
+  const tab = async (times: number): Promise<void> => {
+    for (let i = 0; i < times; i += 1) {
+      document.activeElement?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Tab", code: "Tab", bubbles: true }),
+      );
+      await wait(20);
+    }
+  };
   if (scene.startsWith("rail")) {
     store.toggleRail();
     store.railExpanded = new Set([first.path, store.spheres[1].path]);
@@ -85,10 +122,17 @@ async function main(): Promise<void> {
   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);
-    }
+    await tab(3);
+  }
+  // The editor over an existing task, tabbed through to its date field.
+  if (scene === "edit-date") {
+    const task = store.visible[0];
+    store.zone = "task";
+    store.cursorTask = task.id;
+    await wait(20);
+    store.edit(task.id);
+    await wait(50);
+    await tab(3);
   }
 }