feat(frontend): add react spa with wishlist flows and public profile

apps/frontend/src/components/ui/Button.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+type Variant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+type Size = 'sm' | 'md' | 'lg' | 'icon';
+
+const base =
+  'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-150 focus:outline-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50';
+
+const variants: Record<Variant, string> = {
+  primary: 'bg-primary text-primary-foreground hover:bg-primary-600 shadow-card',
+  secondary: 'bg-surface text-ink shadow-card hover:bg-surface-muted',
+  ghost: 'text-ink hover:bg-ink/5',
+  outline: 'border border-border bg-surface text-ink hover:bg-surface-muted',
+  danger: 'bg-danger text-white hover:brightness-95 shadow-card',
+};
+
+const sizes: Record<Size, string> = {
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-10 px-4 text-sm',
+  lg: 'h-12 px-6 text-base',
+  icon: 'h-9 w-9',
+};
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant = 'primary', size = 'md', type = 'button', ...rest },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(base, variants[variant], sizes[size], className)}
+      {...rest}
+    />
+  );
+});

apps/frontend/src/components/ui/Input.tsx

@@ -0,0 +1,8 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  function Input({ className, ...rest }, ref) {
+    return <input ref={ref} className={cn('field__input', className)} {...rest} />;
+  },
+);

apps/frontend/src/components/ui/Label.tsx

@@ -0,0 +1,6 @@
+import type { LabelHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export function Label({ className, ...rest }: LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label className={cn('field__label', className)} {...rest} />;
+}

apps/frontend/src/components/ui/Modal.tsx

@@ -0,0 +1,78 @@
+import { useEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/cn';
+import { Button } from './Button';
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  size?: 'md' | 'lg';
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = 'md',
+}: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-6">
+      <div
+        className="absolute inset-0 bg-ink/40 backdrop-blur-sm animate-fade-in-up"
+        onClick={onClose}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          'relative w-full bg-surface shadow-pop animate-fade-in-up',
+          'rounded-t-xl sm:rounded-xl',
+          size === 'md' ? 'sm:max-w-lg' : 'sm:max-w-2xl',
+          'max-h-[90vh] overflow-hidden flex flex-col',
+        )}
+      >
+        <header className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold text-ink">{title}</h2>
+            {description && <p className="mt-1 text-sm text-muted">{description}</p>}
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close">
+            <X className="h-5 w-5" />
+          </Button>
+        </header>
+        <div className="overflow-y-auto px-5 py-5">{children}</div>
+        {footer && (
+          <footer className="flex items-center justify-end gap-2 border-t border-border px-5 py-4">
+            {footer}
+          </footer>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}

apps/frontend/src/components/ui/Textarea.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cn } from '@/lib/cn';
+
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  TextareaHTMLAttributes<HTMLTextAreaElement>
+>(function Textarea({ className, rows = 3, ...rest }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      rows={rows}
+      className={cn('field__textarea', className)}
+      {...rest}
+    />
+  );
+});