@ssejal8/recipe-ui-kit 0.1.0

package/apps/recipe-web/src/lib/components/AppHeader.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { favorites } from '$stores/favorites.svelte';
+  import { myRecipes } from '$stores/myRecipes.svelte';
+  import { planner } from '$stores/planner.svelte';
+  import { theme } from '$stores/theme.svelte';
+
+  const links = $derived([
+    { href: '/', label: 'Discover', badge: 0 },
+    { href: '/favorites', label: 'Favorites', badge: favorites.count },
+    { href: '/my-recipes', label: 'My recipes', badge: myRecipes.count },
+    { href: '/planner', label: 'Planner', badge: planner.countFor() }
+  ]);
+
+  function isActive(href: string): boolean {
+    const path = page.url.pathname;
+    if (href === '/') return path === '/';
+    return path === href || path.startsWith(`${href}/`);
+  }
+
+  let menuOpen = $state(false);
+
+  // Close the mobile menu whenever the route changes.
+  $effect(() => {
+    void page.url.pathname;
+    menuOpen = false;
+  });
+</script>
+
+<header class="header">
+  <div class="inner">
+    <a class="brand" href="/" aria-label="Mise — home">
+      <span class="brand-mark" aria-hidden="true">🥘</span>
+      <span class="brand-text">
+        <strong>Mise</strong>
+        <small>Recipe finder &amp; meal planner</small>
+      </span>
+    </a>
+
+    <button
+      class="menu-toggle"
+      type="button"
+      aria-expanded={menuOpen}
+      aria-controls="primary-nav"
+      onclick={() => (menuOpen = !menuOpen)}
+    >
+      <span class="sr-only">{menuOpen ? 'Close menu' : 'Open menu'}</span>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+        {#if menuOpen}
+          <path d="M6 6l12 12M18 6 6 18" />
+        {:else}
+          <path d="M4 7h16M4 12h16M4 17h16" />
+        {/if}
+      </svg>
+    </button>
+
+    <nav class="nav" class:is-open={menuOpen} id="primary-nav" aria-label="Primary">
+      {#each links as link (link.href)}
+        <a class="nav-link" class:is-active={isActive(link.href)} href={link.href} aria-current={isActive(link.href) ? 'page' : undefined}>
+          {link.label}
+          {#if link.badge > 0}
+            <span class="nav-badge">{link.badge}</span>
+          {/if}
+        </a>
+      {/each}
+
+      <div class="nav-tail">
+        <a class="btn btn-primary btn-sm" href="/my-recipes/new">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+          Add recipe
+        </a>
+
+        <button class="theme-toggle" type="button" onclick={() => theme.toggle()} aria-label="Switch to {theme.current === 'dark' ? 'light' : 'dark'} theme">
+          {#if theme.current === 'dark'}
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="4.2" />
+              <path d="M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.9 4.9l1.7 1.7M17.4 17.4l1.7 1.7M19.1 4.9l-1.7 1.7M6.6 17.4l-1.7 1.7" />
+            </svg>
+          {:else}
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5 8.6 8.6 0 1 0 20.5 14.6Z" />
+            </svg>
+          {/if}
+        </button>
+      </div>
+    </nav>
+  </div>
+</header>
+
+<style>
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: color-mix(in srgb, var(--rk-bg) 88%, transparent);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--rk-border);
+  }
+
+  .inner {
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    max-width: var(--app-max);
+    margin: 0 auto;
+    padding: 11px var(--app-gutter);
+  }
+
+  .brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    color: inherit;
+    margin-right: auto;
+  }
+
+  .brand-mark {
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+
+  .brand-text {
+    display: grid;
+    line-height: 1.15;
+  }
+
+  .brand-text strong {
+    font-family: var(--rk-font-display);
+    font-size: 1.16rem;
+    letter-spacing: -0.02em;
+  }
+
+  .brand-text small {
+    font-size: 0.68rem;
+    color: var(--rk-muted);
+    letter-spacing: 0.01em;
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  .nav-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    border-radius: var(--rk-radius-pill);
+    color: var(--rk-ink-2);
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 600;
+    white-space: nowrap;
+    transition:
+      background var(--rk-transition),
+      color var(--rk-transition);
+  }
+
+  .nav-link:hover {
+    background: var(--rk-surface-2);
+    color: var(--rk-ink);
+  }
+
+  .nav-link.is-active {
+    background: var(--rk-primary-soft);
+    color: var(--rk-primary-strong);
+  }
+
+  .nav-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 19px;
+    height: 19px;
+    padding: 0 5px;
+    border-radius: var(--rk-radius-pill);
+    background: var(--rk-ink);
+    color: var(--rk-bg);
+    font-size: 0.68rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nav-link.is-active .nav-badge {
+    background: var(--rk-primary);
+    color: #fff;
+  }
+
+  .nav-tail {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 12px;
+    padding-left: 14px;
+    border-left: 1px solid var(--rk-border);
+  }
+
+  .theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 1px solid var(--rk-border);
+    border-radius: 50%;
+    background: var(--rk-surface);
+    color: var(--rk-ink-2);
+    cursor: pointer;
+    transition:
+      background var(--rk-transition),
+      color var(--rk-transition);
+  }
+
+  .theme-toggle:hover {
+    background: var(--rk-surface-2);
+    color: var(--rk-primary);
+  }
+
+  .theme-toggle svg {
+    width: 17px;
+    height: 17px;
+  }
+
+  .menu-toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: 1px solid var(--rk-border);
+    border-radius: var(--rk-radius);
+    background: var(--rk-surface);
+    color: var(--rk-ink);
+    cursor: pointer;
+  }
+
+  .menu-toggle svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  @media (max-width: 860px) {
+    .menu-toggle {
+      display: inline-flex;
+    }
+
+    .nav {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 4px;
+      padding: 12px var(--app-gutter) 18px;
+      background: var(--rk-bg);
+      border-bottom: 1px solid var(--rk-border);
+      box-shadow: var(--rk-shadow);
+      display: none;
+    }
+
+    .nav.is-open {
+      display: flex;
+    }
+
+    .nav-link {
+      justify-content: space-between;
+      padding: 12px 14px;
+    }
+
+    .nav-tail {
+      margin: 8px 0 0;
+      padding: 12px 0 0;
+      border-left: 0;
+      border-top: 1px solid var(--rk-border);
+      justify-content: space-between;
+    }
+
+    .brand-text small {
+      display: none;
+    }
+  }
+</style>

package/apps/recipe-web/src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Modal from './Modal.svelte';
+
+  interface Props {
+    open: boolean;
+    heading: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    onconfirm: () => void;
+    oncancel: () => void;
+  }
+
+  let {
+    open,
+    heading,
+    message,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    destructive = false,
+    onconfirm,
+    oncancel
+  }: Props = $props();
+</script>
+
+<Modal {open} {heading} size="sm" onclose={oncancel}>
+  <p>{message}</p>
+
+  {#snippet footer()}
+    <div slot="footer" class="actions">
+      <button class="btn" type="button" onclick={oncancel}>{cancelLabel}</button>
+      <button class="btn" class:btn-danger={destructive} class:btn-primary={!destructive} type="button" onclick={onconfirm}>
+        {confirmLabel}
+      </button>
+    </div>
+  {/snippet}
+</Modal>
+
+<style>
+  .actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+  }
+</style>

package/apps/recipe-web/src/lib/components/Modal.svelte

@@ -0,0 +1,33 @@
+<!--
+  Wraps `<rk-modal>`. The web component owns presentation, focus trapping and
+  Escape handling; the app owns the `open` state and reacts to `rkModalClose`.
+-->
+<script lang="ts">
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+
+  interface Props {
+    open: boolean;
+    heading: string;
+    subheading?: string;
+    size?: 'sm' | 'md' | 'lg';
+    dismissible?: boolean;
+    onclose: () => void;
+    children: import('svelte').Snippet;
+    /** Rendered into the component's `footer` slot. */
+    footer?: import('svelte').Snippet;
+  }
+
+  let { open, heading, subheading, size = 'md', dismissible = true, onclose, children, footer }: Props = $props();
+</script>
+
+<WebComponent
+  tag="rk-modal"
+  props={{ open, heading, subheading, size, dismissible }}
+  events={{ rkModalClose: onclose }}
+>
+  {@render children()}
+
+  {#if footer}
+    {@render footer()}
+  {/if}
+</WebComponent>

package/apps/recipe-web/src/lib/components/RecipeCard.svelte

@@ -0,0 +1,100 @@
+<!--
+  Wraps the `<rk-recipe-card>` web component.
+
+  This is where the SvelteKit ↔ Stencil contract lives for the most-used
+  component: primitive props go down, custom events come back up, and slots
+  carry app-specific content (badges, action buttons) into the card.
+-->
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import WebComponent from '$lib/stencil/WebComponent.svelte';
+  import { favorites } from '$stores/favorites.svelte';
+  import { toasts } from '$stores/toast.svelte';
+  import type { RecipeSummary } from '$domain/recipe';
+
+  interface Props {
+    recipe: RecipeSummary;
+    /** Dense horizontal layout, used in the planner picker. */
+    compact?: boolean;
+    hideFavorite?: boolean;
+    /** Overrides navigation on activation. Return `true` to skip the default. */
+    onselect?: (recipe: RecipeSummary) => boolean | void;
+    /** Extra content for the card's `actions` slot. */
+    actions?: import('svelte').Snippet<[RecipeSummary]>;
+    /** Extra content for the card's default (metadata) slot. */
+    badges?: import('svelte').Snippet<[RecipeSummary]>;
+  }
+
+  let { recipe, compact = false, hideFavorite = false, onselect, actions, badges }: Props = $props();
+
+  // Favorite state is owned by the app; the component only reports intent.
+  const isFavorite = $derived(favorites.has(recipe.id));
+
+  function handleSelect(event: CustomEvent<{ recipeId: string }>) {
+    if (onselect?.(recipe) === true) return;
+    void goto(`/recipes/${event.detail.recipeId}`);
+  }
+
+  function handleFavoriteToggle(event: CustomEvent<{ favorite: boolean }>) {
+    const nowFavorite = favorites.toggle(recipe);
+    // Trust the store's resulting state over the event payload — the store is
+    // the source of truth and may have been changed in another tab.
+    if (nowFavorite !== event.detail.favorite) return;
+
+    toasts.push(nowFavorite ? `Saved “${recipe.name}” to favorites.` : `Removed “${recipe.name}” from favorites.`, {
+      tone: nowFavorite ? 'success' : 'info',
+      action: nowFavorite ? undefined : { label: 'Undo', run: () => favorites.add(recipe) }
+    });
+  }
+
+  const timeLabel = $derived(recipe.minutes && recipe.minutes > 0 ? `${recipe.minutes} min` : null);
+</script>
+
+<WebComponent
+  tag="rk-recipe-card"
+  class="card-host"
+  props={{
+    recipeId: recipe.id,
+    name: recipe.name,
+    image: recipe.image,
+    category: recipe.category,
+    area: recipe.area,
+    minutes: recipe.minutes,
+    servings: recipe.servings,
+    favorite: isFavorite,
+    origin: recipe.origin,
+    href: `/recipes/${recipe.id}`,
+    compact,
+    hideFavorite
+  }}
+  events={{
+    rkCardSelect: handleSelect as (event: CustomEvent<never>) => void,
+    rkFavoriteToggle: handleFavoriteToggle as (event: CustomEvent<never>) => void
+  }}
+>
+  <!-- Default slot: metadata badges rendered under the title. -->
+  {#if badges}
+    {@render badges(recipe)}
+  {:else}
+    {#if timeLabel}
+      <rk-badge tone="accent" small>{timeLabel}</rk-badge>
+    {/if}
+    {#if recipe.ingredientCount}
+      <rk-badge small>{recipe.ingredientCount} ingredients</rk-badge>
+    {/if}
+    {#each (recipe.tags ?? []).slice(0, 2) as tag (tag)}
+      <rk-badge tone="primary" variant="outline" small>{tag}</rk-badge>
+    {/each}
+  {/if}
+
+  <!-- Named slot: action row in the card footer. -->
+  {#if actions}
+    {@render actions(recipe)}
+  {/if}
+</WebComponent>
+
+<style>
+  :global(.card-host) {
+    height: 100%;
+  }
+</style>