tessera-learn 0.0.9 → 0.0.11

package/src/runtime/navigation.svelte.ts

@@ -1,6 +1,7 @@
 import type { Manifest } from '../plugin/manifest.js';
 import type { CourseConfig } from './types.js';
 import { ProgressState } from './progress.svelte.js';
+import { resolveAccess } from './access.js';
 
 export function isPageComplete(
   index: number,
@@ -22,10 +23,13 @@ export function isPageComplete(
   return (progress.quizScores.get(index) ?? 0) >= config.scoring.passingScore;
 }
 
+export type PageModuleMap = Record<string, () => Promise<unknown>>;
+
 export class NavigationState {
   manifest = $state<Manifest>(null!);
   #progress: ProgressState;
   #config: CourseConfig;
+  #pageModules: PageModuleMap | null = null;
   currentPageIndex = $state(0);
 
   canGoPrev = $derived(this.currentPageIndex > 0);
@@ -36,11 +40,24 @@ export class NavigationState {
     return !this.isPageLocked(next);
   });
 
-  // Cache locked-page lookup as a single derived Set so the sidebar's
-  // per-page `isPageLocked` calls stay O(1). Without this, sequential mode
-  // is O(n²) per render (each `isPageLocked` walks all earlier pages).
-  // Recomputed once per relevant state change.
-  #lockedSet = $derived.by<Set<number>>(() => this.#computeLockedSet());
+  // Memo cache so the derived can return a stable Set reference when
+  // membership is unchanged (two Sets with identical contents are not `===`).
+  // Must NOT be `$state` — that would make this a reactive-state mutation
+  // from inside a derived.
+  #prevLockedSet: Set<number> | null = null;
+  #lockedSet = $derived.by<Set<number>>(() => {
+    const next = this.#computeLockedSet();
+    const prev = this.#prevLockedSet;
+    if (prev && prev.size === next.size) {
+      let same = true;
+      for (const i of next) {
+        if (!prev.has(i)) { same = false; break; }
+      }
+      if (same) return prev;
+    }
+    this.#prevLockedSet = next;
+    return next;
+  });
 
   constructor(manifest: Manifest, progress: ProgressState, config: CourseConfig) {
     this.manifest = manifest;
@@ -48,6 +65,23 @@ export class NavigationState {
     this.#config = config;
   }
 
+  setPageModules(modules: PageModuleMap) {
+    this.#pageModules = modules;
+  }
+
+  /**
+   * Warm the browser module cache for a page chunk. Idempotent — repeated
+   * calls for the same index hit the existing cache. Bails on locked pages
+   * so callers don't need to guard.
+   */
+  prefetch(index: number) {
+    if (!this.#pageModules) return;
+    if (index < 0 || index >= this.manifest.totalPages) return;
+    if (this.isPageLocked(index)) return;
+    const page = this.manifest.pages[index];
+    this.#pageModules[page.importPath]?.();
+  }
+
   goToPage(index: number) {
     if (index < 0 || index >= this.manifest.totalPages) return;
     if (this.isPageLocked(index)) return;
@@ -66,50 +100,22 @@ export class NavigationState {
     return this.#lockedSet.has(index);
   }
 
-  // Compute the locked set in a single forward pass. The built-in modes are
-  // expressed inline (rather than calling resolveAccess/freeAccess/sequential
-  // per page) so the whole walk is O(n). Custom predicates fall back to a
-  // per-page evaluation since their semantics are arbitrary — but it still
-  // runs once per state change rather than once per page per render.
+  // Resolve the access predicate once (custom canAccess, or the free /
+  // sequential preset) and evaluate it per page. Runs once per state change
+  // — the presets are the single source of truth for the gating rules.
   #computeLockedSet(): Set<number> {
     const total = this.manifest.totalPages;
     const locked = new Set<number>();
-
-    if (this.#config.navigation.canAccess) {
-      const fn = this.#config.navigation.canAccess;
-      for (let i = 0; i < total; i++) {
-        if (!fn({
-          pageIndex: i,
-          page: this.manifest.pages[i],
-          manifest: this.manifest,
-          progress: this.#progress,
-          config: this.#config,
-        })) {
-          locked.add(i);
-        }
-      }
-      return locked;
-    }
-
-    if (this.#config.navigation.mode === 'sequential') {
-      // Once any page is incomplete, every later page is locked.
-      for (let i = 1; i < total; i++) {
-        if (!isPageComplete(i - 1, this.manifest, this.#progress, this.#config)) {
-          for (let k = i; k < total; k++) locked.add(k);
-          return locked;
-        }
-      }
-      return locked;
-    }
-
-    // Free mode: a page is locked iff its most-recent gating quiz is unmet.
-    let lastGatingUnmet = false;
+    const access = resolveAccess(this.#config);
     for (let i = 0; i < total; i++) {
-      if (lastGatingUnmet) locked.add(i);
-      const page = this.manifest.pages[i];
-      if (page.quiz?.gatesProgress) {
-        const score = this.#progress.quizScores.get(i) ?? 0;
-        lastGatingUnmet = score < this.#config.scoring.passingScore;
+      if (!access({
+        pageIndex: i,
+        page: this.manifest.pages[i],
+        manifest: this.manifest,
+        progress: this.#progress,
+        config: this.#config,
+      })) {
+        locked.add(i);
       }
     }
     return locked;

package/src/runtime/progress.svelte.ts

@@ -1,8 +1,13 @@
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-import type { Manifest } from '../plugin/manifest.js';
 import type { CourseConfig } from './types.js';
 
 export class ProgressState {
+  #quizGradedIndices: ReadonlySet<number>;
+
+  constructor(quizGradedIndices: ReadonlySet<number>) {
+    this.#quizGradedIndices = quizGradedIndices;
+  }
+
   visitedPages = $state(new SvelteSet<number>());
   quizScores = $state(new SvelteMap<number, number>());
   /**
@@ -114,17 +119,17 @@ export class ProgressState {
     return sum / pageMap.size;
   }
 
-  recalculateCompletion(manifest: Manifest, config: CourseConfig) {
+  recalculateCompletion(totalPages: number, config: CourseConfig) {
     if (this.#manuallyCompleted) return;
     if (config.completion.mode === 'manual') return;
     if (config.completion.mode === 'percentage') {
       const threshold = config.completion.percentageThreshold ?? 100;
-      const percent = manifest.totalPages > 0
-        ? (this.visitedPages.size / manifest.totalPages) * 100
+      const percent = totalPages > 0
+        ? (this.visitedPages.size / totalPages) * 100
         : 0;
       this.completionStatus = percent >= threshold ? 'complete' : 'incomplete';
     } else if (config.completion.mode === 'quiz') {
-      const { indices } = this.#gradedPages(manifest);
+      const { indices } = this.#gradedPages();
       if (indices.length === 0) {
         this.completionStatus = 'incomplete';
         return;
@@ -134,7 +139,7 @@ export class ProgressState {
     }
   }
 
-  recalculateSuccess(manifest: Manifest, config: CourseConfig) {
+  recalculateSuccess(config: CourseConfig) {
     if (config.completion.mode === 'manual') {
       const want = config.completion.requireSuccessStatus;
       // Stay 'unknown' until manual mark fires, so a learner who never
@@ -143,7 +148,7 @@ export class ProgressState {
       return;
     }
 
-    const { indices, attempted } = this.#gradedPages(manifest);
+    const { indices, attempted } = this.#gradedPages();
 
     if (indices.length === 0) {
       this.successStatus = 'unknown';
@@ -158,14 +163,24 @@ export class ProgressState {
     this.successStatus = average >= config.scoring.passingScore ? 'passed' : 'failed';
   }
 
+  /**
+   * Effective graded score for LMS reporting — same union and averaging as
+   * recalculateSuccess, so score and success status can't disagree.
+   */
+  gradedScore(): { average: number; attempted: boolean } {
+    const { indices, attempted } = this.#gradedPages();
+    return { average: this.#gradedAverage(indices), attempted };
+  }
+
   /**
    * Union of pages that contribute to graded scoring: pageConfig graded quizzes
    * plus pages with at least one graded standalone question (deduped).
    * `attempted` is true if any of those pages has a recorded score.
    */
-  #gradedPages(manifest: Manifest): { indices: number[]; attempted: boolean } {
-    const quizPages = manifest.pages.filter(p => p.quiz?.graded).map(p => p.index);
-    const indices = [...new Set([...quizPages, ...this.gradedStandalonePages])];
+  #gradedPages(): { indices: number[]; attempted: boolean } {
+    const merged = new Set(this.#quizGradedIndices);
+    for (const i of this.gradedStandalonePages) merged.add(i);
+    const indices = [...merged];
     const attempted = indices.some(i => this.#hasScore(i));
     return { indices, attempted };
   }

package/src/runtime/quiz-policy.ts

@@ -1,10 +1,12 @@
 /**
- * Quiz config desugaring. Authors drive feedback / retry / submit-gating /
- * scoring with either string enums or predicate functions; this module
- * normalizes both forms into predicates so `useQuiz` only ever interacts
- * with the predicate API.
+ * Quiz config desugaring. Authors pick feedback / retry behavior with string
+ * enums in `pageConfig.quiz`; this module normalizes them into predicates so
+ * `useQuiz` only ever interacts with the predicate API. Config is extracted
+ * from source as a static object literal (JSON5), so only the enum forms are
+ * representable — there are no function-valued options.
  */
 import type { Interaction } from './interaction.js';
+import type { QuizConfig } from './types.js';
 
 export interface QuizQuestionResult {
   /** The original interaction reported for the question. */
@@ -15,12 +17,7 @@ export interface QuizQuestionResult {
   weight: number;
 }
 
-/**
- * State the feedback predicate is given so it can decide independently of
- * the string-enum branches inside `useQuiz`. The predicate is the single
- * source of truth — the enums (`'immediate'` / `'review'`) desugar into
- * predicates over this same state.
- */
+/** State the feedback predicate decides over. */
 export interface FeedbackVisibilityState {
   /** Index of the question being asked about. */
   questionIndex: number;
@@ -30,11 +27,7 @@ export interface FeedbackVisibilityState {
   reviewing: boolean;
   /** Has the question been answered (the shell called `setAnswer`)? */
   hasAnswered: boolean;
-  /**
-   * Has the shell explicitly revealed feedback for this question via
-   * `revealFeedback(index)`? Lets `'immediate'` flows distinguish "answered
-   * but not yet revealed" from "Check Answer button pressed."
-   */
+  /** Has the shell revealed feedback for this question via `revealFeedback`? */
   revealed: boolean;
   /** Number of times `submit()` has fired for this quiz instance. */
   attemptCount: number;
@@ -42,102 +35,29 @@ export interface FeedbackVisibilityState {
 
 export type FeedbackModePredicate = (state: FeedbackVisibilityState) => boolean;
 export type RetryStrategyPredicate = (results: QuizQuestionResult[]) => Set<number>;
-export type CanSubmitPredicate = (answeredCount: number, totalCount: number) => boolean;
-export type ScorePredicate = (results: QuizQuestionResult[]) => number;
-
-export interface QuizPolicyConfig {
-  /**
-   * When feedback for a question should render:
-   *  - `'immediate'` — after the shell calls `revealFeedback(q)` for the question.
-   *  - `'review'` (default) — only while the quiz is in review mode.
-   *  - `'never'` — feedback never renders, no Review button.
-   *  - predicate `(state) => boolean` — full control over visibility.
-   *
-   * Predicates receive a `FeedbackVisibilityState` so they can decide
-   * independently of the enum branches — the enums themselves desugar to
-   * predicates over the same state.
-   */
-  feedbackMode?: 'immediate' | 'review' | 'never' | FeedbackModePredicate;
-  /**
-   * On retry, clear every answer (`'full'`), preserve correct answers
-   * (`'incorrect-only'`), or pass a custom predicate that takes the previous
-   * attempt's results and returns the set of question indices to keep locked.
-   */
-  retryMode?: 'full' | 'incorrect-only' | RetryStrategyPredicate;
-  /**
-   * Custom gate for the Submit button. Defaults to "every registered
-   * question has an answer". Predicates take (answered, total).
-   */
-  canSubmit?: CanSubmitPredicate;
-  /**
-   * Custom score formula. Defaults to weighted-correct percentage —
-   * `Σ(weight × correct) / Σ(weight) × 100`. Authors must return a value in
-   * 0–100; values outside that range warn in dev mode.
-   */
-  score?: ScorePredicate;
-}
 
 /**
- * Resolve the configured feedback policy into a single predicate that owns
- * the "should this question's feedback be visible right now?" decision.
- *
- * The shipping enums desugar to:
- *  - `'immediate'` — visible after the shell calls `revealFeedback(q)` for
- *    the question, OR while the quiz is in review mode.
- *  - `'review'` (default) — visible only while the quiz is in review mode.
- *  - `'never'` — never visible. `useQuiz` short-circuits before calling here.
- *
- * Predicates receive the full visibility state so they can encode any policy
- * — e.g. "only after first wrong attempt": `(s) => s.attemptCount > 0 && s.submitted`.
+ * Resolve the configured feedback policy into the "should this question's
+ * feedback be visible now?" predicate.
+ *  - `'immediate'` — visible after the shell calls `revealFeedback(q)`, or in review.
+ *  - `'review'` (default) — visible only while reviewing.
+ *  - `'never'` — never visible (`useQuiz` short-circuits before calling here).
  */
-export function resolveFeedbackMode(cfg: QuizPolicyConfig | undefined | null): FeedbackModePredicate {
+export function resolveFeedbackMode(cfg: QuizConfig | undefined | null): FeedbackModePredicate {
   const mode = cfg?.feedbackMode;
-  if (typeof mode === 'function') return mode;
-  if (mode === 'immediate') {
-    return (s) => s.revealed || s.reviewing;
-  }
-  if (mode === 'never') {
-    return () => false;
-  }
-  // Default + 'review'
+  if (mode === 'immediate') return (s) => s.revealed || s.reviewing;
+  if (mode === 'never') return () => false;
   return (s) => s.reviewing;
 }
 
-function isDevMode(): boolean {
-  return import.meta.env?.DEV === true;
-}
-
 /**
- * Resolve the configured retry strategy into a predicate that returns the
- * set of question indices to lock as "already correct" on the next attempt.
- *
- *  - `'full'` (default) — reset everything.
+ * Resolve the retry strategy into a predicate returning the set of question
+ * indices to lock as "already correct" on the next attempt.
  *  - `'incorrect-only'` — keep questions the learner got right.
- *  - function — author decides per result.
- *
- * Author predicates are wrapped: a non-Set return turns into "lock nothing"
- * in production and throws in dev so the bug stays local. An author returning
- * `[0, 1]` instead of `new Set([0, 1])` would otherwise silently no-op the
- * lock and quietly break `'incorrect-only'`-style retries.
+ *  - `'full'` (default) — reset everything.
  */
-export function resolveRetryStrategy(cfg: QuizPolicyConfig | undefined | null): RetryStrategyPredicate {
-  const mode = cfg?.retryMode;
-  if (typeof mode === 'function') {
-    return (results) => {
-      const raw = mode(results);
-      if (!(raw instanceof Set)) {
-        if (isDevMode()) {
-          throw new TypeError(
-            `[tessera] quiz retryMode predicate returned ${Object.prototype.toString.call(raw)}; ` +
-              `expected a Set<number> of question indices to lock.`
-          );
-        }
-        return new Set<number>();
-      }
-      return raw;
-    };
-  }
-  if (mode === 'incorrect-only') {
+export function resolveRetryStrategy(cfg: QuizConfig | undefined | null): RetryStrategyPredicate {
+  if (cfg?.retryMode === 'incorrect-only') {
     return (results) => {
       const locked = new Set<number>();
       results.forEach((r, i) => {
@@ -146,82 +66,5 @@ export function resolveRetryStrategy(cfg: QuizPolicyConfig | undefined | null):
       return locked;
     };
   }
-  // Default 'full': clear every answer.
   return () => new Set<number>();
 }
-
-/**
- * Resolve the Submit gate. Default — all answered.
- *
- * Author predicates are wrapped: a non-boolean return is coerced with `!!` in
- * production and throws in dev. Authors returning `answered` (a number) would
- * otherwise enable Submit on `0` answered ↔ disable on a count that happens
- * to equal `NaN` — silently wrong gates either way.
- */
-export function resolveCanSubmit(cfg: QuizPolicyConfig | undefined | null): CanSubmitPredicate {
-  if (typeof cfg?.canSubmit === 'function') {
-    const fn = cfg.canSubmit;
-    return (answered, total) => {
-      const raw = fn(answered, total);
-      if (typeof raw !== 'boolean') {
-        if (isDevMode()) {
-          throw new TypeError(
-            `[tessera] quiz canSubmit predicate returned ${typeof raw}; expected a boolean.`
-          );
-        }
-        return !!raw;
-      }
-      return raw;
-    };
-  }
-  return (answered, total) => total > 0 && answered >= total;
-}
-
-/**
- * Resolve the score formula. Default — weighted-correct percentage. With all
- * weights = 1 (the default for every existing course), the output equals the
- * pre-Phase-5 unweighted formula.
- */
-export function resolveScore(cfg: QuizPolicyConfig | undefined | null): ScorePredicate {
-  if (typeof cfg?.score === 'function') {
-    return (results) => {
-      const raw = cfg.score!(results);
-      const isDev = isDevMode();
-      if (typeof raw !== 'number' || !Number.isFinite(raw)) {
-        // NaN/Infinity/non-number can't ride through to setScore(...) — the LMS
-        // either rejects the cmi write or rolls it up to nonsense. Throw in dev
-        // so the bug stays local; clamp to 0 in prod so a runaway predicate
-        // can't crash the learner's session.
-        if (isDev) {
-          throw new TypeError(
-            `[tessera] quiz score predicate returned ${String(raw)}; expected a finite number in 0–100.`
-          );
-        }
-        return 0;
-      }
-      if (raw < 0 || raw > 100) {
-        if (isDev) {
-          // eslint-disable-next-line no-console
-          console.warn(
-            `[tessera] quiz score predicate returned ${raw}; expected a finite number in 0–100. ` +
-              `Clamping to range — LMSes reject out-of-range cmi.score.raw values.`
-          );
-        }
-        return Math.max(0, Math.min(100, raw));
-      }
-      return raw;
-    };
-  }
-  return (results) => {
-    if (results.length === 0) return 0;
-    let weighted = 0;
-    let totalWeight = 0;
-    for (const r of results) {
-      const w = r.weight > 0 ? r.weight : 1;
-      totalWeight += w;
-      if (r.correct) weighted += w;
-    }
-    if (totalWeight === 0) return 0;
-    return Math.round((weighted / totalWeight) * 100);
-  };
-}

package/src/runtime/xapi/agent-rules.ts

@@ -7,6 +7,11 @@
  * Keeping the rules in one place prevents the two callsites from drifting.
  */
 
+/** Join a field label with a validator suffix: `.foo` chains, others get `: `. */
+export function joinFieldError(label: string, suffix: string): string {
+  return suffix.startsWith('.') ? `${label}${suffix}` : `${label}: ${suffix}`;
+}
+
 /**
  * Validate that a candidate is an Identified Agent per xAPI 1.0.3.
  * Returns null on success or a human-readable error suffix on failure.
@@ -81,10 +86,10 @@ export function validateAgent(actor: unknown): string | null {
  */
 export function validateAuthCredential(auth: string): string | null {
   if (typeof auth !== 'string' || !auth) {
-    return 'auth must be a non-empty string';
+    return 'must be a non-empty string';
   }
   if (/^basic\s/i.test(auth)) {
-    return "auth must be the Basic credential value only, not the full header. Drop the 'Basic ' prefix.";
+    return "must be the Basic credential value only, not the full header. Drop the 'Basic ' prefix.";
   }
   if (/^bearer\s/i.test(auth)) {
     return 'Bearer/OAuth credentials are not supported in v1. Use Basic auth, or wrap your token-exchange in an auth function that returns a Basic credential.';

package/src/runtime/xapi/publisher.ts

@@ -12,8 +12,8 @@ import {
   validatePartialStatement,
   validateAgent,
   validateAuthCredential,
+  joinFieldError,
   XAPIConfigError,
-  XAPIStatementError,
 } from './validation.js';
 import { RETRY_ATTEMPTS, backoffMs } from '../adapters/retry.js';
 
@@ -21,16 +21,6 @@ import { RETRY_ATTEMPTS, backoffMs } from '../adapters/retry.js';
 const CMI5_SESSIONID_EXT =
   'https://w3id.org/xapi/cmi5/context/extensions/sessionid';
 
-/**
- * Combine a field label (e.g. `xapi.actor`) with the prefix-friendly suffix
- * returned by `validateAgent`. Sub-field suffixes start with `.` and chain
- * directly (`xapi.actor.mbox …`); top-level messages get a `: ` separator
- * (`xapi.actor: must be an object`).
- */
-function joinFieldError(label: string, suffix: string): string {
-  return suffix.startsWith('.') ? `${label}${suffix}` : `${label}: ${suffix}`;
-}
-
 export interface XAPIPublisherOptions {
   /** Resolved http(s) endpoint URL. The 'lms' sentinel is a config-layer concept and never reaches the publisher. */
   endpoint: string;

package/src/runtime/xapi/validation.ts

@@ -1,5 +1,5 @@
 import type { PartialStatement } from './types.js';
-export { validateAgent, validateAuthCredential } from './agent-rules.js';
+export { validateAgent, validateAuthCredential, joinFieldError } from './agent-rules.js';
 
 /** Thrown for runtime-validation failures (auth/actor resolver misuse). */
 export class XAPIConfigError extends Error {

package/src/virtual.d.ts

@@ -4,6 +4,19 @@ declare module 'virtual:tessera-layout' {
   export default layout;
 }
 
+declare module 'virtual:tessera-adapter' {
+  import type { PersistenceAdapter } from 'tessera-learn/runtime/persistence.js';
+  import type { CourseConfig } from 'tessera-learn/runtime/types.js';
+  export function createAdapter(config: CourseConfig): PersistenceAdapter;
+}
+
+declare module 'virtual:tessera-xapi-setup' {
+  import type { CourseConfig } from 'tessera-learn/runtime/types.js';
+  import type { PersistenceAdapter } from 'tessera-learn/runtime/persistence.js';
+  import type { XAPIClient } from 'tessera-learn/runtime/xapi/client.js';
+  export function buildXAPIClient(config: CourseConfig, adapter: PersistenceAdapter): Promise<XAPIClient | null>;
+}
+
 interface ImportMetaEnv {
   readonly DEV: boolean;
   readonly PROD: boolean;

package/styles/layout.css

@@ -281,38 +281,48 @@
   z-index: 999;
 }
 
-/* ---- Loading Skeleton ---- */
-.tessera-skeleton {
-  display: flex;
-  flex-direction: column;
-  gap: var(--tessera-spacing-md);
-  padding: var(--tessera-spacing-md) 0;
+/* ---- Loading Bar ---- */
+.tessera-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 2000;
+  pointer-events: none;
+  background-color: transparent;
 }
 
-.tessera-skeleton-line {
-  height: 16px;
-  background-color: var(--tessera-border);
-  border-radius: 4px;
-  animation: tessera-pulse 1.5s ease-in-out infinite;
+.tessera-loading-bar-fill {
+  height: 100%;
+  width: 0;
+  background-color: var(--tessera-primary);
+  box-shadow: 0 0 8px var(--tessera-primary);
+  transition: width 12s cubic-bezier(0.1, 0.7, 0.1, 1);
 }
 
-.tessera-skeleton-line:nth-child(1) { width: 45%; height: 28px; }
-.tessera-skeleton-line:nth-child(2) { width: 100%; }
-.tessera-skeleton-line:nth-child(3) { width: 92%; }
-.tessera-skeleton-line:nth-child(4) { width: 78%; }
-.tessera-skeleton-line:nth-child(5) { width: 85%; }
-.tessera-skeleton-line:nth-child(6) { width: 60%; }
+.tessera-loading-bar.appear .tessera-loading-bar-fill {
+  width: 90%;
+}
 
-@keyframes tessera-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+.tessera-loading-bar.complete .tessera-loading-bar-fill {
+  width: 100%;
+  transition: width 180ms ease-out;
 }
 
-.tessera-skeleton-message {
-  margin-top: var(--tessera-spacing-md);
-  font-size: 0.875rem;
+.tessera-loading-bar-message {
+  position: fixed;
+  top: var(--tessera-spacing-md);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000;
+  margin: 0;
+  padding: 4px 12px;
+  font-size: 0.8125rem;
   color: var(--tessera-text-light);
-  text-align: center;
+  background-color: var(--tessera-bg-secondary);
+  border: 1px solid var(--tessera-border);
+  border-radius: 999px;
 }
 
 /* ---- Buttons ---- */