@ssejal8/recipe-ui-kit 0.1.0

package/apps/recipe-web/src/app.css

@@ -0,0 +1,418 @@
+/*
+ * Application shell styles.
+ *
+ * The `--rk-*` tokens come from recipe-kit-stencil's stylesheet and are the
+ * single source of truth for colour, radius and elevation. The app maps them to
+ * shorter `--app-*` aliases and adds only what the shell itself needs, so the
+ * Svelte chrome and the web components can never drift apart visually.
+ */
+
+:root {
+  --app-max: 1180px;
+  --app-gutter: clamp(16px, 4vw, 40px);
+  --app-header-h: 66px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--rk-bg);
+  color: var(--rk-ink);
+  font-family: var(--rk-font);
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--rk-font-display);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 0;
+  font-weight: 650;
+}
+
+p {
+  margin: 0;
+}
+
+a {
+  color: var(--rk-primary);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+img {
+  max-width: 100%;
+}
+
+:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+  border-radius: var(--rk-radius-sm);
+}
+
+/* ------------------------------------------------------------------ layout */
+
+.shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.page {
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: var(--app-max);
+  margin: 0 auto;
+  padding: clamp(24px, 4vw, 44px) var(--app-gutter) 88px;
+}
+
+.page-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px 24px;
+  margin-bottom: 26px;
+}
+
+.page-title {
+  font-size: clamp(1.7rem, 4vw, 2.35rem);
+}
+
+.page-lede {
+  margin-top: 7px;
+  color: var(--rk-muted);
+  max-width: 62ch;
+}
+
+.eyebrow {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--rk-primary);
+  margin-bottom: 8px;
+}
+
+.section {
+  margin-top: 44px;
+}
+
+.section-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--rk-border);
+}
+
+.section-title {
+  font-size: 1.15rem;
+}
+
+.muted {
+  color: var(--rk-muted);
+}
+
+.small {
+  font-size: 0.87rem;
+}
+
+.stack {
+  display: grid;
+  gap: 14px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.card-surface {
+  background: var(--rk-surface);
+  border: 1px solid var(--rk-border);
+  border-radius: var(--rk-radius-lg);
+  padding: clamp(18px, 3vw, 26px);
+  box-shadow: var(--rk-shadow-sm);
+}
+
+.recipe-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
+  gap: clamp(14px, 2vw, 22px);
+}
+
+/* ------------------------------------------------------------------ buttons */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: var(--rk-radius-pill);
+  border: 1px solid var(--rk-border);
+  background: var(--rk-surface);
+  color: var(--rk-ink);
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background var(--rk-transition),
+    border-color var(--rk-transition),
+    color var(--rk-transition),
+    transform var(--rk-transition);
+}
+
+.btn:hover:not(:disabled) {
+  border-color: var(--rk-border-strong);
+  background: var(--rk-surface-2);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--rk-primary);
+  border-color: var(--rk-primary);
+  color: #fff;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--rk-primary-strong);
+  border-color: var(--rk-primary-strong);
+  color: #fff;
+}
+
+.btn-accent {
+  background: var(--rk-accent);
+  border-color: var(--rk-accent);
+  color: #fff;
+}
+
+.btn-accent:hover:not(:disabled) {
+  filter: brightness(1.1);
+  color: #fff;
+}
+
+.btn-danger {
+  background: transparent;
+  border-color: var(--rk-danger);
+  color: var(--rk-danger);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: var(--rk-danger);
+  border-color: var(--rk-danger);
+  color: #fff;
+}
+
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--rk-ink-2);
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: var(--rk-surface-2);
+  border-color: transparent;
+}
+
+.btn-sm {
+  padding: 7px 13px;
+  font-size: 0.83rem;
+}
+
+.btn-block {
+  width: 100%;
+}
+
+.btn svg {
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+}
+
+/* ------------------------------------------------------------------- forms */
+
+.field {
+  display: grid;
+  gap: 7px;
+}
+
+.field-label {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--rk-ink-2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.field-req {
+  color: var(--rk-primary);
+}
+
+.input,
+.select,
+.textarea {
+  width: 100%;
+  padding: 11px 13px;
+  border: 1px solid var(--rk-border);
+  border-radius: var(--rk-radius);
+  background: var(--rk-surface);
+  color: var(--rk-ink);
+  font: inherit;
+  transition:
+    border-color var(--rk-transition),
+    box-shadow var(--rk-transition);
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 82px;
+  line-height: 1.55;
+}
+
+.select {
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 19px) calc(50% + 2px),
+    calc(100% - 14px) calc(50% + 2px);
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 36px;
+  cursor: pointer;
+}
+
+.input:focus,
+.select:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--rk-primary);
+  box-shadow: var(--rk-focus-ring);
+}
+
+.input[aria-invalid='true'],
+.select[aria-invalid='true'],
+.textarea[aria-invalid='true'] {
+  border-color: var(--rk-danger);
+}
+
+.field-error {
+  font-size: 0.83rem;
+  font-weight: 550;
+  color: var(--rk-danger);
+}
+
+.field-hint {
+  font-size: 0.83rem;
+  color: var(--rk-muted);
+}
+
+.field-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* ------------------------------------------------------------------ effects */
+
+.skeleton {
+  background: linear-gradient(90deg, var(--rk-surface-2) 25%, var(--rk-border) 50%, var(--rk-surface-2) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+  border-radius: var(--rk-radius);
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+  .btn {
+    transition: none;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip link, revealed on focus. */
+.skip-link {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 1200;
+  padding: 10px 16px;
+  background: var(--rk-ink);
+  color: var(--rk-bg);
+  border-radius: var(--rk-radius-pill);
+  font-weight: 600;
+  text-decoration: none;
+  transform: translateY(-200%);
+  transition: transform var(--rk-transition);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}

package/apps/recipe-web/src/app.d.ts

@@ -0,0 +1,32 @@
+// See https://svelte.dev/docs/kit/types#app
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+
+  /**
+   * The `rk-*` tags are registered at runtime by `recipe-kit-stencil`. Declaring
+   * them here stops `svelte-check` from treating them as typos while still
+   * allowing arbitrary props, which the `WebComponent` bridge assigns directly.
+   */
+  namespace svelteHTML {
+    interface IntrinsicElements {
+      'rk-search-bar': Record<string, unknown>;
+      'rk-chip': Record<string, unknown>;
+      'rk-segmented-control': Record<string, unknown>;
+      'rk-recipe-card': Record<string, unknown>;
+      'rk-rating': Record<string, unknown>;
+      'rk-badge': Record<string, unknown>;
+      'rk-tag-input': Record<string, unknown>;
+      'rk-meal-slot': Record<string, unknown>;
+      'rk-modal': Record<string, unknown>;
+      'rk-empty-state': Record<string, unknown>;
+    }
+  }
+}
+
+export {};

package/apps/recipe-web/src/app.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#d94f1b" />
+    <meta name="description" content="Discover recipes, build your own collection, and plan your week — a Recipe Finder & Meal Planner." />
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://www.themealdb.com" crossorigin />
+    <script>
+      // Applied before first paint so a dark-mode user never sees a light flash.
+      try {
+        const stored = localStorage.getItem('recipe-ui:theme:v1');
+        const theme = stored ? JSON.parse(stored) : null;
+        const resolved = theme ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        document.documentElement.dataset.theme = resolved;
+        document.documentElement.dataset.rkTheme = resolved;
+      } catch {}
+    </script>
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/apps/recipe-web/src/lib/api/mealdb.ts

@@ -0,0 +1,240 @@
+/**
+ * Typed client for TheMealDB (https://www.themealdb.com/api.php).
+ *
+ * The public test key `1` is used, which needs no signup. Every function takes
+ * an optional `fetch` so SvelteKit `load` functions can pass their own instance
+ * and get request de-duplication plus SSR-safe relative URLs.
+ */
+
+import { splitInstructions, type Recipe, type RecipeSummary } from '$domain/recipe';
+
+const BASE_URL = 'https://www.themealdb.com/api/json/v1/1';
+
+type Fetch = typeof globalThis.fetch;
+
+/** Raw meal record. TheMealDB returns 20 flat ingredient/measure column pairs. */
+interface RawMeal {
+  idMeal: string;
+  strMeal: string;
+  strCategory: string | null;
+  strArea: string | null;
+  strMealThumb: string | null;
+  strInstructions: string | null;
+  strTags: string | null;
+  strYoutube: string | null;
+  strSource: string | null;
+  [key: string]: string | null;
+}
+
+/** `filter.php` responses only carry enough data to render a card. */
+interface RawMealLite {
+  idMeal: string;
+  strMeal: string;
+  strMealThumb: string | null;
+  strArea?: string | null;
+}
+
+interface RawCategory {
+  idCategory: string;
+  strCategory: string;
+  strCategoryThumb: string;
+  strCategoryDescription: string;
+}
+
+export interface Category {
+  name: string;
+  thumbnail: string;
+  description: string;
+}
+
+export class MealDbError extends Error {
+  constructor(
+    message: string,
+    readonly status?: number
+  ) {
+    super(message);
+    this.name = 'MealDbError';
+  }
+}
+
+async function request<T>(path: string, fetchImpl: Fetch = fetch): Promise<T> {
+  let response: Response;
+  try {
+    response = await fetchImpl(`${BASE_URL}${path}`);
+  } catch (cause) {
+    throw new MealDbError(`Could not reach the recipe service. ${(cause as Error)?.message ?? ''}`.trim());
+  }
+
+  if (!response.ok) {
+    throw new MealDbError(`The recipe service responded with ${response.status}.`, response.status);
+  }
+
+  try {
+    return (await response.json()) as T;
+  } catch {
+    throw new MealDbError('The recipe service returned an unreadable response.');
+  }
+}
+
+/* ------------------------------------------------------------------ mapping */
+
+/** Tags arrive comma-joined and are not guaranteed unique or clean. */
+function parseTags(raw: string | null): string[] {
+  const tags = (raw ?? '')
+    .split(',')
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+
+  const seen = new Set<string>();
+  return tags.filter((tag) => {
+    const key = tag.toLowerCase();
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+function collectIngredients(meal: RawMeal) {
+  const ingredients = [];
+  for (let index = 1; index <= 20; index += 1) {
+    const name = meal[`strIngredient${index}`]?.trim();
+    if (!name) continue;
+    ingredients.push({ name, measure: meal[`strMeasure${index}`]?.trim() ?? '' });
+  }
+  return ingredients;
+}
+
+export function normaliseMeal(meal: RawMeal): Recipe {
+  return {
+    id: meal.idMeal,
+    name: meal.strMeal?.trim() ?? 'Untitled recipe',
+    category: meal.strCategory?.trim() || 'Uncategorised',
+    area: meal.strArea?.trim() || 'Unknown',
+    image: meal.strMealThumb ?? undefined,
+    steps: splitInstructions(meal.strInstructions ?? ''),
+    ingredients: collectIngredients(meal),
+    tags: parseTags(meal.strTags),
+    origin: 'api',
+    youtubeUrl: meal.strYoutube || undefined,
+    sourceUrl: meal.strSource || undefined,
+  };
+}
+
+function summariseMeal(meal: RawMeal): RecipeSummary {
+  return {
+    id: meal.idMeal,
+    name: meal.strMeal?.trim() ?? 'Untitled recipe',
+    image: meal.strMealThumb ?? undefined,
+    category: meal.strCategory?.trim() || 'Uncategorised',
+    area: meal.strArea?.trim() || 'Unknown',
+    origin: 'api',
+    ingredientCount: collectIngredients(meal).length,
+    tags: parseTags(meal.strTags),
+  };
+}
+
+/**
+ * `filter.php` omits category and area, but the caller knows which filter
+ * produced the list, so the known dimension is threaded back in.
+ */
+function summariseLite(meal: RawMealLite, known: { category?: string; area?: string }): RecipeSummary {
+  return {
+    id: meal.idMeal,
+    name: meal.strMeal?.trim() ?? 'Untitled recipe',
+    image: meal.strMealThumb ?? undefined,
+    category: known.category ?? 'Uncategorised',
+    area: known.area ?? meal.strArea?.trim() ?? 'Unknown',
+    origin: 'api',
+  };
+}
+
+/* ---------------------------------------------------------------- endpoints */
+
+/** Full-text search by recipe name. Returns fully populated recipes. */
+export async function searchRecipes(query: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
+  const data = await request<{ meals: RawMeal[] | null }>(`/search.php?s=${encodeURIComponent(query)}`, fetchImpl);
+  return (data.meals ?? []).map(summariseMeal);
+}
+
+/** The whole catalogue, used for the default browse view. */
+export function browseAll(fetchImpl?: Fetch): Promise<RecipeSummary[]> {
+  return searchRecipes('', fetchImpl);
+}
+
+export async function filterByCategory(category: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
+  const data = await request<{ meals: RawMealLite[] | null }>(`/filter.php?c=${encodeURIComponent(category)}`, fetchImpl);
+  return (data.meals ?? []).map((meal) => summariseLite(meal, { category }));
+}
+
+export async function filterByArea(area: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
+  const data = await request<{ meals: RawMealLite[] | null }>(`/filter.php?a=${encodeURIComponent(area)}`, fetchImpl);
+  return (data.meals ?? []).map((meal) => summariseLite(meal, { area }));
+}
+
+export async function filterByIngredient(ingredient: string, fetchImpl?: Fetch): Promise<RecipeSummary[]> {
+  // TheMealDB expects underscores for multi-word ingredients.
+  const slug = ingredient.trim().replace(/\s+/g, '_');
+  const data = await request<{ meals: RawMealLite[] | null }>(`/filter.php?i=${encodeURIComponent(slug)}`, fetchImpl);
+  return (data.meals ?? []).map((meal) => summariseLite(meal, {}));
+}
+
+export async function getRecipe(id: string, fetchImpl?: Fetch): Promise<Recipe | null> {
+  const data = await request<{ meals: RawMeal[] | null }>(`/lookup.php?i=${encodeURIComponent(id)}`, fetchImpl);
+  const meal = data.meals?.[0];
+  return meal ? normaliseMeal(meal) : null;
+}
+
+export async function getRandomRecipe(fetchImpl?: Fetch): Promise<Recipe | null> {
+  const data = await request<{ meals: RawMeal[] | null }>('/random.php', fetchImpl);
+  const meal = data.meals?.[0];
+  return meal ? normaliseMeal(meal) : null;
+}
+
+/**
+ * De-duplicates a facet list case-insensitively, preserving first-seen order.
+ *
+ * TheMealDB genuinely returns repeats: `list.php?a=list` currently ships
+ * "Dominican", "Congolese" and "Channel Islander" twice. Facet values are the
+ * natural key for an `{#each}` block and Svelte throws on duplicate keys, so
+ * this has to be cleaned up before the data reaches any component.
+ */
+function uniqueBy<T>(items: T[], identity: (item: T) => string): T[] {
+  const seen = new Set<string>();
+  const out: T[] = [];
+
+  for (const item of items) {
+    const key = identity(item).trim().toLowerCase();
+    if (key === '' || seen.has(key)) continue;
+    seen.add(key);
+    out.push(item);
+  }
+
+  return out;
+}
+
+export async function listCategories(fetchImpl?: Fetch): Promise<Category[]> {
+  const data = await request<{ categories: RawCategory[] | null }>('/categories.php', fetchImpl);
+  const categories = (data.categories ?? []).map((category) => ({
+    name: category.strCategory,
+    thumbnail: category.strCategoryThumb,
+    description: category.strCategoryDescription,
+  }));
+  return uniqueBy(categories, (category) => category.name);
+}
+
+export async function listAreas(fetchImpl?: Fetch): Promise<string[]> {
+  const data = await request<{ meals: { strArea: string }[] | null }>('/list.php?a=list', fetchImpl);
+  const areas = uniqueBy(
+    (data.meals ?? []).map((meal) => meal.strArea).filter(Boolean),
+    (area) => area
+  );
+  return areas.sort((a, b) => a.localeCompare(b));
+}
+
+export async function listIngredients(fetchImpl?: Fetch): Promise<string[]> {
+  const data = await request<{ meals: { strIngredient: string }[] | null }>('/list.php?i=list', fetchImpl);
+  return uniqueBy(
+    (data.meals ?? []).map((meal) => meal.strIngredient).filter(Boolean),
+    (ingredient) => ingredient
+  );
+}