unspaghettit 0.2.0 → 0.3.0

package/src/features/builder-mode/presentation/components/BuilderTagChips.svelte

@@ -99,6 +99,7 @@
     onRemove,
     onRename,
     typeOptions = [],
+    collapsible = false,
     class: className = ''
   }: {
     readonly tags: readonly Tag[];
@@ -108,9 +109,15 @@
     readonly onRemove?: (tag: Tag) => void | Promise<void>;
     readonly onRename?: (from: Tag, to: Tag) => void | Promise<void>;
     readonly typeOptions?: readonly string[];
+    // When true (the Builder cards), tags collapse to a compact tag-icon
+    // toggle by default and only reveal the chips + add/edit affordances on
+    // click — they were eating too much vertical space on every card.
+    readonly collapsible?: boolean;
     readonly class?: string;
   } = $props();
 
+  let expanded = $state(false);
+
   const datalistId = `buildertags-types-${++nextDatalistSerial}`;
 
   // Mix the palette color toward a deep slate for the dark builder plate (the
@@ -185,6 +192,23 @@
 {#if tags.length > 0 || onAdd}
   <div class={className} use:animateHeight={adding || editingKey !== null}>
     <div class="flex flex-wrap items-center gap-1.5">
+    {#if collapsible}
+      <button
+        type="button"
+        class="inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium text-slate-400 transition hover:text-brand-300 {expanded ? 'bg-slate-800/60 text-slate-200' : ''}"
+        onclick={() => (expanded = !expanded)}
+        aria-expanded={expanded}
+        aria-label={expanded ? 'Hide tags' : 'Show tags'}
+        title={expanded ? 'Hide tags' : tags.length > 0 ? `Show ${tags.length} tag${tags.length === 1 ? '' : 's'}` : 'Add a tag'}
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="size-3.5" aria-hidden="true">
+          <path d="M20.59 13.41 11 3.83A2 2 0 0 0 9.59 3H4a1 1 0 0 0-1 1v5.59A2 2 0 0 0 3.59 11l9.58 9.59a2 2 0 0 0 2.83 0l4.59-4.59a2 2 0 0 0 0-2.83z" />
+          <circle cx="7.5" cy="7.5" r="1.1" fill="currentColor" stroke="none" />
+        </svg>
+        {#if !expanded && tags.length > 0}<span>{tags.length}</span>{/if}
+      </button>
+    {/if}
+    {#if !collapsible || expanded}
     {#each tags as tag (tagKey(tag))}
       {#if editingKey === tagKey(tag)}
         <form class="inline-flex items-center gap-1" onsubmit={(e) => submitEdit(e, tag)}>
@@ -276,6 +300,7 @@
         >+</button>
       {/if}
     {/if}
+    {/if}
 
     {#if typeOptions.length > 0}
       <datalist id={datalistId}>

package/src/features/builder-mode/presentation/stores/builderModeStore.svelte.ts

@@ -55,6 +55,25 @@ class BuilderModeStore {
 
   loading = $state(true);
   dashboard = $state<BuilderModeDashboard>({ projects: [] });
+  // True once a full read of every project has happened. A deep-linked open
+  // (`?project=<id>`) loads ONLY that project (see `loadProjectOnly`), leaving
+  // this false until the user returns to the all-projects view, which fills in
+  // the rest via `ensureFullyLoaded`. Avoids reading + scoring the whole hub
+  // just to render one deep-linked project.
+  fullyLoaded = $state(false);
+  // Total projects in the hub, tracked apart from `dashboard.projects` because
+  // a deep-linked open only loads one. Cheap to fetch (project docs, no feature
+  // scoring), so the "All projects (N)" label shows the true total even while
+  // only one project is loaded.
+  totalProjectCount = $state(0);
+  // The count to show: the true total once known, else however many are loaded.
+  projectCount = $derived(Math.max(this.totalProjectCount, this.dashboard.projects.length));
+  // How many project cards are still streaming in — drives placeholder
+  // skeletons in the all-projects grid while the progressive load runs. Zero
+  // once fully loaded.
+  pendingProjectCount = $derived(
+    this.fullyLoaded ? 0 : Math.max(0, this.totalProjectCount - this.dashboard.projects.length)
+  );
   // Explicit selection model: `null` means "no filter" (show the whole list,
   // detail pane prompts the user to pick). Selecting a project/core feature
   // filters to it; the UI floats it to the top of its list and pins it sticky.
@@ -311,6 +330,35 @@ class BuilderModeStore {
     return byRelevance(coreFeature.features, (feature) => this.featureScore(feature, q));
   });
 
+  /**
+   * The selected core feature's features grouped by their surface, in surface
+   * (declaration) order. A surface is the higher-level grouping a feature lives
+   * on (Feature › Surface › action-level feature); the Builder lists features
+   * under a surface heading rather than one flat list. Honors the same search
+   * filter as `visibleSelectedFeatures`; empty surfaces are dropped.
+   */
+  visibleSelectedSurfaces = $derived.by<
+    readonly { surfaceId: string; surfaceName: string; features: readonly BuilderModeFeature[] }[]
+  >(() => {
+    const coreFeature = this.selectedCoreFeature;
+    if (!coreFeature) return [];
+    const q = this.searchQuery;
+    const showAll = !q || this.matchesText(q, coreFeature.name, coreFeature.description);
+    const groups: { surfaceId: string; surfaceName: string; features: BuilderModeFeature[] }[] = [];
+    const byId = new Map<string, (typeof groups)[number]>();
+    for (const feature of coreFeature.features) {
+      if (!showAll && this.featureScore(feature, q) === 0) continue;
+      let group = byId.get(feature.surfaceId);
+      if (!group) {
+        group = { surfaceId: feature.surfaceId, surfaceName: feature.surfaceName, features: [] };
+        byId.set(feature.surfaceId, group);
+        groups.push(group);
+      }
+      group.features.push(feature);
+    }
+    return groups;
+  });
+
   setSearch(query: string): void {
     this.search = query;
   }
@@ -368,10 +416,60 @@ class BuilderModeStore {
     );
   }
 
+  /**
+   * Load the full project list PROGRESSIVELY: read the cheap project list
+   * first, then load + score each project independently and stream it into the
+   * dashboard as it resolves — so cards appear one-by-one instead of the whole
+   * grid blocking on the slowest project. Cards are ordered by the project
+   * list regardless of which finishes first. The skeleton shows until the
+   * first card is ready (so the empty-state never flashes mid-load).
+   */
   async refresh(): Promise<void> {
     this.loading = true;
-    await this.refreshSilent();
-    this.loading = false;
+    this.error = null;
+    try {
+      const container = await this.host.data.getContainer();
+      const summaries = await container.useCases.listProjects();
+      this.totalProjectCount = summaries.length;
+      if (summaries.length === 0) {
+        this.dashboard = { projects: [] };
+        this.fullyLoaded = true;
+        this.loading = false;
+        return;
+      }
+      const order = new Map(summaries.map((summary, index) => [String(summary.id), index]));
+      const loadProject = getBuilderModeProjectUseCase({
+        projects: container.projectRepository,
+        features: container.repository,
+        statuses: container.statusRepository
+      });
+      const loaded: BuilderModeProject[] = [];
+      await Promise.all(
+        summaries.map(async (summary) => {
+          const project = await loadProject(asProjectId(String(summary.id)));
+          if (!project) return;
+          loaded.push(project);
+          // Keep the visible order stable (project-list order), independent of
+          // which load finishes first.
+          loaded.sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0));
+          this.dashboard = { projects: [...loaded] };
+          this.loading = false; // reveal the grid as soon as one card is ready
+        })
+      );
+      this.fullyLoaded = true;
+      this.loading = false;
+      if (
+        this.selectedProjectId &&
+        !this.dashboard.projects.some((project) => project.id === this.selectedProjectId)
+      ) {
+        this.selectedProjectId = null;
+        this.selectedCoreFeatureId = null;
+      }
+      await this.refreshQueue();
+    } catch (e) {
+      this.error = (e as Error).message;
+      this.loading = false;
+    }
   }
 
   async refreshSilent(): Promise<void> {
@@ -383,6 +481,8 @@ class BuilderModeStore {
         statuses: container.statusRepository
       });
       this.dashboard = await loadDashboard();
+      this.fullyLoaded = true;
+      this.totalProjectCount = this.dashboard.projects.length;
       if (
         this.selectedProjectId &&
         !this.dashboard.projects.some((project) => project.id === this.selectedProjectId)
@@ -397,17 +497,74 @@ class BuilderModeStore {
     }
   }
 
+  /**
+   * Load ONLY the given project (its features, scores, queue) into the
+   * dashboard — used on a deep-linked open so we don't read and score every
+   * project in the hub just to show one. The rest of the list stays unloaded
+   * (`fullyLoaded=false`) until `ensureFullyLoaded` runs. Falls back to a full
+   * read when the id can't be resolved alone, so an unknown/stale link still
+   * lands the user on a usable list.
+   */
+  async loadProjectOnly(projectId: string): Promise<void> {
+    this.loading = true;
+    // Fetch the real total in parallel so "All projects (N)" is right.
+    void this.refreshProjectCount();
+    try {
+      const container = await this.host.data.getContainer();
+      const loadProject = getBuilderModeProjectUseCase({
+        projects: container.projectRepository,
+        features: container.repository,
+        statuses: container.statusRepository
+      });
+      const project = await loadProject(asProjectId(projectId));
+      if (!project) {
+        await this.refreshSilent();
+      } else {
+        this.dashboard = { projects: [project] };
+        this.fullyLoaded = false;
+        this.error = null;
+        await this.refreshQueue();
+      }
+    } catch (e) {
+      this.error = (e as Error).message;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /** Ensure the whole project list is loaded (for the all-projects view). A
+   *  no-op once any full read has happened, so returning from a deep-linked
+   *  project triggers exactly one full load. */
+  async ensureFullyLoaded(): Promise<void> {
+    if (this.fullyLoaded) return;
+    await this.refresh();
+  }
+
+  /** Fetch the true total project count (cheap — project docs only, no feature
+   *  scoring) so the "All projects (N)" label is correct even when a single
+   *  project was deep-loaded. Decorative: failures are ignored. */
+  async refreshProjectCount(): Promise<void> {
+    try {
+      const container = await this.host.data.getContainer();
+      this.totalProjectCount = (await container.useCases.listProjects()).length;
+    } catch {
+      // Count is decorative; leave the previous value.
+    }
+  }
+
   selectProject(id: string): void {
     this.selectedProjectId = id;
     this.selectedCoreFeatureId = null;
     void this.refreshQueue();
   }
 
-  /** Cancel the project filter. */
+  /** Cancel the project filter. Returning to the all-projects view fills the
+   *  list if a deep-linked open only loaded one project. */
   deselectProject(): void {
     this.selectedProjectId = null;
     this.selectedCoreFeatureId = null;
     this.queue = [];
+    void this.ensureFullyLoaded();
   }
 
   /** Toggle a core feature filter (click the selected one again to clear). */
@@ -415,6 +572,27 @@ class BuilderModeStore {
     this.selectedCoreFeatureId = this.selectedCoreFeatureId === id ? null : id;
   }
 
+  /**
+   * Set the full project + core-feature selection in ONE synchronous pass.
+   * Used when restoring from the URL (deep-link / refresh-persist, and the
+   * activity-toast "View" links that target the Builder while it's already
+   * open). Doing both at once avoids the project change transiently clearing
+   * the core and the URL writer racing to drop the `core` param before it's
+   * applied. Idempotent and order-independent for the URL ↔ store sync.
+   */
+  applySelection(projectId: string | null, coreFeatureId: string | null): void {
+    if (this.selectedProjectId !== projectId) {
+      this.selectedProjectId = projectId;
+      this.selectedCoreFeatureId = null;
+      this.queue = [];
+      void this.refreshQueue();
+      // Clearing the project (back to the all-projects view) needs the full
+      // list if we only deep-loaded one project.
+      if (!projectId) void this.ensureFullyLoaded();
+    }
+    this.selectedCoreFeatureId = coreFeatureId;
+  }
+
   deselectCoreFeature(): void {
     this.selectedCoreFeatureId = null;
   }
@@ -651,6 +829,72 @@ class BuilderModeStore {
     if (this.selectedProjectId) await this.refreshProject(this.selectedProjectId);
   }
 
+  private hasProject(projectId: string): boolean {
+    return this.dashboard.projects.some((project) => project.id === projectId);
+  }
+
+  /** The project whose core features include `featureId`, or null. A model
+   *  Feature maps to one Builder "core feature", so a feature/status event
+   *  touches exactly one project's card. */
+  private projectIdOwningFeature(featureId: string): string | null {
+    for (const project of this.dashboard.projects) {
+      if (project.coreFeatures.some((coreFeature) => coreFeature.id === featureId)) {
+        return project.id;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Apply one out-of-band sync event (MCP write) with the SMALLEST refresh
+   * that keeps the view correct — the Builder's mirror of the Expert view's
+   * refetchOne/syncWith. A `project` event rebuilds just that project's card
+   * in place; a `feature`/`implementation-status` event rebuilds only the
+   * owning project. Both reuse the keyed lists, so scroll, selection, queue
+   * widget, and expanded descriptions survive instead of the whole dashboard
+   * blanking and re-running its entrance animations. We fall back to a full
+   * silent refresh ONLY when the event names something we don't have yet (a
+   * brand-new project, or a feature not attached to any loaded project) —
+   * that's the one case a scoped rebuild can't surface.
+   */
+  async applySyncEvent(event: SyncEvent): Promise<void> {
+    if (event.kind === 'project') {
+      if (this.hasProject(event.id)) {
+        await this.refreshProject(event.id);
+        // Queue lives on the project; an enqueue/reorder/target write rides
+        // the same 'project' event, so refresh it when the open project moved.
+        if (event.id === this.selectedProjectId) await this.refreshQueue();
+      } else {
+        await this.refreshSilent();
+      }
+      return;
+    }
+    // 'feature' and 'implementation-status' both carry a feature id.
+    const projectId = this.projectIdOwningFeature(event.id);
+    if (projectId) {
+      await this.refreshProject(projectId);
+      if (projectId === this.selectedProjectId) await this.refreshQueue();
+    } else {
+      await this.refreshSilent();
+    }
+  }
+
+  /**
+   * A Builder deep-link for an entity touched by a sync event, or null when it
+   * isn't shown in the Builder (so the activity-toast falls back to the Expert
+   * route). A `project` event targets the project card; `feature` /
+   * `implementation-status` (both carry a feature id) target that feature's
+   * core card via `?project=&core=`.
+   */
+  deepLinkFor(kind: SyncEvent['kind'], id: string): string | null {
+    if (kind === 'project') {
+      return this.hasProject(id) ? `/builder-mode?project=${encodeURIComponent(id)}` : null;
+    }
+    const projectId = this.projectIdOwningFeature(id);
+    if (!projectId) return null;
+    return `/builder-mode?project=${encodeURIComponent(projectId)}&core=${encodeURIComponent(id)}`;
+  }
+
   /** Drag-and-drop reorder: drop `itemId` at absolute position `targetIndex`. */
   async moveQueueTo(itemId: QueueItemId, targetIndex: number): Promise<void> {
     const projectId = this.selectedProjectId;

package/src/features/projects/presentation/components/ProjectEditor.svelte

@@ -173,6 +173,13 @@
           <span aria-hidden="true">←</span>
           Back to projects
         </a>
+        <a
+          href={`/projects/${project.id}/graph`}
+          class="inline-flex items-center gap-1.5 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:border-brand-300 hover:bg-cyan-50 hover:text-brand-800"
+          title="Open the whole project behavior graph"
+        >
+          Graph
+        </a>
         <button
           type="button"
           class="inline-flex items-center gap-1.5 rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:border-brand-300 hover:bg-cyan-50 hover:text-brand-800 disabled:opacity-50"

package/src/features/simulator/application/use-cases/RunScenarios.ts

@@ -158,13 +158,27 @@ const evaluateAssertions = (
         ...(a.description ? { description: a.description } : {})
       };
     }
+    // Guard a malformed assertion that carries no state path (untyped scenario
+    // data can deserialize with `path: undefined`). Evaluating it would call
+    // `readPath(undefined)` → `undefined.split('.')` and crash the WHOLE
+    // feature's run. Report it as not-held with a clear path string instead, so
+    // one bad assertion fails just its own scenario rather than the run.
+    const rawPath: unknown = a.path;
+    if (typeof rawPath !== 'string' || rawPath.length === 0) {
+      return {
+        path: String(a.path),
+        operator: a.operator,
+        held: false,
+        ...(a.description ? { description: a.description } : {})
+      };
+    }
     const held = evaluateCondition(
       { left: a.path, operator: a.operator, right: a.value },
       snapshot,
       params
     );
     return {
-      path: String(a.path),
+      path: rawPath,
       operator: a.operator,
       held,
       ...(a.description ? { description: a.description } : {})

package/src/hooks.server.ts

@@ -1,10 +1,12 @@
 import type { Handle } from '@sveltejs/kit';
+import { env } from '$env/dynamic/public';
 import {
   checkOrigin,
   checkRequestAuth,
   isAuthEnabled,
   isOriginCheckEnabled
 } from '$lib/server/security/auth';
+import { parseThemeId } from '$lib/theme/registry';
 
 /**
  * Global request gate for the dashboard. When `UNSPA_AUTH_TOKEN` is
@@ -35,5 +37,13 @@ export const handle: Handle = async ({ event, resolve }) => {
       });
     }
   }
-  return resolve(event);
+  // Seed the initial colour theme into the server-rendered <html data-theme>
+  // so the CLI default (PUBLIC_UNSPA_THEME) paints with no flash. The inline
+  // head script in app.html may still override this from localStorage when the
+  // user picked a theme via the in-app switcher. Inert for HTML responses that
+  // don't carry the placeholder (e.g. the /api JSON above already returned).
+  const theme = parseThemeId(env.PUBLIC_UNSPA_THEME);
+  return resolve(event, {
+    transformPageChunk: ({ html }) => html.replace('%unspa.theme%', theme)
+  });
 };

package/src/lib/theme/registry.ts

@@ -0,0 +1,77 @@
+/**
+ * Dashboard theme registry.
+ *
+ * A "theme" is a purely cosmetic skin over the design system — it swaps the
+ * `@theme` color-token *values* (the brand ramp, the canvas, the hairline) and
+ * a little chrome (the header/shell background). It never adds, removes, or
+ * moves a feature: every surface, action, and control is identical between
+ * themes; only the colours change.
+ *
+ * Default is the always-present base look (the teal/cyan brand). Every other
+ * theme is opt-in, chosen at runtime by `PUBLIC_UNSPA_THEME` (the CLI default,
+ * via `unspa theme set` / `unspa dashboard --theme`) and overridable live in
+ * the browser by the header switcher (persisted in localStorage).
+ *
+ * This module is pure (no `$env`, no Svelte, no DOM) so it's unit-testable; the
+ * runtime wiring lives in `themeStore.svelte.ts` (browser) and `hooks.server.ts`
+ * (initial server-rendered attribute).
+ */
+export type DashboardThemeId = 'default' | 'lyriks';
+
+export interface DashboardTheme {
+  readonly id: DashboardThemeId;
+  readonly label: string;
+  readonly description: string;
+  /** A representative CSS `background` value, shown as a swatch in the switcher. */
+  readonly swatch: string;
+}
+
+/** The base theme. Always available; the look you get with no theme set. */
+const DEFAULT: DashboardTheme = {
+  id: 'default',
+  label: 'Default',
+  description: 'The standard Unspaghettit look — teal/cyan brand on a soft canvas.',
+  swatch: 'linear-gradient(135deg,#22d3ee,#06b6d4,#0e7490)'
+};
+
+/** Opt-in themes, keyed by the id used in `PUBLIC_UNSPA_THEME`. */
+const OPTIONAL_THEMES: Readonly<Record<string, DashboardTheme>> = {
+  lyriks: {
+    id: 'lyriks',
+    label: 'Lyriks',
+    description: 'Lyriks.io brand skin — a violet→fuchsia gradient header over a cool canvas.',
+    swatch: 'linear-gradient(90deg,#6d28d9,#a21caf,#db2777)'
+  }
+};
+
+/** Default first, then the opt-in themes, in registration order. */
+export const ALL_THEMES: readonly DashboardTheme[] = [DEFAULT, ...Object.values(OPTIONAL_THEMES)];
+
+/**
+ * Parse a raw `PUBLIC_UNSPA_THEME` (or localStorage / CLI) value into a known
+ * theme id. Trims + lowercases; anything unrecognised (including the literal
+ * "default" and the unreplaced `%unspa.theme%` placeholder) falls back to the
+ * default theme, so a bad value never blanks the UI.
+ */
+export const parseThemeId = (raw: string | undefined): DashboardThemeId => {
+  const id = (raw ?? '').trim().toLowerCase();
+  return id in OPTIONAL_THEMES ? (id as DashboardThemeId) : 'default';
+};
+
+/** Resolve a raw value into its full theme definition. */
+export const resolveTheme = (raw: string | undefined): DashboardTheme => {
+  const id = parseThemeId(raw);
+  return id === 'default' ? DEFAULT : OPTIONAL_THEMES[id]!;
+};
+
+/** The opt-in themes (everything except the always-on default base). */
+export const optionalThemes = (): readonly DashboardTheme[] => Object.values(OPTIONAL_THEMES);
+
+/**
+ * Whether `id` names a known theme — including the always-valid "default", so
+ * the CLI accepts `unspa theme set default` as an explicit revert.
+ */
+export const isThemeId = (id: string): boolean => {
+  const normalized = id.trim().toLowerCase();
+  return normalized === 'default' || Object.prototype.hasOwnProperty.call(OPTIONAL_THEMES, normalized);
+};

package/src/lib/theme/themeStore.svelte.ts

@@ -0,0 +1,64 @@
+/**
+ * Active dashboard theme. Purely cosmetic — it only decides which colour skin
+ * the design system renders with (see `registry.ts`); no feature ever depends
+ * on it.
+ *
+ * Resolution order, highest priority first:
+ *   1. The browser choice made via the header switcher (localStorage).
+ *   2. The CLI default (`PUBLIC_UNSPA_THEME`, set by `unspa theme set` /
+ *      `unspa dashboard --theme`).
+ *   3. The default theme.
+ *
+ * The initial value is seeded from `PUBLIC_UNSPA_THEME` so server-side
+ * rendering paints the CLI-default chrome with no flash. On the client,
+ * `init()` re-reads the `data-theme` attribute on <html> — which the inline
+ * head script in app.html has already overridden from localStorage when the
+ * user has a saved choice — and mirrors it into reactive state so the chrome in
+ * the layout (header gradient, canvas) tracks it. `setTheme` updates the
+ * attribute (re-skinning every token-driven colour) and persists to
+ * localStorage, all live, no reload.
+ *
+ * Browser-only side effects are guarded so the store is SSR-safe.
+ */
+import { env } from '$env/dynamic/public';
+import { parseThemeId, type DashboardThemeId } from './registry';
+
+const STORAGE_KEY = 'unspa.theme';
+
+class ThemeStore {
+  /** The currently applied theme id. */
+  current = $state<DashboardThemeId>(parseThemeId(env.PUBLIC_UNSPA_THEME));
+  private initialized = false;
+
+  /**
+   * Hydrate from the `data-theme` attribute already on <html> (server default,
+   * possibly overridden by the inline head script from localStorage). Idempotent.
+   */
+  init(): void {
+    if (this.initialized) return;
+    this.initialized = true;
+    if (typeof document === 'undefined') return;
+    this.current = parseThemeId(document.documentElement.dataset.theme);
+  }
+
+  /** Apply a theme live: reactive state + the <html> attribute + localStorage. */
+  setTheme(next: DashboardThemeId): void {
+    const id = parseThemeId(next);
+    this.current = id;
+    if (typeof document !== 'undefined') {
+      document.documentElement.dataset.theme = id;
+    }
+    if (typeof localStorage === 'undefined') return;
+    // Only persist a non-default choice; clearing the key lets the CLI default
+    // (PUBLIC_UNSPA_THEME) win again on the next load.
+    if (id === 'default') localStorage.removeItem(STORAGE_KEY);
+    else localStorage.setItem(STORAGE_KEY, id);
+  }
+
+  /** Convenience flag for the layout's chrome conditionals. */
+  get isLyriks(): boolean {
+    return this.current === 'lyriks';
+  }
+}
+
+export const themeStore = new ThemeStore();