@starlove/orbit 1.0.5 → 1.0.7

package/public/js/kanban.js

@@ -12,7 +12,8 @@ import {
   typeLabel,
   priorityLabel,
   priorityKeyFor,
-  renderLabels
+  renderLabels,
+  renderMarkdown
 } from "./format.js";
 import { api, withBoardQuery } from "./api.js";
 import { navigate } from "./router.js";
@@ -70,6 +71,11 @@ export function renderBoard() {
     // follow-up click so dropping a card does not also open the detail drawer.
     let suppressClickAfterDrag = false;
     card.addEventListener("click", async (event) => {
+      const clickTarget = event.target instanceof Element ? event.target : event.target?.parentElement;
+      if (clickTarget?.closest("a")) {
+        event.stopPropagation();
+        return;
+      }
       if (suppressClickAfterDrag) {
         suppressClickAfterDrag = false;
         event.preventDefault();
@@ -257,6 +263,14 @@ function renderColumnBody(columnTickets, allTickets) {
       continue;
     }
 
+    // Defer children whose epic is in this column — they'll render under the
+    // epic when the loop reaches it. Without this skip, a child iterated before
+    // its epic would render standalone here, then again inside epic-children
+    // (rendered.add happens at the epic, which may come later in updated_at order).
+    if (t.parent_ticket_id && epicIdsInColumn.has(t.parent_ticket_id)) {
+      continue;
+    }
+
     if (t.parent_ticket_id && epicById.has(t.parent_ticket_id) && !epicIdsInColumn.has(t.parent_ticket_id)) {
       const epic = epicById.get(t.parent_ticket_id);
       const siblings = childrenByEpicId.get(t.parent_ticket_id) || [];
@@ -328,7 +342,8 @@ function renderCard(ticket, { asEpicChild = false } = {}) {
   const priorityKey = priorityKeyFor(ticket.priority);
   const typeText = typeLabel(ticket.type).toUpperCase();
   const isExpanded = state.expandedCardIds.has(ticket.id);
-  const hasExpandable = (ticket.labels && ticket.labels.length) || ticket.parent_ticket || ticket.child_count;
+  const hasDescription = Boolean(String(ticket.description || "").trim());
+  const hasExpandable = hasDescription || (ticket.labels && ticket.labels.length) || ticket.parent_ticket || ticket.child_count;
 
   const triggerInner = `
     <span class="ticket-number">${escapeHtml(ticketLabel(ticket))}</span>
@@ -360,6 +375,7 @@ function renderCard(ticket, { asEpicChild = false } = {}) {
 
       ${hasExpandable ? `
         <div class="card-expandable">
+          ${hasDescription ? `<div class="card-description markdown-body">${renderMarkdown(ticket.description)}</div>` : ""}
           ${renderLabels(ticket.labels)}
           ${ticket.parent_ticket ? `<div class="parent-line">-> ${escapeHtml(ticketLabel(ticket.parent_ticket))}</div>` : ""}
           ${ticket.child_count ? `<div class="child-count">${ticket.child_count} feature${ticket.child_count === 1 ? "" : "s"} inside</div>` : ""}

package/public/js/local-backend.js

@@ -307,7 +307,11 @@ function decorateTickets(snapshot, includeArchived = false) {
   const labelById = Object.fromEntries(labels.map((l) => [l.id, l]));
   const stateById = Object.fromEntries(states.map((s) => [s.id, s]));
   const visible = tickets.filter((t) => includeArchived || !t.archived_at);
-  const sorted = [...visible].sort((a, b) => String(b.updated_at).localeCompare(String(a.updated_at)));
+  const sorted = [...visible].sort((a, b) => {
+    const byTime = String(b.updated_at).localeCompare(String(a.updated_at));
+    if (byTime !== 0) return byTime;
+    return String(a.id).localeCompare(String(b.id));
+  });
   return sorted.map((ticket) => {
     const stateRow = stateById[ticket.state_id];
     const tLabels = ticketLabels
@@ -575,6 +579,17 @@ async function handleStateReorder(boardId, body) {
   });
 }
 
+// Mirrors src/core/tickets.js#bumpTicketUpdatedAt — rolls child activity up to
+// the parent epic so the column sort (updated_at DESC) keeps the epic group
+// near recent child activity even when only its children changed.
+async function bumpTicketUpdatedAt(stores, ticketId, time) {
+  if (!ticketId) return;
+  const parent = await reqPromise(stores.tickets.get(ticketId));
+  if (!parent) return;
+  parent.updated_at = time;
+  stores.tickets.put(parent);
+}
+
 async function handleTicketCreate(body) {
   const db = await openDb();
   return putAndEvent(db, async (stores) => {
@@ -610,6 +625,7 @@ async function handleTicketCreate(body) {
       stores.ticket_labels.put({ key: tlKey(ticket.id, label.id), ticket_id: ticket.id, label_id: label.id });
     }
     recordEvent(stores, "ticket_created", ticket.id, { title: ticket.title, type: ticket.type });
+    await bumpTicketUpdatedAt(stores, ticket.parent_ticket_id, ticket.updated_at);
     return ticket;
   });
 }
@@ -620,6 +636,7 @@ async function handleTicketPatch(ticketId, body) {
     const ticket = await reqPromise(stores.tickets.get(ticketId));
     if (!ticket) throw err(404, "ticket_not_found");
     const oldStateId = ticket.state_id;
+    const oldParentId = ticket.parent_ticket_id;
     const SIMPLE = [
       "title",
       "description",
@@ -663,6 +680,10 @@ async function handleTicketPatch(ticketId, body) {
     } else {
       recordEvent(stores, "ticket_updated", ticketId, { fields: Object.keys(body) });
     }
+    await bumpTicketUpdatedAt(stores, oldParentId, ticket.updated_at);
+    if (ticket.parent_ticket_id && ticket.parent_ticket_id !== oldParentId) {
+      await bumpTicketUpdatedAt(stores, ticket.parent_ticket_id, ticket.updated_at);
+    }
     return ticket;
   });
 }
@@ -678,6 +699,7 @@ async function handleTicketDelete(ticketId) {
     const cmts = await getAll(stores.comments, ticketId, "ticket_id");
     for (const c of cmts) stores.comments.delete(c.id);
     recordEvent(stores, "ticket_deleted", ticketId, {});
+    await bumpTicketUpdatedAt(stores, ticket.parent_ticket_id, nowIso());
     return { ok: true };
   });
 }
@@ -691,6 +713,7 @@ async function handleTicketArchive(ticketId, archive) {
     ticket.updated_at = nowIso();
     stores.tickets.put(ticket);
     recordEvent(stores, archive ? "ticket_archived" : "ticket_restored", ticketId, {});
+    await bumpTicketUpdatedAt(stores, ticket.parent_ticket_id, ticket.updated_at);
     return ticket;
   });
 }
@@ -785,16 +808,20 @@ async function handleCommentCreate(ticketId, body) {
   return putAndEvent(db, async (stores) => {
     const ticket = await reqPromise(stores.tickets.get(ticketId));
     if (!ticket) throw err(404, "ticket_not_found");
+    const time = nowIso();
     const comment = {
       id: uid(),
       ticket_id: ticketId,
       author: "you",
       kind: body.kind || "note",
       body: body.body || "",
-      created_at: nowIso()
+      created_at: time
     };
     stores.comments.put(comment);
+    ticket.updated_at = time;
+    stores.tickets.put(ticket);
     recordEvent(stores, "comment_created", ticketId, { kind: comment.kind });
+    await bumpTicketUpdatedAt(stores, ticket.parent_ticket_id, time);
     return comment;
   });
 }

package/public/js/main.js

@@ -18,7 +18,14 @@ import {
 import { state } from "./state.js";
 import { api, withBoardQuery } from "./api.js";
 import { toast, debounce } from "./toast.js";
-import { navigate, applyRoute, syncUrlFromState, setRouterReady } from "./router.js";
+import {
+  navigate,
+  applyRoute,
+  currentRoute,
+  hasRoute,
+  syncUrlFromState,
+  setRouterReady
+} from "./router.js";
 import {
   openBoardFlyout,
   closeBoardFlyout,
@@ -125,14 +132,15 @@ async function init() {
 
   enableKanbanDragScroll();
 
+  const initialRoute = currentRoute();
+  if (initialRoute.boardSlug) state.boardSlug = initialRoute.boardSlug;
   await load();
 
-  // Activate the router. If the page was loaded with a hash, restore that
-  // view; otherwise canonicalize the URL to reflect the current state so the
-  // back button has a starting point.
+  // Activate the router. If the page was loaded with a hash route, restore
+  // that view; otherwise canonicalize the URL to reflect the current
+  // state so the back button has a starting point.
   setRouterReady(true);
-  const initialHash = location.hash;
-  if (initialHash && initialHash !== "#" && initialHash !== "#/") {
+  if (hasRoute()) {
     await applyRoute();
   } else {
     syncUrlFromState({ replace: true });

package/public/js/motion-preference.js

@@ -0,0 +1,53 @@
+export const REDUCE_MOTION_STORAGE_KEY = "mab_reduce_motion";
+
+function safeStorage(storage) {
+  try {
+    return storage ?? globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function defaultMediaMatcher(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(query)
+    : { matches: false };
+}
+
+export function storedReducedMotionPreference(storage = safeStorage()) {
+  const store = safeStorage(storage);
+  const value = store?.getItem?.(REDUCE_MOTION_STORAGE_KEY);
+  if (value === "true") return true;
+  if (value === "false") return false;
+  return null;
+}
+
+export function browserPrefersReducedMotion(mediaMatcher = defaultMediaMatcher) {
+  try {
+    return !!mediaMatcher("(prefers-reduced-motion: reduce)")?.matches;
+  } catch {
+    return false;
+  }
+}
+
+export function effectiveReducedMotionPreference({ storage = safeStorage(), mediaMatcher = defaultMediaMatcher } = {}) {
+  const stored = storedReducedMotionPreference(storage);
+  return stored ?? browserPrefersReducedMotion(mediaMatcher);
+}
+
+export function setReducedMotionPreference(reduce, storage = safeStorage()) {
+  const store = safeStorage(storage);
+  const value = reduce ? "true" : "false";
+  store?.setItem?.(REDUCE_MOTION_STORAGE_KEY, value);
+  return reduce;
+}
+
+export function applyReducedMotionPreference({
+  doc = globalThis.document,
+  storage = safeStorage(),
+  mediaMatcher = defaultMediaMatcher
+} = {}) {
+  const reduce = effectiveReducedMotionPreference({ storage, mediaMatcher });
+  doc?.documentElement?.setAttribute("data-reduced-motion", reduce ? "reduce" : "allow");
+  return reduce;
+}

package/public/js/router.js

@@ -1,52 +1,51 @@
-// Hash-based router. The URL hash is the source of truth for which view is
-// shown. `navigate()` writes to it; the popstate listener replays it. The
-// in-memory `state` object is still used for rendering — applyRoute() just
-// mirrors the parsed hash into `state` before calling render().
+// Hash router. Copy/share URLs use board slugs, such as
+// `#/b/<boardSlug>`, `#/b/<boardSlug>/t/<ticketId>`, and
+// `#/b/<boardSlug>/settings/<tab>`. Keeping routing in the hash lets the
+// preview app keep working when mounted under `/app/` or opened as static HTML.
 
-import { state } from "./state.js";
-import { SETTINGS_TAB_IDS, normalizeSettingsTab } from "./settings-tabs.js";
+import { currentBoard, state } from "./state.js";
+import { normalizeSettingsTab } from "./settings-tabs.js";
 import { closeMenuFlyouts } from "./board-menu.js";
 import { closeCreateFlyout } from "./create-card.js";
+import {
+  buildRoute,
+  hasRoute,
+  isCanonicalRouteUrl,
+  parseRoute
+} from "./url-routes.js";
 
-const Route = {
-  parse(hash) {
-    const cleaned = String(hash || "").replace(/^#/, "").replace(/^\/+/, "");
-    const parts = cleaned ? cleaned.split("/") : [];
-    const out = { boardId: "", view: "board", ticketId: "", tab: "" };
-    let i = 0;
-    if (parts[i] === "b" && parts[i + 1]) { out.boardId = decodeURIComponent(parts[i + 1]); i += 2; }
-    if (parts[i] === "t" && parts[i + 1]) {
-      out.view = "ticket";
-      out.ticketId = decodeURIComponent(parts[i + 1]);
-    } else if (parts[i] === "settings") {
-      out.view = "settings";
-      const t = parts[i + 1];
-      if (t && SETTINGS_TAB_IDS.has(t)) out.tab = t;
-    }
-    return out;
-  },
-  build({ boardId = "", view = "board", ticketId = "", tab = "" } = {}) {
-    const segs = [];
-    if (boardId) segs.push("b", encodeURIComponent(boardId));
-    if (view === "ticket" && ticketId) segs.push("t", encodeURIComponent(ticketId));
-    else if (view === "settings") {
-      segs.push("settings");
-      if (tab && SETTINGS_TAB_IDS.has(tab)) segs.push(tab);
-    }
-    return "#/" + segs.join("/");
-  },
-  fromState() {
-    let view = "board";
-    if (state.detailMode === "ticket" && state.selectedTicketId) view = "ticket";
-    else if (state.detailMode === "settings") view = "settings";
-    return {
-      boardId: state.boardId,
-      view,
-      ticketId: state.selectedTicketId,
-      tab: view === "settings" ? normalizeSettingsTab(state.settingsTab) : ""
-    };
-  }
-};
+export { buildRoute, hasRoute, parseRoute } from "./url-routes.js";
+
+function boardBySlugOrId(value) {
+  if (!value) return null;
+  const boards = state.data?.boards || [];
+  return boards.find((b) => b.slug === value) || boards.find((b) => b.id === value) || null;
+}
+
+function routeBoardSlug(routeObj = {}) {
+  if (routeObj.boardSlug) return routeObj.boardSlug;
+  if (routeObj.boardId) return boardBySlugOrId(routeObj.boardId)?.slug || routeObj.boardId;
+  return currentBoard()?.slug || state.boardSlug || "";
+}
+
+function normalizeRouteForUrl(routeObj = {}) {
+  return {
+    ...routeObj,
+    boardSlug: routeBoardSlug(routeObj)
+  };
+}
+
+function routeFromState() {
+  let view = "board";
+  if (state.detailMode === "ticket" && state.selectedTicketId) view = "ticket";
+  else if (state.detailMode === "settings") view = "settings";
+  return {
+    boardSlug: currentBoard()?.slug || state.boardSlug,
+    view,
+    ticketId: state.selectedTicketId,
+    tab: view === "settings" ? normalizeSettingsTab(state.settingsTab) : ""
+  };
+}
 
 let routerReady = false;
 
@@ -54,14 +53,19 @@ export function setRouterReady(value) {
   routerReady = value;
 }
 
+export function currentRoute() {
+  return parseRoute(location);
+}
+
 export async function navigate(routeObj, { replace = false } = {}) {
-  const hash = Route.build(routeObj);
-  if (location.hash === hash) {
+  const route = normalizeRouteForUrl(routeObj);
+  const url = buildRoute(route);
+  if (isCanonicalRouteUrl(location, route)) {
     if (routerReady) await applyRoute();
     return;
   }
-  if (replace) history.replaceState(null, "", hash);
-  else history.pushState(null, "", hash);
+  if (replace) history.replaceState(null, "", url);
+  else history.pushState(null, "", url);
   if (routerReady) await applyRoute();
 }
 
@@ -69,17 +73,32 @@ export async function navigate(routeObj, { replace = false } = {}) {
 // Used after flows that already mutated state and called load()/render()
 // (e.g. ticket/board creation).
 export function syncUrlFromState({ replace = false } = {}) {
-  const hash = Route.build(Route.fromState());
-  if (location.hash === hash) return;
-  if (replace) history.replaceState(null, "", hash);
-  else history.pushState(null, "", hash);
+  const route = routeFromState();
+  const url = buildRoute(route);
+  if (isCanonicalRouteUrl(location, route)) return;
+  if (replace) history.replaceState(null, "", url);
+  else history.pushState(null, "", url);
 }
 
 export async function applyRoute() {
   const { load, render } = await import("./app.js");
-  const r = Route.parse(location.hash);
+  const r = currentRoute();
+  const urlHadRoute = hasRoute(location);
   const prevBoardId = state.boardId;
-  if (r.boardId) state.boardId = r.boardId;
+  const routeBoard = boardBySlugOrId(r.boardSlug);
+  const fallbackBoard = routeBoard || (r.boardSlug ? currentBoard() : null);
+
+  if (fallbackBoard) {
+    state.boardId = fallbackBoard.id;
+    state.boardSlug = fallbackBoard.slug;
+  } else if (r.boardSlug) {
+    state.boardSlug = r.boardSlug;
+  }
+
+  const canonicalRoute = fallbackBoard ? { ...r, boardSlug: fallbackBoard.slug } : r;
+  if (urlHadRoute && !isCanonicalRouteUrl(location, canonicalRoute)) {
+    history.replaceState(null, "", buildRoute(canonicalRoute));
+  }
 
   if (r.view === "ticket") {
     state.selectedTicketId = r.ticketId || "";
@@ -103,7 +122,7 @@ export async function applyRoute() {
   closeMenuFlyouts();
   closeCreateFlyout();
 
-  if (r.boardId && r.boardId !== prevBoardId) {
+  if (state.boardId && state.boardId !== prevBoardId) {
     await load();
   }
   await render();

package/public/js/settings-tabs.js

@@ -1,5 +1,5 @@
 /** Settings drawer tab ids — must match URL segments `#/b/…/settings/:tab` and `settings.js` tab config. */
-export const SETTINGS_TAB_IDS = new Set(["lanes", "ai", "notes", "journal", "repository", "archive"]);
+export const SETTINGS_TAB_IDS = new Set(["lanes", "appearance", "ai", "notes", "journal", "repository", "archive"]);
 
 export function normalizeSettingsTab(raw) {
   if (!raw || !SETTINGS_TAB_IDS.has(raw)) return "lanes";

package/public/js/settings.js

@@ -1,5 +1,5 @@
-// Project settings drawer (the cog/settings icon). Six tabs: Lanes, AI,
-// Notes, Journal, Repository, Archive. Owns lane CRUD/reorder, the
+// Project settings drawer (the cog/settings icon). Tabs: Lanes, Appearance,
+// Card Archive, Notes, Journal, AI, Repository. Owns lane CRUD/reorder, the
 // archive list, project context/notes form persistence, and per-tab handler wiring.
 
 import { state, getSettingsTab, statesForProject, ticketsForProject, currentBoard } from "./state.js";
@@ -13,6 +13,14 @@ import { renderBoard } from "./kanban.js";
 import { renderDetailCard } from "./ticket-detail.js";
 import { load } from "./app.js";
 import { features } from "./config.js";
+import {
+  applyReducedMotionPreference,
+  browserPrefersReducedMotion,
+  effectiveReducedMotionPreference,
+  setReducedMotionPreference,
+  storedReducedMotionPreference
+} from "./motion-preference.js";
+import { currentTheme, setThemePreference } from "./theme-preference.js";
 
 const repositoryDelete = {
   boardId: "",
@@ -27,10 +35,11 @@ export async function renderProjectDetail() {
 
   const tabs = [
     { id: "lanes", label: "Lanes" },
+    { id: "appearance", label: "Appearance" },
     { id: "archive", label: "Card Archive" },
     { id: "notes", label: "Notes" },
-    ...(features.ai ? [{ id: "ai", label: "AI" }] : []),
     { id: "journal", label: "Journal" },
+    ...(features.ai ? [{ id: "ai", label: "AI" }] : []),
     { id: "repository", label: "Repository" }
   ];
 
@@ -61,6 +70,8 @@ function renderProjectTabBody(context, tab) {
       return renderNotesSettingsTab(context);
     case "lanes":
       return renderProjectLanesTab();
+    case "appearance":
+      return renderProjectAppearanceTab();
     case "ai":
       return features.ai ? renderProjectAiTab(context) : renderProjectLanesTab();
     case "journal":
@@ -473,6 +484,70 @@ function renderProjectLanesTab() {
   `;
 }
 
+function renderProjectAppearanceTab() {
+  const theme = currentTheme();
+  const reduceMotion = effectiveReducedMotionPreference();
+  const storedMotion = storedReducedMotionPreference();
+  const browserDefault = browserPrefersReducedMotion();
+  const sourceLabel = storedMotion === null
+    ? `Using browser default (${browserDefault ? "reduced motion" : "motion allowed"}).`
+    : "Using your saved preference.";
+
+  return `
+    <div class="section appearance-theme-section">
+      <fieldset class="appearance-theme-field">
+        <legend>Theme</legend>
+        <div class="appearance-theme-options">
+          ${renderThemeOption("light", "Light", theme)}
+          ${renderThemeOption("dark", "Dark", theme)}
+        </div>
+        <p class="description">Applies the light/dark theme used by the top rail toggle.</p>
+      </fieldset>
+    </div>
+    <div class="section">
+      <label class="orbit-check" for="reduceMotionToggle">
+        <input
+          type="checkbox"
+          id="reduceMotionToggle"
+          ${reduceMotion ? "checked" : ""}
+        />
+        <span class="orbit-check-box" aria-hidden="true">
+          <svg viewBox="0 0 16 16" class="orbit-check-tick"><path d="M3.5 8.5l3 3 6-7" /></svg>
+        </span>
+        <span class="orbit-check-label">Reduce theme motion</span>
+      </label>
+      <p class="description">Turns off the animated starfield, meteors, and theme animations. ${escapeHtml(sourceLabel)}</p>
+    </div>
+  `;
+}
+
+function renderThemeOption(value, label, selectedTheme) {
+  const checked = selectedTheme === value ? "checked" : "";
+  const icon = value === "dark"
+    ? '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />'
+    : '<circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />';
+
+  return `
+    <label class="appearance-theme-option">
+      <input type="radio" name="themePreference" value="${value}" ${checked} />
+      <span class="appearance-theme-option-mark" aria-hidden="true">
+        <svg
+          class="appearance-theme-option-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >${icon}</svg>
+      </span>
+      <span class="appearance-theme-option-label">${label}</span>
+    </label>
+  `;
+}
+
 function renderProjectJournalTab(context) {
   const aiEnabled = context.board?.ai_enabled !== 0;
   return `
@@ -609,6 +684,24 @@ function bindProjectTabHandlers(context, tab) {
     });
   }
 
+  if (tab === "appearance") {
+    drawerInner.querySelectorAll("input[name='themePreference']").forEach((input) => {
+      input.addEventListener("change", (event) => {
+        if (!event.currentTarget.checked) return;
+        const theme = setThemePreference(event.currentTarget.value);
+        toast.success(theme === "dark" ? "Dark theme enabled" : "Light theme enabled");
+      });
+    });
+
+    $("#reduceMotionToggle")?.addEventListener("change", (event) => {
+      const reduce = !!event.currentTarget.checked;
+      setReducedMotionPreference(reduce);
+      applyReducedMotionPreference();
+      window.dispatchEvent(new CustomEvent("orbit:motion-preference-change", { detail: { reduce } }));
+      toast.success(reduce ? "Theme motion reduced" : "Theme motion enabled");
+    });
+  }
+
   if (tab === "ai") {
     const updateMcpPreview = () => {
       const osId = $("#mcpOsSelect")?.value || detectedMcpOs();

package/public/js/starscape.js

@@ -9,12 +9,19 @@
 // nebula ghosts, signature stars with spikes, and meteors stay in CSS.
 
 import { themeToggle, themeIcon } from "./dom.js";
+import { applyReducedMotionPreference, effectiveReducedMotionPreference } from "./motion-preference.js";
+import {
+  THEME_CHANGE_EVENT,
+  applyStoredThemePreference,
+  currentTheme,
+  toggleThemePreference
+} from "./theme-preference.js";
 
 // Stored theme must be applied before startStarscape() so its first sync()
 // sees the real theme; otherwise the canvas stays stopped until next resize.
 {
-  const storedTheme = localStorage.getItem("mab_theme");
-  if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
+  applyStoredThemePreference();
+  applyReducedMotionPreference();
 }
 
 const starscape = startStarscape();
@@ -31,19 +38,18 @@ scheduleMeteor();
 }
 
 syncThemeIcon();
-themeToggle.addEventListener("click", () => {
-  const next =
-    document.documentElement.getAttribute("data-theme") === "dark"
-      ? "light"
-      : "dark";
-  document.documentElement.setAttribute("data-theme", next);
-  localStorage.setItem("mab_theme", next);
+themeToggle?.addEventListener("click", () => {
+  toggleThemePreference();
+});
+
+window.addEventListener(THEME_CHANGE_EVENT, () => {
   syncThemeIcon();
   starscape.sync();
 });
 
 function syncThemeIcon() {
-  const dark = document.documentElement.getAttribute("data-theme") === "dark";
+  if (!themeIcon) return;
+  const dark = currentTheme() === "dark";
   themeIcon.innerHTML = dark
     ? '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />'
     : '<circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />';
@@ -207,8 +213,8 @@ function startStarscape() {
   }
 
   function sync() {
-    const isDark = document.documentElement.getAttribute("data-theme") === "dark";
-    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const isDark = currentTheme() === "dark";
+    const reduced = effectiveReducedMotionPreference();
     if (!isDark) {
       stop();
       ctx.clearRect(0, 0, width, height);
@@ -229,7 +235,11 @@ function startStarscape() {
   }, { passive: true });
   window.addEventListener("pointermove", onPointerMove, { passive: true });
   document.addEventListener("visibilitychange", sync);
-  window.matchMedia("(prefers-reduced-motion: reduce)").addEventListener("change", sync);
+  window.matchMedia("(prefers-reduced-motion: reduce)").addEventListener("change", () => {
+    applyReducedMotionPreference();
+    sync();
+  });
+  window.addEventListener("orbit:motion-preference-change", sync);
 
   resize();
   sync();
@@ -259,11 +269,8 @@ function scheduleMeteor() {
 }
 
 function spawnMeteor() {
-  const isDark =
-    document.documentElement.getAttribute("data-theme") === "dark";
-  const reduced = window.matchMedia(
-    "(prefers-reduced-motion: reduce)"
-  ).matches;
+  const isDark = currentTheme() === "dark";
+  const reduced = effectiveReducedMotionPreference();
   const grain = document.querySelector(".grain");
   if (!isDark || reduced || document.hidden || !grain) {
     scheduleMeteor();