@ssejal8/recipe-ui-kit 0.1.0

package/apps/recipe-web/src/routes/recipes/[id]/+page.svelte

@@ -0,0 +1,538 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import ConfirmDialog from '$components/ConfirmDialog.svelte';
+  import { toSummary, type Recipe } from '$domain/recipe';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import { favorites } from '$stores/favorites.svelte';
+  import { myRecipes } from '$stores/myRecipes.svelte';
+  import { DAYS, MEALS, planner, type DayKey, type MealKey } from '$stores/planner.svelte';
+  import { toasts } from '$stores/toast.svelte';
+  import type { PageData } from './$types';
+
+  let { data }: { data: PageData } = $props();
+
+  /**
+   * API recipes arrive from `load`; user recipes are read from the store. Both
+   * resolve to the same `Recipe` shape, so the template below never branches on
+   * where the data came from — only on whether the user owns it.
+   */
+  const recipe = $derived<Recipe | null>(data.isCustom ? (myRecipes.get(data.id) ?? null) : data.recipe);
+
+  const isOwned = $derived(recipe?.origin === 'custom');
+  const isFavorite = $derived(recipe ? favorites.has(recipe.id) : false);
+
+  // Ingredient checklist state — deliberately not persisted; it is a cooking aid
+  // for the current session, not part of the recipe.
+  let checked = $state<Set<string>>(new Set());
+  $effect(() => {
+    void recipe?.id;
+    checked = new Set();
+  });
+
+  function toggleIngredient(key: string) {
+    const next = new Set(checked);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    checked = next;
+  }
+
+  function toggleFavorite() {
+    if (!recipe) return;
+    const nowFavorite = favorites.toggle(toSummary(recipe));
+    toasts.push(nowFavorite ? `Saved “${recipe.name}” to favorites.` : `Removed “${recipe.name}” from favorites.`, {
+      tone: nowFavorite ? 'success' : 'info'
+    });
+  }
+
+  /* ---------------------------------------------------------- add to planner */
+
+  let planOpen = $state(false);
+  let planDay = $state<DayKey>('mon');
+  let planMeal = $state<MealKey>('dinner');
+
+  function confirmPlan() {
+    if (!recipe) return;
+    planner.assign(planDay, planMeal, toSummary(recipe));
+    planOpen = false;
+
+    const dayLabel = DAYS.find((day) => day.key === planDay)?.label ?? planDay;
+    const mealLabel = MEALS.find((meal) => meal.key === planMeal)?.label ?? planMeal;
+    toasts.success(`Added to ${dayLabel} ${mealLabel.toLowerCase()}.`, {
+      label: 'View plan',
+      run: () => void goto('/planner')
+    });
+  }
+
+  /* -------------------------------------------------------------- delete own */
+
+  let confirmDelete = $state(false);
+
+  function handleDelete() {
+    if (!recipe) return;
+    const removed = myRecipes.remove(recipe.id);
+    confirmDelete = false;
+    if (!removed) return;
+
+    toasts.push(`Deleted “${removed.name}”.`, {
+      tone: 'info',
+      action: { label: 'Undo', run: () => myRecipes.restore(removed) }
+    });
+    void goto('/my-recipes');
+  }
+
+  const totalTime = $derived(recipe?.minutes && recipe.minutes > 0 ? `${recipe.minutes} min` : null);
+  const progress = $derived(recipe && recipe.ingredients.length > 0 ? Math.round((checked.size / recipe.ingredients.length) * 100) : 0);
+</script>
+
+<svelte:head>
+  <title>{recipe ? `${recipe.name} — Mise` : 'Recipe — Mise'}</title>
+  {#if recipe}
+    <meta name="description" content={`${recipe.name} — ${recipe.category} recipe from ${recipe.area} cuisine, with ${recipe.ingredients.length} ingredients.`} />
+  {/if}
+</svelte:head>
+
+{#if data.loadError}
+  <rk-empty-state tone="error" icon="⚠️" heading="Could not load this recipe" message={data.loadError}>
+    <button class="btn btn-primary" type="button" onclick={() => location.reload()}>Try again</button>
+  </rk-empty-state>
+{:else if !recipe}
+  <!--
+    Reached when a custom recipe id is not in the store: either it was deleted,
+    or the link was opened in a different browser. During SSR of a custom id
+    this also renders briefly, before hydration reads localStorage.
+  -->
+  <rk-empty-state icon="🔎" heading="Recipe not available" message="This recipe is not in this browser's collection. It may have been deleted.">
+    <a class="btn btn-primary" href="/my-recipes">Go to my recipes</a>
+  </rk-empty-state>
+{:else}
+  <nav class="crumbs small" aria-label="Breadcrumb">
+    <a href="/">Discover</a>
+    <span aria-hidden="true">/</span>
+    <a href={`/?category=${encodeURIComponent(recipe.category)}`}>{recipe.category}</a>
+    <span aria-hidden="true">/</span>
+    <span class="muted">{recipe.name}</span>
+  </nav>
+
+  <article class="recipe">
+    <header class="head">
+      <div class="head-text">
+        <div class="row tags-row">
+          <rk-badge tone="primary" variant="solid">{recipe.category}</rk-badge>
+          {#if recipe.area && recipe.area !== 'Unknown'}
+            <rk-badge tone="accent">{recipe.area}</rk-badge>
+          {/if}
+          {#if isOwned}
+            <rk-badge tone="success">Your recipe</rk-badge>
+          {/if}
+          {#each recipe.tags as tag (tag)}
+            <rk-badge variant="outline">{tag}</rk-badge>
+          {/each}
+        </div>
+
+        <h1 class="page-title">{recipe.name}</h1>
+
+        <dl class="facts">
+          <div>
+            <dt>Ingredients</dt>
+            <dd>{recipe.ingredients.length}</dd>
+          </div>
+          <div>
+            <dt>Steps</dt>
+            <dd>{recipe.steps.length}</dd>
+          </div>
+          {#if totalTime}
+            <div>
+              <dt>Total time</dt>
+              <dd>{totalTime}</dd>
+            </div>
+          {/if}
+          {#if recipe.servings}
+            <div>
+              <dt>Serves</dt>
+              <dd>{recipe.servings}</dd>
+            </div>
+          {/if}
+        </dl>
+
+        <div class="row actions">
+          <button class="btn" class:btn-primary={!isFavorite} type="button" onclick={toggleFavorite} aria-pressed={isFavorite}>
+            <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.9" fill={isFavorite ? 'currentColor' : 'none'} aria-hidden="true">
+              <path d="M12 20.5 4.6 13.3a4.7 4.7 0 0 1 0-6.7 4.7 4.7 0 0 1 6.7 0l.7.7.7-.7a4.7 4.7 0 0 1 6.7 0 4.7 4.7 0 0 1 0 6.7Z" />
+            </svg>
+            {isFavorite ? 'Favorited' : 'Add to favorites'}
+          </button>
+
+          <button class="btn btn-accent" type="button" onclick={() => (planOpen = true)}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+              <rect x="3" y="4.5" width="18" height="16" rx="2.5" />
+              <path d="M8 3v3M16 3v3M3 10h18M12 14v4M10 16h4" />
+            </svg>
+            Add to meal plan
+          </button>
+
+          {#if isOwned}
+            <a class="btn" href={`/my-recipes/${recipe.id}/edit`}>Edit</a>
+            <button class="btn btn-danger" type="button" onclick={() => (confirmDelete = true)}>Delete</button>
+          {/if}
+
+          {#if recipe.youtubeUrl}
+            <a class="btn btn-ghost" href={recipe.youtubeUrl} target="_blank" rel="noreferrer noopener">Watch video ↗</a>
+          {/if}
+          {#if recipe.sourceUrl}
+            <a class="btn btn-ghost" href={recipe.sourceUrl} target="_blank" rel="noreferrer noopener">Original source ↗</a>
+          {/if}
+        </div>
+      </div>
+
+      <div class="head-media">
+        {#if recipe.image}
+          <img src={recipe.image} alt={recipe.name} width="640" height="480" />
+        {:else}
+          <div class="media-placeholder" aria-hidden="true">🍲</div>
+        {/if}
+      </div>
+    </header>
+
+    <div class="body">
+      <section class="ingredients card-surface" aria-labelledby="ingredients-heading">
+        <div class="ing-head">
+          <h2 class="section-title" id="ingredients-heading">Ingredients</h2>
+          {#if checked.size > 0}
+            <button class="btn btn-ghost btn-sm" type="button" onclick={() => (checked = new Set())}>Reset</button>
+          {/if}
+        </div>
+
+        {#if checked.size > 0}
+          <div class="progress" role="progressbar" aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100" aria-label="Ingredients gathered">
+            <span style={`width: ${progress}%`}></span>
+          </div>
+        {/if}
+
+        <ul class="ing-list">
+          {#each recipe.ingredients as ingredient, index (`${ingredient.name}-${index}`)}
+            {@const key = `${index}-${ingredient.name}`}
+            <li class:is-checked={checked.has(key)}>
+              <label>
+                <input type="checkbox" checked={checked.has(key)} onchange={() => toggleIngredient(key)} />
+                <span class="ing-name">{ingredient.name}</span>
+                {#if ingredient.measure}
+                  <span class="ing-measure">{ingredient.measure}</span>
+                {/if}
+              </label>
+            </li>
+          {/each}
+        </ul>
+
+        {#if recipe.notes}
+          <div class="notes">
+            <h3 class="notes-title">Notes</h3>
+            <p class="small">{recipe.notes}</p>
+          </div>
+        {/if}
+      </section>
+
+      <section class="instructions" aria-labelledby="instructions-heading">
+        <h2 class="section-title" id="instructions-heading">Method</h2>
+        <ol class="steps">
+          {#each recipe.steps as step, index (index)}
+            <li>
+              <span class="step-index" aria-hidden="true">{index + 1}</span>
+              <p>{step}</p>
+            </li>
+          {/each}
+        </ol>
+      </section>
+    </div>
+  </article>
+
+  <!-- Planner assignment dialog, built on the Stencil modal. -->
+  <WebComponent
+    tag="rk-modal"
+    props={{ open: planOpen, heading: 'Add to meal plan', subheading: recipe.name, size: 'sm' }}
+    events={{ rkModalClose: (() => (planOpen = false)) as (event: CustomEvent<never>) => void }}
+  >
+    {#snippet children()}
+      <div class="plan-form field-grid">
+        <label class="field">
+          <span class="field-label">Day</span>
+          <select class="select" bind:value={planDay}>
+            {#each DAYS as day (day.key)}
+              <option value={day.key}>{day.label}</option>
+            {/each}
+          </select>
+        </label>
+
+        <label class="field">
+          <span class="field-label">Meal</span>
+          <select class="select" bind:value={planMeal}>
+            {#each MEALS as meal (meal.key)}
+              <option value={meal.key}>{meal.label}</option>
+            {/each}
+          </select>
+        </label>
+      </div>
+
+      {#if planner.meal(planDay, planMeal)}
+        <p class="small warn">
+          {planner.meal(planDay, planMeal)?.name} is already planned for this slot and will be replaced.
+        </p>
+      {/if}
+
+      <div slot="footer" class="dialog-actions">
+        <button class="btn" type="button" onclick={() => (planOpen = false)}>Cancel</button>
+        <button class="btn btn-primary" type="button" onclick={confirmPlan}>Add to plan</button>
+      </div>
+    {/snippet}
+  </WebComponent>
+
+  <ConfirmDialog
+    open={confirmDelete}
+    heading="Delete this recipe?"
+    message={`“${recipe.name}” will be removed from your collection, your favorites and every meal plan. You can undo this straight after.`}
+    confirmLabel="Delete recipe"
+    destructive
+    onconfirm={handleDelete}
+    oncancel={() => (confirmDelete = false)}
+  />
+{/if}
+
+<style>
+  .crumbs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 20px;
+    color: var(--rk-muted);
+  }
+
+  .crumbs a {
+    color: var(--rk-ink-2);
+    text-decoration: none;
+  }
+
+  .crumbs a:hover {
+    color: var(--rk-primary);
+    text-decoration: underline;
+  }
+
+  .head {
+    display: grid;
+    grid-template-columns: 1.05fr 0.95fr;
+    gap: clamp(20px, 4vw, 44px);
+    align-items: start;
+  }
+
+  .tags-row {
+    margin-bottom: 14px;
+  }
+
+  .facts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 32px;
+    margin: 20px 0 24px;
+  }
+
+  .facts div {
+    display: grid;
+    gap: 2px;
+  }
+
+  .facts dt {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--rk-muted);
+    font-weight: 650;
+  }
+
+  .facts dd {
+    margin: 0;
+    font-size: 1.16rem;
+    font-weight: 650;
+    font-family: var(--rk-font-display);
+  }
+
+  .actions {
+    gap: 8px;
+  }
+
+  .head-media img,
+  .media-placeholder {
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+    border-radius: var(--rk-radius-lg);
+    box-shadow: var(--rk-shadow);
+  }
+
+  .media-placeholder {
+    display: grid;
+    place-items: center;
+    font-size: 4rem;
+    background: var(--rk-surface-2);
+    border: 1px solid var(--rk-border);
+  }
+
+  .body {
+    display: grid;
+    grid-template-columns: minmax(260px, 340px) 1fr;
+    gap: clamp(20px, 3vw, 40px);
+    margin-top: clamp(32px, 5vw, 56px);
+    align-items: start;
+  }
+
+  .ingredients {
+    position: sticky;
+    top: calc(var(--app-header-h) + 16px);
+  }
+
+  .ing-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+
+  .progress {
+    height: 5px;
+    border-radius: 999px;
+    background: var(--rk-border);
+    overflow: hidden;
+    margin-bottom: 14px;
+  }
+
+  .progress span {
+    display: block;
+    height: 100%;
+    background: var(--rk-accent);
+    transition: width var(--rk-transition);
+  }
+
+  .ing-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  .ing-list label {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: baseline;
+    gap: 10px;
+    padding: 8px 6px;
+    border-radius: var(--rk-radius-sm);
+    cursor: pointer;
+  }
+
+  .ing-list label:hover {
+    background: var(--rk-surface-2);
+  }
+
+  .ing-list input {
+    accent-color: var(--rk-accent);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+
+  .ing-name {
+    font-weight: 550;
+  }
+
+  .ing-measure {
+    font-size: 0.85rem;
+    color: var(--rk-muted);
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ing-list li.is-checked .ing-name,
+  .ing-list li.is-checked .ing-measure {
+    text-decoration: line-through;
+    opacity: 0.55;
+  }
+
+  .notes {
+    margin-top: 18px;
+    padding-top: 16px;
+    border-top: 1px solid var(--rk-border);
+  }
+
+  .notes-title {
+    font-size: 0.95rem;
+    margin-bottom: 6px;
+  }
+
+  .steps {
+    list-style: none;
+    counter-reset: step;
+    margin: 16px 0 0;
+    padding: 0;
+    display: grid;
+    gap: 16px;
+  }
+
+  .steps li {
+    display: grid;
+    grid-template-columns: 34px 1fr;
+    gap: 14px;
+    align-items: start;
+  }
+
+  .step-index {
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: var(--rk-primary-soft);
+    color: var(--rk-primary-strong);
+    font-weight: 700;
+    font-size: 0.88rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .steps p {
+    padding-top: 5px;
+    line-height: 1.68;
+  }
+
+  .plan-form {
+    margin-bottom: 4px;
+  }
+
+  .warn {
+    margin-top: 12px;
+    padding: 10px 12px;
+    border-radius: var(--rk-radius-sm);
+    background: var(--rk-warning-soft);
+    color: var(--rk-warning);
+    font-weight: 550;
+  }
+
+  .dialog-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+  }
+
+  @media (max-width: 900px) {
+    .head,
+    .body {
+      grid-template-columns: 1fr;
+    }
+
+    .head-media {
+      order: -1;
+    }
+
+    .ingredients {
+      position: static;
+    }
+  }
+</style>

package/apps/recipe-web/src/routes/recipes/[id]/+page.ts

@@ -0,0 +1,24 @@
+import { getRecipe, MealDbError } from '$api/mealdb';
+import { isCustomId, type Recipe } from '$domain/recipe';
+import { error } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, fetch }) => {
+  // User-authored recipes live in localStorage, which `load` cannot reach.
+  // The page component resolves them from the store after hydration.
+  if (isCustomId(params.id)) {
+    return { id: params.id, recipe: null as Recipe | null, isCustom: true, loadError: null as string | null };
+  }
+
+  try {
+    const recipe = await getRecipe(params.id, fetch);
+    if (!recipe) error(404, `No recipe found with id “${params.id}”.`);
+    return { id: params.id, recipe, isCustom: false, loadError: null as string | null };
+  } catch (cause) {
+    // A network problem is not a 404 — keep the page up and offer a retry.
+    if (cause instanceof MealDbError) {
+      return { id: params.id, recipe: null as Recipe | null, isCustom: false, loadError: cause.message };
+    }
+    throw cause;
+  }
+};

package/apps/recipe-web/static/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Mise">
+  <rect width="64" height="64" rx="14" fill="#d94f1b" />
+  <path
+    d="M14 30h36a4 4 0 0 1 4 4 16 16 0 0 1-16 16H26A16 16 0 0 1 10 34a4 4 0 0 1 4-4Z"
+    fill="#fffaf6"
+  />
+  <path d="M22 24c0-4 3-5 3-8s-2-3-2-3M32 24c0-5 4-6 4-9s-2-4-2-4M42 24c0-4 3-5 3-8s-2-3-2-3" stroke="#fffaf6" stroke-width="3" stroke-linecap="round" fill="none" />
+</svg>

package/apps/recipe-web/static/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package/apps/recipe-web/svelte.config.js

@@ -0,0 +1,35 @@
+import adapterAuto from '@sveltejs/adapter-auto';
+import adapterNode from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/*
+ * adapter-auto detects Vercel / Netlify / Cloudflare at build time and needs no
+ * configuration there. It produces nothing runnable locally, though, so setting
+ * `ADAPTER=node` switches to adapter-node — used for `npm run preview:node` and
+ * for self-hosting behind your own Node process.
+ */
+const adapter = process.env.ADAPTER === 'node' ? adapterNode : adapterAuto;
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+
+  compilerOptions: {
+    // Stencil elements are registered at runtime, so the Svelte compiler must
+    // not warn about (or try to resolve) the `rk-*` tags it sees in markup.
+    customElement: false,
+  },
+
+  kit: {
+    adapter: adapter(),
+
+    alias: {
+      $components: 'src/lib/components',
+      $stores: 'src/lib/stores',
+      $api: 'src/lib/api',
+      $domain: 'src/lib/domain',
+    },
+  },
+};
+
+export default config;

package/apps/recipe-web/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+}

package/apps/recipe-web/vite.config.ts

@@ -0,0 +1,23 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+
+  optimizeDeps: {
+    // The Stencil loader is a browser-only ESM entry point; letting Vite
+    // pre-bundle it keeps the dev server from re-resolving it on every reload.
+    include: ['recipe-kit-stencil/loader'],
+  },
+
+  ssr: {
+    // Never pull the custom-element registry into the server bundle.
+    noExternal: [],
+    external: ['recipe-kit-stencil/loader'],
+  },
+
+  server: {
+    port: 5173,
+    strictPort: false,
+  },
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@ssejal8/recipe-ui-kit",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Recipe Finder & Meal Planner — SvelteKit application plus a published StencilJS component library.",
+  "type": "module",
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "npm run build --workspace recipe-kit-stencil && npm run dev --workspace recipe-web",
+    "dev:app": "npm run dev --workspace recipe-web",
+    "dev:kit": "npm run start --workspace recipe-kit-stencil",
+    "build": "npm run build --workspace recipe-kit-stencil && npm run build --workspace recipe-web",
+    "build:kit": "npm run build --workspace recipe-kit-stencil",
+    "build:app": "npm run build --workspace recipe-web",
+    "preview": "npm run preview --workspace recipe-web",
+    "check": "npm run check --workspace recipe-web",
+    "test": "npm run test --workspace recipe-kit-stencil",
+    "publish:kit": "npm publish --workspace recipe-kit-stencil"
+  }
+}