@ssejal8/recipe-ui-kit 0.1.0

package/apps/recipe-web/src/lib/stencil/WebComponent.svelte

@@ -0,0 +1,145 @@
+<!--
+  Generic bridge between Svelte 5 and the Stencil custom elements.
+
+  Svelte can render a custom element directly, but two details make a bridge
+  worthwhile for a whole application:
+
+  1. **Properties, not attributes.** Attributes can only carry strings, so an
+     array prop such as `rk-segmented-control.options` has to be assigned as a
+     DOM property. Assigning it *before* the element upgrades would shadow the
+     generated accessor, so writes are deferred until `whenDefined` resolves.
+
+  2. **Case-sensitive event names.** The library emits `rkFavoriteToggle`, not
+     `rkfavoritetoggle`. `addEventListener` preserves case exactly, which keeps
+     the contract identical to the one documented by the library.
+
+  3. **Server-rendered output.** Property assignment cannot happen during SSR,
+     which would leave every card an empty shell until hydration. So each prop
+     is *also* written as a kebab-case attribute. Stencil observes those
+     attributes, so an element upgrades with the right content immediately —
+     before hydration, and even with JavaScript disabled.
+
+  Usage:
+
+      <WebComponent
+        tag="rk-recipe-card"
+        props={{ recipeId: recipe.id, name: recipe.name, favorite }}
+        events={{ rkFavoriteToggle: onToggle }}
+      >
+        <rk-badge slot="actions">30 min</rk-badge>
+      </WebComponent>
+-->
+<script lang="ts">
+  import { whenTagDefined } from './register';
+
+  interface Props {
+    /** Custom element tag name, e.g. `rk-recipe-card`. */
+    tag: string;
+    /** DOM properties to assign. Keys are camelCase, matching the library. */
+    props?: Record<string, unknown>;
+    /** Event listeners, keyed by the exact event name the library emits. */
+    events?: Record<string, (event: CustomEvent<never>) => void>;
+    /** Class applied to the host element, for layout in the parent. */
+    class?: string;
+    /** Inline styles applied to the host element. */
+    style?: string;
+    /** Slot content projected into the element's light DOM. */
+    children?: import('svelte').Snippet;
+  }
+
+  let { tag, props = {}, events = {}, class: className = '', style = '', children }: Props = $props();
+
+  let element = $state<HTMLElement | null>(null);
+  let upgraded = $state(false);
+
+  // Track which keys were last written so a removed prop can be cleared.
+  let applied = new Set<string>();
+
+  const toKebab = (key: string) => key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+
+  /**
+   * Serialises props into attributes for the initial (server-rendered) markup.
+   *
+   * Booleans are written as `"true"` / `"false"` rather than being omitted, so a
+   * prop whose class default is `true` can still be turned off. Arrays and plain
+   * objects are JSON-encoded — the library's complex-prop components document
+   * that fallback, and the property assignment below supersedes it on the client.
+   */
+  const attributes = $derived.by(() => {
+    const out: Record<string, string> = {};
+
+    for (const [key, value] of Object.entries(props)) {
+      if (value === undefined || value === null || typeof value === 'function') continue;
+
+      if (typeof value === 'string') out[toKebab(key)] = value;
+      else if (typeof value === 'number') out[toKebab(key)] = Number.isFinite(value) ? String(value) : '';
+      else if (typeof value === 'boolean') out[toKebab(key)] = String(value);
+      else if (typeof value === 'object') {
+        try {
+          out[toKebab(key)] = JSON.stringify(value);
+        } catch {
+          // Circular or otherwise unserialisable: the property write handles it.
+        }
+      }
+    }
+
+    return out;
+  });
+
+  $effect(() => {
+    // Re-run when the tag changes, so a reused instance registers the new tag.
+    const currentTag = tag;
+    let cancelled = false;
+    upgraded = false;
+
+    whenTagDefined(currentTag).then(() => {
+      if (!cancelled) upgraded = true;
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  $effect(() => {
+    if (!element || !upgraded) return;
+
+    const target = element as unknown as Record<string, unknown>;
+    const nextKeys = new Set(Object.keys(props));
+
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      // Skip no-op writes: Stencil re-renders on every property assignment.
+      if (target[key] === value) continue;
+      target[key] = value;
+    }
+
+    // Reset properties that are no longer being passed, rather than leaving the
+    // element holding a stale value from a previous render.
+    for (const key of applied) {
+      if (!nextKeys.has(key)) target[key] = undefined;
+    }
+
+    applied = nextKeys;
+  });
+
+  $effect(() => {
+    if (!element) return;
+
+    const target = element;
+    const entries = Object.entries(events);
+    for (const [name, handler] of entries) {
+      target.addEventListener(name, handler as EventListener);
+    }
+
+    return () => {
+      for (const [name, handler] of entries) {
+        target.removeEventListener(name, handler as EventListener);
+      }
+    };
+  });
+</script>
+
+<svelte:element this={tag} bind:this={element} {...attributes} class={className} {style}>
+  {@render children?.()}
+</svelte:element>

package/apps/recipe-web/src/lib/stencil/register.ts

@@ -0,0 +1,28 @@
+/**
+ * Registers the published `recipe-kit-stencil` custom elements.
+ *
+ * Custom elements are a browser API, so this must only ever run on the client.
+ * The promise is cached: every component that needs the elements can await the
+ * same registration without triggering a second import.
+ */
+
+let registration: Promise<void> | null = null;
+
+export function registerRecipeKit(): Promise<void> {
+  if (typeof window === 'undefined') return Promise.resolve();
+
+  registration ??= (async () => {
+    // Dynamic import keeps the loader out of the server bundle entirely.
+    const { defineCustomElements } = await import('recipe-kit-stencil/loader');
+    await defineCustomElements(window);
+  })();
+
+  return registration;
+}
+
+/** Resolves once a specific tag has been upgraded and is safe to write props to. */
+export async function whenTagDefined(tag: string): Promise<void> {
+  if (typeof window === 'undefined') return;
+  await registerRecipeKit();
+  await customElements.whenDefined(tag);
+}

package/apps/recipe-web/src/lib/stores/favorites.svelte.ts

@@ -0,0 +1,81 @@
+import type { RecipeSummary } from '$domain/recipe';
+import { Persisted, STORAGE_KEYS } from './persisted.svelte';
+
+interface FavoriteEntry extends RecipeSummary {
+  favoritedAt: number;
+}
+
+/**
+ * Favorites store.
+ *
+ * A full `RecipeSummary` snapshot is saved with each favorite, not just the id,
+ * so the favorites page renders without a network round-trip per recipe.
+ */
+class FavoritesStore {
+  #store = new Persisted<FavoriteEntry[]>(
+    STORAGE_KEYS.favorites,
+    () => [],
+    // Discard anything that does not look like a favorite entry.
+    (raw) => (Array.isArray(raw) ? raw.filter((entry): entry is FavoriteEntry => !!entry && typeof entry.id === 'string') : [])
+  );
+
+  /** Newest first. */
+  get all(): FavoriteEntry[] {
+    return [...this.#store.current].sort((a, b) => b.favoritedAt - a.favoritedAt);
+  }
+
+  get count(): number {
+    return this.#store.current.length;
+  }
+
+  get ids(): Set<string> {
+    return new Set(this.#store.current.map((entry) => entry.id));
+  }
+
+  has(id: string): boolean {
+    return this.#store.current.some((entry) => entry.id === id);
+  }
+
+  add(recipe: RecipeSummary) {
+    if (this.has(recipe.id)) return;
+    this.#store.current = [...this.#store.current, { ...recipe, favoritedAt: Date.now() }];
+    this.#store.save();
+  }
+
+  remove(id: string) {
+    const next = this.#store.current.filter((entry) => entry.id !== id);
+    if (next.length === this.#store.current.length) return;
+    this.#store.current = next;
+    this.#store.save();
+  }
+
+  /** Returns the resulting state, so callers can report it in a toast. */
+  toggle(recipe: RecipeSummary): boolean {
+    if (this.has(recipe.id)) {
+      this.remove(recipe.id);
+      return false;
+    }
+    this.add(recipe);
+    return true;
+  }
+
+  /**
+   * Keeps the stored snapshot current after a user edits their own recipe.
+   * Without this, a renamed recipe would keep its old title in favorites.
+   */
+  sync(recipe: RecipeSummary) {
+    const index = this.#store.current.findIndex((entry) => entry.id === recipe.id);
+    if (index === -1) return;
+    const next = [...this.#store.current];
+    next[index] = { ...next[index], ...recipe };
+    this.#store.current = next;
+    this.#store.save();
+  }
+
+  clear() {
+    this.#store.reset();
+  }
+}
+
+export const favorites = new FavoritesStore();
+export type { FavoriteEntry };

package/apps/recipe-web/src/lib/stores/myRecipes.svelte.ts

@@ -0,0 +1,98 @@
+import { createCustomId, toSummary, type Recipe } from '$domain/recipe';
+import { favorites } from './favorites.svelte';
+import { Persisted, STORAGE_KEYS } from './persisted.svelte';
+import { planner } from './planner.svelte';
+
+/**
+ * Store for user-authored recipes — the writable half of the catalogue.
+ *
+ * Recipes are the only entity the user fully owns, so this store also keeps the
+ * favorites and planner snapshots in step on edit and delete. Doing that here
+ * rather than in each page means no caller can forget it.
+ */
+class MyRecipesStore {
+  #store = new Persisted<Recipe[]>(
+    STORAGE_KEYS.myRecipes,
+    () => [],
+    (raw) => (Array.isArray(raw) ? raw.filter((entry): entry is Recipe => !!entry && typeof entry.id === 'string' && entry.origin === 'custom') : [])
+  );
+
+  /** Most recently updated first. */
+  get all(): Recipe[] {
+    return [...this.#store.current].sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0));
+  }
+
+  get count(): number {
+    return this.#store.current.length;
+  }
+
+  get(id: string): Recipe | undefined {
+    return this.#store.current.find((recipe) => recipe.id === id);
+  }
+
+  has(id: string): boolean {
+    return this.#store.current.some((recipe) => recipe.id === id);
+  }
+
+  /** Case-insensitive duplicate-title check, excluding an optional recipe id. */
+  nameTaken(name: string, exceptId?: string): boolean {
+    const needle = name.trim().toLowerCase();
+    return this.#store.current.some((recipe) => recipe.id !== exceptId && recipe.name.trim().toLowerCase() === needle);
+  }
+
+  create(input: Omit<Recipe, 'id' | 'origin' | 'createdAt' | 'updatedAt'>): Recipe {
+    const now = Date.now();
+    const recipe: Recipe = { ...input, id: createCustomId(), origin: 'custom', createdAt: now, updatedAt: now };
+    this.#store.current = [...this.#store.current, recipe];
+    this.#store.save();
+    return recipe;
+  }
+
+  update(id: string, input: Omit<Recipe, 'id' | 'origin' | 'createdAt' | 'updatedAt'>): Recipe | undefined {
+    const index = this.#store.current.findIndex((recipe) => recipe.id === id);
+    if (index === -1) return undefined;
+
+    const existing = this.#store.current[index];
+    const updated: Recipe = { ...existing, ...input, id, origin: 'custom', updatedAt: Date.now() };
+
+    const next = [...this.#store.current];
+    next[index] = updated;
+    this.#store.current = next;
+    this.#store.save();
+
+    // Propagate the rename / new image to the stored snapshots elsewhere.
+    const summary = toSummary(updated);
+    favorites.sync(summary);
+    planner.syncRecipe(summary);
+
+    return updated;
+  }
+
+  /** Returns the deleted recipe so the caller can offer an undo. */
+  remove(id: string): Recipe | undefined {
+    const recipe = this.get(id);
+    if (!recipe) return undefined;
+
+    this.#store.current = this.#store.current.filter((entry) => entry.id !== id);
+    this.#store.save();
+
+    // A deleted recipe must not linger as a favorite or a planned meal.
+    favorites.remove(id);
+    planner.removeRecipeEverywhere(id);
+
+    return recipe;
+  }
+
+  /** Re-inserts a previously deleted recipe verbatim, for undo. */
+  restore(recipe: Recipe) {
+    if (this.has(recipe.id)) return;
+    this.#store.current = [...this.#store.current, recipe];
+    this.#store.save();
+  }
+
+  clear() {
+    this.#store.reset();
+  }
+}
+
+export const myRecipes = new MyRecipesStore();

package/apps/recipe-web/src/lib/stores/persisted.svelte.ts

@@ -0,0 +1,73 @@
+import { browser } from '$app/environment';
+
+/**
+ * A `$state` value mirrored into `localStorage`.
+ *
+ * Persistence is explicit rather than `$effect`-driven: stores are created at
+ * module scope, outside any component, where effects have no owner. Calling
+ * `save()` from each mutation keeps writes predictable and SSR-safe.
+ *
+ * A `storage` listener keeps duplicate tabs in sync, which matters here because
+ * localStorage is the only source of truth for favorites, recipes and plans.
+ */
+export class Persisted<T> {
+  #key: string;
+  #fallback: () => T;
+  #revive?: (raw: unknown) => T;
+
+  /** The reactive value. Read it in markup; mutate through the owning store. */
+  current = $state<T>(undefined as T);
+
+  constructor(key: string, fallback: () => T, revive?: (raw: unknown) => T) {
+    this.#key = key;
+    this.#fallback = fallback;
+    this.#revive = revive;
+    this.current = fallback();
+
+    if (browser) {
+      this.current = this.#read();
+      window.addEventListener('storage', this.#onStorage);
+    }
+  }
+
+  #read(): T {
+    try {
+      const raw = localStorage.getItem(this.#key);
+      if (raw === null) return this.#fallback();
+      const parsed = JSON.parse(raw) as unknown;
+      return this.#revive ? this.#revive(parsed) : (parsed as T);
+    } catch (error) {
+      // Corrupt or foreign data must not break the app; start clean instead.
+      console.warn(`[store] Could not read "${this.#key}" from localStorage.`, error);
+      return this.#fallback();
+    }
+  }
+
+  #onStorage = (event: StorageEvent) => {
+    if (event.key !== this.#key) return;
+    this.current = this.#read();
+  };
+
+  save() {
+    if (!browser) return;
+    try {
+      localStorage.setItem(this.#key, JSON.stringify(this.current));
+    } catch (error) {
+      // Most likely a full or blocked (private-mode) quota. The in-memory value
+      // stays correct for this session, so surface it without throwing.
+      console.error(`[store] Could not persist "${this.#key}".`, error);
+    }
+  }
+
+  reset() {
+    this.current = this.#fallback();
+    this.save();
+  }
+}
+
+export const STORAGE_KEYS = {
+  favorites: 'recipe-ui:favorites:v1',
+  myRecipes: 'recipe-ui:my-recipes:v1',
+  planner: 'recipe-ui:planner:v1',
+  theme: 'recipe-ui:theme:v1',
+} as const;

package/apps/recipe-web/src/lib/stores/planner.svelte.ts

@@ -0,0 +1,275 @@
+import type { RecipeSummary } from '$domain/recipe';
+import { Persisted, STORAGE_KEYS } from './persisted.svelte';
+
+export const DAYS = [
+  { key: 'mon', label: 'Monday', short: 'Mon' },
+  { key: 'tue', label: 'Tuesday', short: 'Tue' },
+  { key: 'wed', label: 'Wednesday', short: 'Wed' },
+  { key: 'thu', label: 'Thursday', short: 'Thu' },
+  { key: 'fri', label: 'Friday', short: 'Fri' },
+  { key: 'sat', label: 'Saturday', short: 'Sat' },
+  { key: 'sun', label: 'Sunday', short: 'Sun' },
+] as const;
+
+export const MEALS = [
+  { key: 'breakfast', label: 'Breakfast' },
+  { key: 'lunch', label: 'Lunch' },
+  { key: 'dinner', label: 'Dinner' },
+] as const;
+
+export type DayKey = (typeof DAYS)[number]['key'];
+export type MealKey = (typeof MEALS)[number]['key'];
+
+export interface PlannedMeal {
+  recipeId: string;
+  name: string;
+  image?: string;
+  category: string;
+  area: string;
+  origin: 'api' | 'custom';
+  servings?: number;
+  addedAt: number;
+}
+
+/** `{ mon: { dinner: PlannedMeal } }` — sparse; absent keys mean "unplanned". */
+type WeekPlan = Partial<Record<DayKey, Partial<Record<MealKey, PlannedMeal>>>>;
+
+/** Plans are keyed by the Monday of their week, so weeks are addressable. */
+type PlanArchive = Record<string, WeekPlan>;
+
+/* -------------------------------------------------------------- week helpers */
+
+/** ISO week start (Monday) for a date, as a `YYYY-MM-DD` key. */
+export function weekKeyOf(date: Date): string {
+  const copy = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  // getDay(): 0 = Sunday. Shift so Monday is the first day of the week.
+  const offset = (copy.getDay() + 6) % 7;
+  copy.setDate(copy.getDate() - offset);
+  const month = String(copy.getMonth() + 1).padStart(2, '0');
+  const day = String(copy.getDate()).padStart(2, '0');
+  return `${copy.getFullYear()}-${month}-${day}`;
+}
+
+export function currentWeekKey(): string {
+  return weekKeyOf(new Date());
+}
+
+export function shiftWeekKey(key: string, weeks: number): string {
+  const start = parseWeekKey(key);
+  start.setDate(start.getDate() + weeks * 7);
+  return weekKeyOf(start);
+}
+
+export function parseWeekKey(key: string): Date {
+  const [year, month, day] = key.split('-').map(Number);
+  return new Date(year, (month ?? 1) - 1, day ?? 1);
+}
+
+/** "25 Aug – 31 Aug 2026" */
+export function formatWeekRange(key: string): string {
+  const start = parseWeekKey(key);
+  const end = new Date(start);
+  end.setDate(end.getDate() + 6);
+
+  const sameYear = start.getFullYear() === end.getFullYear();
+  const startText = start.toLocaleDateString(undefined, { day: 'numeric', month: 'short', ...(sameYear ? {} : { year: 'numeric' }) });
+  const endText = end.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+  return `${startText} – ${endText}`;
+}
+
+/** The calendar date a given day slot falls on, for date labels in the grid. */
+export function dateForDay(weekKey: string, day: DayKey): Date {
+  const index = DAYS.findIndex((entry) => entry.key === day);
+  const date = parseWeekKey(weekKey);
+  date.setDate(date.getDate() + Math.max(0, index));
+  return date;
+}
+
+/* --------------------------------------------------------------------- store */
+
+class PlannerStore {
+  #store = new Persisted<PlanArchive>(
+    STORAGE_KEYS.planner,
+    () => ({}),
+    (raw) => (raw && typeof raw === 'object' && !Array.isArray(raw) ? (raw as PlanArchive) : {})
+  );
+
+  /** The week currently shown in the planner UI. */
+  selectedWeek = $state(currentWeekKey());
+
+  get archive(): PlanArchive {
+    return this.#store.current;
+  }
+
+  week(weekKey: string = this.selectedWeek): WeekPlan {
+    return this.#store.current[weekKey] ?? {};
+  }
+
+  meal(day: DayKey, mealType: MealKey, weekKey: string = this.selectedWeek): PlannedMeal | undefined {
+    return this.#store.current[weekKey]?.[day]?.[mealType];
+  }
+
+  /** Number of filled slots in a week — used for the "N meals planned" summary. */
+  countFor(weekKey: string = this.selectedWeek): number {
+    const week = this.week(weekKey);
+    return Object.values(week).reduce((total, day) => total + Object.keys(day ?? {}).length, 0);
+  }
+
+  /** Every week that has at least one planned meal, oldest first. */
+  get plannedWeeks(): string[] {
+    return Object.keys(this.#store.current)
+      .filter((key) => this.countFor(key) > 0)
+      .sort();
+  }
+
+  /** Distinct recipes in a week, with how many slots each occupies. */
+  recipesFor(weekKey: string = this.selectedWeek): { meal: PlannedMeal; slots: number }[] {
+    const tally = new Map<string, { meal: PlannedMeal; slots: number }>();
+    for (const day of Object.values(this.week(weekKey))) {
+      for (const meal of Object.values(day ?? {})) {
+        if (!meal) continue;
+        const existing = tally.get(meal.recipeId);
+        if (existing) existing.slots += 1;
+        else tally.set(meal.recipeId, { meal, slots: 1 });
+      }
+    }
+    return [...tally.values()].sort((a, b) => b.slots - a.slots || a.meal.name.localeCompare(b.meal.name));
+  }
+
+  assign(day: DayKey, mealType: MealKey, recipe: RecipeSummary, weekKey: string = this.selectedWeek) {
+    const week = { ...(this.#store.current[weekKey] ?? {}) };
+    week[day] = {
+      ...(week[day] ?? {}),
+      [mealType]: {
+        recipeId: recipe.id,
+        name: recipe.name,
+        image: recipe.image,
+        category: recipe.category,
+        area: recipe.area,
+        origin: recipe.origin,
+        servings: recipe.servings,
+        addedAt: Date.now(),
+      },
+    };
+    this.#store.current = { ...this.#store.current, [weekKey]: week };
+    this.#store.save();
+  }
+
+  remove(day: DayKey, mealType: MealKey, weekKey: string = this.selectedWeek) {
+    const week = this.#store.current[weekKey];
+    if (!week?.[day]?.[mealType]) return;
+
+    const dayPlan = { ...week[day] };
+    delete dayPlan[mealType];
+
+    const nextWeek = { ...week };
+    // Prune empty containers so `countFor` and `plannedWeeks` stay accurate.
+    if (Object.keys(dayPlan).length === 0) delete nextWeek[day];
+    else nextWeek[day] = dayPlan;
+
+    const archive = { ...this.#store.current };
+    if (Object.keys(nextWeek).length === 0) delete archive[weekKey];
+    else archive[weekKey] = nextWeek;
+
+    this.#store.current = archive;
+    this.#store.save();
+  }
+
+  /** Moves a planned meal between slots, used by drag-and-drop. */
+  move(from: { day: DayKey; mealType: MealKey }, to: { day: DayKey; mealType: MealKey }, weekKey: string = this.selectedWeek) {
+    const meal = this.meal(from.day, from.mealType, weekKey);
+    if (!meal) return;
+    if (from.day === to.day && from.mealType === to.mealType) return;
+
+    this.remove(from.day, from.mealType, weekKey);
+    this.assign(to.day, to.mealType, { ...meal, id: meal.recipeId }, weekKey);
+  }
+
+  clearWeek(weekKey: string = this.selectedWeek) {
+    if (!this.#store.current[weekKey]) return;
+    const archive = { ...this.#store.current };
+    delete archive[weekKey];
+    this.#store.current = archive;
+    this.#store.save();
+  }
+
+  /** Copies every meal from one week into another, for "repeat last week". */
+  copyWeek(fromKey: string, toKey: string) {
+    const source = this.#store.current[fromKey];
+    if (!source) return;
+    const clone: WeekPlan = {};
+    for (const [day, meals] of Object.entries(source)) {
+      clone[day as DayKey] = { ...meals };
+    }
+    this.#store.current = { ...this.#store.current, [toKey]: clone };
+    this.#store.save();
+  }
+
+  /** Mirrors an edited recipe's new title / image into every planned slot. */
+  syncRecipe(recipe: RecipeSummary) {
+    let changed = false;
+    const archive: PlanArchive = {};
+
+    for (const [weekKey, week] of Object.entries(this.#store.current)) {
+      const nextWeek: WeekPlan = {};
+      for (const [day, meals] of Object.entries(week)) {
+        const nextMeals: Partial<Record<MealKey, PlannedMeal>> = {};
+        for (const [mealType, meal] of Object.entries(meals ?? {})) {
+          if (meal && meal.recipeId === recipe.id) {
+            nextMeals[mealType as MealKey] = {
+              ...meal,
+              name: recipe.name,
+              image: recipe.image,
+              category: recipe.category,
+              area: recipe.area,
+            };
+            changed = true;
+          } else if (meal) {
+            nextMeals[mealType as MealKey] = meal;
+          }
+        }
+        nextWeek[day as DayKey] = nextMeals;
+      }
+      archive[weekKey] = nextWeek;
+    }
+
+    if (!changed) return;
+    this.#store.current = archive;
+    this.#store.save();
+  }
+
+  /** Drops a recipe from every slot of every week — called when it is deleted. */
+  removeRecipeEverywhere(recipeId: string) {
+    let changed = false;
+    const archive: PlanArchive = {};
+
+    for (const [weekKey, week] of Object.entries(this.#store.current)) {
+      const nextWeek: WeekPlan = {};
+      for (const [day, meals] of Object.entries(week)) {
+        const nextMeals: Partial<Record<MealKey, PlannedMeal>> = {};
+        for (const [mealType, meal] of Object.entries(meals ?? {})) {
+          if (meal && meal.recipeId === recipeId) {
+            changed = true;
+            continue;
+          }
+          if (meal) nextMeals[mealType as MealKey] = meal;
+        }
+        if (Object.keys(nextMeals).length > 0) nextWeek[day as DayKey] = nextMeals;
+      }
+      if (Object.keys(nextWeek).length > 0) archive[weekKey] = nextWeek;
+    }
+
+    if (!changed) return;
+    this.#store.current = archive;
+    this.#store.save();
+  }
+
+  /** Wipes every week and returns the UI to the current week. */
+  clearAll() {
+    this.#store.reset();
+    this.selectedWeek = currentWeekKey();
+  }
+}
+
+export const planner = new PlannerStore();
+export type { WeekPlan, PlanArchive };