@ssejal8/recipe-ui-kit 0.1.0

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

@@ -0,0 +1,67 @@
+import { browser } from '$app/environment';
+import { Persisted, STORAGE_KEYS } from './persisted.svelte';
+
+export type Theme = 'light' | 'dark';
+
+/**
+ * Light / dark theme.
+ *
+ * Both `data-theme` (used by the app shell) and `data-rk-theme` (used by
+ * recipe-kit-stencil) are set, so the Svelte chrome and the web components
+ * always agree. The initial value is applied by an inline script in `app.html`
+ * to avoid a flash of the wrong palette before hydration.
+ */
+class ThemeStore {
+  #store = new Persisted<Theme | null>(STORAGE_KEYS.theme, () => null, (raw) => (raw === 'dark' || raw === 'light' ? raw : null));
+
+  #system = $state<Theme>('light');
+
+  constructor() {
+    if (!browser) return;
+
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    this.#system = query.matches ? 'dark' : 'light';
+    query.addEventListener('change', (event) => {
+      this.#system = event.matches ? 'dark' : 'light';
+      if (this.#store.current === null) this.#apply();
+    });
+
+    this.#apply();
+  }
+
+  /** The theme in effect: the explicit choice, or the OS preference. */
+  get current(): Theme {
+    return this.#store.current ?? this.#system;
+  }
+
+  /** True when the user has not made an explicit choice. */
+  get followsSystem(): boolean {
+    return this.#store.current === null;
+  }
+
+  #apply() {
+    if (!browser) return;
+    const resolved = this.current;
+    document.documentElement.dataset.theme = resolved;
+    document.documentElement.dataset.rkTheme = resolved;
+  }
+
+  set(theme: Theme) {
+    this.#store.current = theme;
+    this.#store.save();
+    this.#apply();
+  }
+
+  toggle() {
+    this.set(this.current === 'dark' ? 'light' : 'dark');
+  }
+
+  /** Clears the explicit choice and follows the OS again. */
+  useSystem() {
+    this.#store.current = null;
+    this.#store.save();
+    this.#apply();
+  }
+}
+
+export const theme = new ThemeStore();

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

@@ -0,0 +1,66 @@
+export type ToastTone = 'info' | 'success' | 'error';
+
+export interface Toast {
+  id: number;
+  message: string;
+  tone: ToastTone;
+  /** Optional single action, e.g. "Undo". */
+  action?: { label: string; run: () => void };
+}
+
+const DEFAULT_TIMEOUT = 4200;
+
+/**
+ * Transient feedback queue. Not persisted — toasts are session-only by design.
+ */
+class ToastStore {
+  #items = $state<Toast[]>([]);
+  #nextId = 1;
+  #timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+  get all(): Toast[] {
+    return this.#items;
+  }
+
+  push(message: string, options: { tone?: ToastTone; action?: Toast['action']; timeout?: number } = {}): number {
+    const id = this.#nextId++;
+    const toast: Toast = { id, message, tone: options.tone ?? 'info', action: options.action };
+    this.#items = [...this.#items, toast];
+
+    // A toast offering an action gets longer to live, since it needs reading.
+    const timeout = options.timeout ?? (options.action ? DEFAULT_TIMEOUT * 1.6 : DEFAULT_TIMEOUT);
+    this.#timers.set(
+      id,
+      setTimeout(() => this.dismiss(id), timeout)
+    );
+
+    return id;
+  }
+
+  success(message: string, action?: Toast['action']) {
+    return this.push(message, { tone: 'success', action });
+  }
+
+  error(message: string, action?: Toast['action']) {
+    return this.push(message, { tone: 'error', action, timeout: 6500 });
+  }
+
+  dismiss(id: number) {
+    const timer = this.#timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this.#timers.delete(id);
+    }
+    this.#items = this.#items.filter((toast) => toast.id !== id);
+  }
+
+  /** Runs a toast's action and dismisses it, so an "Undo" can't fire twice. */
+  runAction(id: number) {
+    const toast = this.#items.find((entry) => entry.id === id);
+    if (!toast?.action) return;
+    toast.action.run();
+    this.dismiss(id);
+  }
+}
+
+export const toasts = new ToastStore();

package/apps/recipe-web/src/routes/+error.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  const status = $derived(page.status);
+  const message = $derived(page.error?.message ?? 'Something went wrong.');
+
+  const heading = $derived(status === 404 ? 'We could not find that page' : 'Something went wrong');
+</script>
+
+<svelte:head>
+  <title>{status} — Mise</title>
+</svelte:head>
+
+<div class="wrap">
+  <p class="eyebrow">Error {status}</p>
+  <rk-empty-state icon={status === 404 ? '🧭' : '⚠️'} heading={heading} message={message} tone={status === 404 ? 'neutral' : 'error'}>
+    <div class="actions">
+      <a class="btn btn-primary" href="/">Back to Discover</a>
+      <a class="btn" href="/favorites">My favorites</a>
+    </div>
+  </rk-empty-state>
+</div>
+
+<style>
+  .wrap {
+    max-width: 640px;
+    margin: 6vh auto;
+  }
+
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+  }
+</style>

package/apps/recipe-web/src/routes/+layout.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import '../app.css';
+  // Design tokens from the published component library. Importing the library's
+  // own stylesheet is what keeps the app shell and the web components in sync.
+  import 'recipe-kit-stencil/dist/recipe-kit/recipe-kit.css';
+
+  import AppHeader from '$components/AppHeader.svelte';
+  import Toaster from '$components/Toaster.svelte';
+  import { registerRecipeKit } from '$lib/stencil/register';
+  // Instantiating the theme store applies the persisted palette on the client.
+  import '$stores/theme.svelte';
+
+  let { children } = $props();
+
+  onMount(() => {
+    // Custom elements can only be defined in the browser, after hydration.
+    void registerRecipeKit();
+  });
+</script>
+
+<svelte:head>
+  <title>Mise — Recipe Finder &amp; Meal Planner</title>
+</svelte:head>
+
+<div class="shell">
+  <a class="skip-link" href="#main">Skip to content</a>
+  <AppHeader />
+
+  <main class="page" id="main">
+    {@render children()}
+  </main>
+
+  <footer class="site-footer">
+    <div class="footer-inner">
+      <p class="small muted">
+        Recipe data from <a href="https://www.themealdb.com/" rel="noreferrer noopener" target="_blank">TheMealDB</a>. UI components from
+        <a href="https://www.npmjs.com/package/recipe-kit-stencil" rel="noreferrer noopener" target="_blank">recipe-kit-stencil</a>.
+      </p>
+      <p class="small muted">Favorites, your recipes and meal plans are stored in this browser.</p>
+    </div>
+  </footer>
+</div>
+
+<Toaster />
+
+<style>
+  .site-footer {
+    border-top: 1px solid var(--rk-border);
+    background: var(--rk-surface);
+  }
+
+  .footer-inner {
+    max-width: var(--app-max);
+    margin: 0 auto;
+    padding: 26px var(--app-gutter);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 8px 24px;
+  }
+</style>

package/apps/recipe-web/src/routes/+page.svelte

@@ -0,0 +1,352 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import RecipeGrid from '$components/RecipeGrid.svelte';
+  import { toSummary, type RecipeSummary } from '$domain/recipe';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import { myRecipes } from '$stores/myRecipes.svelte';
+  import type { PageData } from './$types';
+  import type { SortKey } from './+page';
+
+  let { data }: { data: PageData } = $props();
+
+  const PAGE_SIZE = 24;
+  let visibleCount = $state(PAGE_SIZE);
+  let navigating = $state(false);
+
+  const SORT_OPTIONS = [
+    { label: 'Relevance', value: 'relevance' },
+    { label: 'A–Z', value: 'az' },
+    { label: 'Z–A', value: 'za' }
+  ];
+
+  /**
+   * Every filter lives in the URL, which makes searches shareable, survives a
+   * reload, and lets SvelteKit's `load` re-run instead of duplicating fetch
+   * logic in the component.
+   */
+  async function updateFilters(changes: Partial<Record<'q' | 'category' | 'area' | 'ingredient' | 'sort', string>>) {
+    const params = new URLSearchParams(page.url.searchParams);
+
+    for (const [key, value] of Object.entries(changes)) {
+      if (value) params.set(key, value);
+      else params.delete(key);
+    }
+
+    visibleCount = PAGE_SIZE;
+    navigating = true;
+    const search = params.toString();
+    await goto(search ? `/?${search}` : '/', { keepFocus: true, noScroll: true, replaceState: true });
+    navigating = false;
+  }
+
+  /**
+   * The user's own recipes live in localStorage, so they cannot be part of the
+   * server-rendered `load` result. They are matched here on the client and
+   * shown first — a recipe you wrote should outrank the catalogue.
+   */
+  const ownMatches = $derived.by(() => {
+    const { q, category, area, ingredient } = data.filters;
+    const needle = q.toLowerCase();
+
+    return myRecipes.all
+      .filter((recipe) => {
+        if (needle && !recipe.name.toLowerCase().includes(needle) && !recipe.tags.some((tag) => tag.toLowerCase().includes(needle))) return false;
+        if (category && recipe.category !== category) return false;
+        if (area && recipe.area !== area) return false;
+        if (ingredient && !recipe.ingredients.some((row) => row.name.toLowerCase().includes(ingredient.toLowerCase()))) return false;
+        return true;
+      })
+      .map(toSummary);
+  });
+
+  const allResults = $derived<RecipeSummary[]>([...ownMatches, ...data.recipes]);
+  const visible = $derived(allResults.slice(0, visibleCount));
+  const hasMore = $derived(allResults.length > visibleCount);
+
+  const activeFilters = $derived(
+    [
+      data.filters.category && { key: 'category' as const, label: data.filters.category },
+      data.filters.area && { key: 'area' as const, label: data.filters.area },
+      data.filters.ingredient && { key: 'ingredient' as const, label: data.filters.ingredient }
+    ].filter(Boolean) as { key: 'category' | 'area' | 'ingredient'; label: string }[]
+  );
+
+  const hasAnyFilter = $derived(activeFilters.length > 0 || data.filters.q !== '');
+
+  let ingredientDraft = $state('');
+  $effect(() => {
+    ingredientDraft = data.filters.ingredient;
+  });
+</script>
+
+<svelte:head>
+  <title>
+    {data.filters.q ? `“${data.filters.q}” — Mise` : 'Discover recipes — Mise'}
+  </title>
+  <meta name="description" content="Search and filter thousands of recipes by name, category, cuisine or ingredient." />
+</svelte:head>
+
+<section class="hero">
+  <p class="eyebrow">Recipe finder</p>
+  <h1 class="page-title">What are you cooking today?</h1>
+  <p class="page-lede">
+    Search recipes by name, then narrow down by category, cuisine, or a single ingredient you want to use up. Your own recipes are searched alongside the
+    catalogue.
+  </p>
+
+  <div class="search-slot">
+    <!-- Stencil search bar: value down as a prop, query up as `rkSearch`. -->
+    <WebComponent
+      tag="rk-search-bar"
+      props={{ value: data.filters.q, loading: navigating, debounce: 420 }}
+      events={{
+        rkSearch: ((event: CustomEvent<string>) => updateFilters({ q: event.detail })) as (event: CustomEvent<never>) => void
+      }}
+    >
+      {#snippet children()}
+        <span slot="actions" class="result-count small muted">
+          {allResults.length}
+        </span>
+      {/snippet}
+    </WebComponent>
+  </div>
+
+  <!--
+    Category chips are the quickest way to browse. Selecting one hits
+    `filter.php?c=…`, which returns that category's full list, so this is also
+    how the user gets past the small default "featured" selection.
+  -->
+  <div class="category-rail" role="group" aria-label="Browse by category">
+    {#each data.categories as category (category.name)}
+      <WebComponent
+        tag="rk-chip"
+        props={{
+          label: category.name,
+          value: category.name,
+          selected: data.filters.category === category.name,
+          tone: 'primary'
+        }}
+        events={{
+          rkChipToggle: ((event: CustomEvent<{ selected: boolean }>) =>
+            updateFilters({ category: event.detail.selected ? category.name : '' })) as (event: CustomEvent<never>) => void
+        }}
+      />
+    {/each}
+  </div>
+</section>
+
+<div class="filters card-surface">
+  <div class="filter-row">
+    <label class="field">
+      <span class="field-label">Category</span>
+      <select class="select" value={data.filters.category} onchange={(event) => updateFilters({ category: event.currentTarget.value })}>
+        <option value="">All categories</option>
+        {#each data.categories as category (category.name)}
+          <option value={category.name}>{category.name}</option>
+        {/each}
+      </select>
+    </label>
+
+    <label class="field">
+      <span class="field-label">Cuisine</span>
+      <select class="select" value={data.filters.area} onchange={(event) => updateFilters({ area: event.currentTarget.value })}>
+        <option value="">All cuisines</option>
+        {#each data.areas as area (area)}
+          <option value={area}>{area}</option>
+        {/each}
+      </select>
+    </label>
+
+    <form
+      class="field"
+      onsubmit={(event) => {
+        event.preventDefault();
+        void updateFilters({ ingredient: ingredientDraft.trim() });
+      }}
+    >
+      <span class="field-label">Main ingredient</span>
+      <div class="ingredient-row">
+        <input class="input" type="text" bind:value={ingredientDraft} placeholder="e.g. chicken breast" aria-label="Main ingredient" />
+        <button class="btn btn-sm" type="submit">Apply</button>
+      </div>
+    </form>
+
+    <div class="field sort-field">
+      <span class="field-label">Sort</span>
+      <!-- Array prop assigned as a DOM property by the bridge component. -->
+      <WebComponent
+        tag="rk-segmented-control"
+        props={{ options: SORT_OPTIONS, value: data.filters.sort, label: 'Sort recipes', stretch: true }}
+        events={{
+          rkSegmentChange: ((event: CustomEvent<SortKey>) => updateFilters({ sort: event.detail })) as (event: CustomEvent<never>) => void
+        }}
+      />
+    </div>
+  </div>
+
+  {#if hasAnyFilter}
+    <div class="active-filters">
+      <span class="small muted">Active:</span>
+
+      {#if data.filters.q}
+        <!-- Dismissible chip: `rkChipDismiss` clears the matching URL param. -->
+        <WebComponent
+          tag="rk-chip"
+          props={{ label: `“${data.filters.q}”`, value: 'q', dismissible: true, tone: 'primary' }}
+          events={{ rkChipDismiss: (() => updateFilters({ q: '' })) as (event: CustomEvent<never>) => void }}
+        />
+      {/if}
+
+      {#each activeFilters as filter (filter.key)}
+        <WebComponent
+          tag="rk-chip"
+          props={{ label: filter.label, value: filter.key, dismissible: true }}
+          events={{ rkChipDismiss: (() => updateFilters({ [filter.key]: '' })) as (event: CustomEvent<never>) => void }}
+        />
+      {/each}
+
+      <button class="btn btn-ghost btn-sm" type="button" onclick={() => updateFilters({ q: '', category: '', area: '', ingredient: '' })}>
+        Clear all
+      </button>
+    </div>
+  {/if}
+</div>
+
+{#if data.error}
+  <div class="section">
+    <rk-empty-state
+      tone="error"
+      icon="⚠️"
+      heading="Could not load recipes"
+      message={data.error}
+    >
+      <button class="btn btn-primary" type="button" onclick={() => location.reload()}>Try again</button>
+    </rk-empty-state>
+  </div>
+{:else}
+  <div class="section">
+    <div class="section-head">
+      <h2 class="section-title">
+        {#if data.filters.q}
+          Results for “{data.filters.q}”
+        {:else if hasAnyFilter}
+          {[data.filters.category, data.filters.area, data.filters.ingredient].filter(Boolean).join(' · ')}
+        {:else}
+          Featured recipes
+        {/if}
+      </h2>
+      <p class="small muted">
+        {allResults.length}
+        {allResults.length === 1 ? 'recipe' : 'recipes'}
+        {#if ownMatches.length > 0}
+          · {ownMatches.length} of your own
+        {/if}
+      </p>
+    </div>
+
+    {#if !hasAnyFilter}
+      <p class="small muted own-note">Pick a category above to browse the full catalogue.</p>
+    {/if}
+
+    <RecipeGrid recipes={visible} loading={navigating && visible.length === 0}>
+      {#snippet empty()}
+        <rk-empty-state
+          icon="🫙"
+          heading={hasAnyFilter ? 'No recipes match those filters' : 'No recipes to show'}
+          message={hasAnyFilter
+            ? 'Try removing a filter, or search for a different dish.'
+            : 'The recipe service returned nothing. Please try again in a moment.'}
+        >
+          {#if hasAnyFilter}
+            <button class="btn btn-primary" type="button" onclick={() => updateFilters({ q: '', category: '', area: '', ingredient: '' })}>
+              Clear all filters
+            </button>
+          {/if}
+        </rk-empty-state>
+      {/snippet}
+    </RecipeGrid>
+
+    {#if hasMore}
+      <div class="more">
+        <button class="btn" type="button" onclick={() => (visibleCount += PAGE_SIZE)}>
+          Show {Math.min(PAGE_SIZE, allResults.length - visibleCount)} more
+        </button>
+        <p class="small muted">Showing {visible.length} of {allResults.length}</p>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .hero {
+    padding-bottom: 8px;
+  }
+
+  .search-slot {
+    margin-top: 22px;
+    max-width: 720px;
+  }
+
+  .result-count {
+    padding-right: 8px;
+    font-variant-numeric: tabular-nums;
+    font-weight: 650;
+  }
+
+  /* Scrolls horizontally on narrow screens instead of wrapping to many rows. */
+  .category-rail {
+    display: flex;
+    gap: 8px;
+    margin-top: 18px;
+    padding-bottom: 4px;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .filters {
+    margin-top: 22px;
+    display: grid;
+    gap: 16px;
+  }
+
+  .filter-row {
+    display: grid;
+    gap: 16px;
+    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+    align-items: end;
+  }
+
+  .ingredient-row {
+    display: flex;
+    gap: 8px;
+  }
+
+  .ingredient-row .input {
+    min-width: 0;
+  }
+
+  .sort-field {
+    min-width: 0;
+  }
+
+  .active-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding-top: 14px;
+    border-top: 1px solid var(--rk-border);
+  }
+
+  .own-note {
+    margin-bottom: 12px;
+  }
+
+  .more {
+    display: grid;
+    justify-items: center;
+    gap: 8px;
+    margin-top: 32px;
+  }
+</style>

package/apps/recipe-web/src/routes/+page.ts

@@ -0,0 +1,107 @@
+import {
+  browseAll,
+  filterByArea,
+  filterByCategory,
+  filterByIngredient,
+  listAreas,
+  listCategories,
+  searchRecipes,
+  type Category
+} from '$api/mealdb';
+import type { RecipeSummary } from '$domain/recipe';
+import type { PageLoad } from './$types';
+
+export type SortKey = 'relevance' | 'az' | 'za';
+
+export interface DiscoverFilters {
+  q: string;
+  category: string;
+  area: string;
+  ingredient: string;
+  sort: SortKey;
+}
+
+const SORTS: SortKey[] = ['relevance', 'az', 'za'];
+
+function readFilters(url: URL): DiscoverFilters {
+  const rawSort = url.searchParams.get('sort') as SortKey | null;
+  return {
+    q: url.searchParams.get('q')?.trim() ?? '',
+    category: url.searchParams.get('category')?.trim() ?? '',
+    area: url.searchParams.get('area')?.trim() ?? '',
+    ingredient: url.searchParams.get('ingredient')?.trim() ?? '',
+    sort: rawSort && SORTS.includes(rawSort) ? rawSort : 'relevance'
+  };
+}
+
+function sortRecipes(recipes: RecipeSummary[], sort: SortKey): RecipeSummary[] {
+  if (sort === 'az') return [...recipes].sort((a, b) => a.name.localeCompare(b.name));
+  if (sort === 'za') return [...recipes].sort((a, b) => b.name.localeCompare(a.name));
+  return recipes;
+}
+
+export const load: PageLoad = async ({ url, fetch }) => {
+  const filters = readFilters(url);
+
+  // Facets are static enough to fetch alongside results; a failure here must not
+  // take the page down, so each one degrades to an empty list.
+  const facets = Promise.all([
+    listCategories(fetch).catch((): Category[] => []),
+    listAreas(fetch).catch((): string[] => [])
+  ]);
+
+  /*
+   * Each active filter maps to one `filter.php` call returning a set of ids.
+   * Intersecting those sets is what makes combined filters ("Seafood" + "Italian")
+   * work, since the API only supports one filter dimension per request.
+   */
+  const filterRequests: Promise<RecipeSummary[]>[] = [];
+  if (filters.category) filterRequests.push(filterByCategory(filters.category, fetch));
+  if (filters.area) filterRequests.push(filterByArea(filters.area, fetch));
+  if (filters.ingredient) filterRequests.push(filterByIngredient(filters.ingredient, fetch));
+
+  // With a query, search results are the base list; otherwise the first filter
+  // response is, falling back to the whole catalogue when nothing is active.
+  const basePromise = filters.q
+    ? searchRecipes(filters.q, fetch)
+    : filterRequests.length > 0
+      ? filterRequests[0]
+      : browseAll(fetch);
+
+  let recipes: RecipeSummary[] = [];
+  let error: string | null = null;
+
+  try {
+    const [base, ...filterResults] = await Promise.all([basePromise, ...filterRequests]);
+
+    recipes = base;
+    for (const result of filterResults) {
+      const allowed = new Set(result.map((recipe) => recipe.id));
+      recipes = recipes.filter((recipe) => allowed.has(recipe.id));
+    }
+
+    // `filter.php` omits the dimension it filtered on, so fill in what is known.
+    recipes = recipes.map((recipe) => ({
+      ...recipe,
+      category: filters.category || recipe.category,
+      area: filters.area || recipe.area
+    }));
+
+    // The grid keys on `recipe.id`, and Svelte throws on a duplicate key, so a
+    // repeated id from the API must never reach the component.
+    const seen = new Set<string>();
+    recipes = recipes.filter((recipe) => {
+      if (seen.has(recipe.id)) return false;
+      seen.add(recipe.id);
+      return true;
+    });
+
+    recipes = sortRecipes(recipes, filters.sort);
+  } catch (cause) {
+    error = cause instanceof Error ? cause.message : 'Could not load recipes.';
+  }
+
+  const [categories, areas] = await facets;
+
+  return { filters, recipes, categories, areas, error };
+};