Refactor frontend system primitives and surfaces

components/root/media-field-picker.tsx

@@ -8,6 +8,7 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 
 import type { MediaOption } from "@/lib/media";
 import { cn } from "@/lib/utils";
+import { AppCard } from "@/components/ui/app-card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
@@ -110,7 +111,7 @@ export function MediaFieldPicker({
   }, [serializedValue]);
 
   return (
-    <div className="space-y-3 rounded-surface border border-border/80 bg-card p-4 shadow-card">
+    <AppCard padding="sm" className="space-y-3">
       <div className="space-y-2">
         <Label className="sr-only">{title}</Label>
         <div className="flex flex-wrap gap-2">
@@ -238,16 +239,16 @@ export function MediaFieldPicker({
                         })
                       }
                       className={cn(
-                        "flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left transition-colors",
+                        "flex w-full items-center gap-3 rounded-nested border px-3 py-2 text-left transition-colors",
                         isActive
                           ? "border-input bg-accent/40"
                           : "border-input bg-background hover:bg-accent/20",
                       )}
                     >
                       {option.url ? (
-                        <img src={option.url} alt={option.label} className="h-12 w-12 rounded-md object-cover" />
+                        <img src={option.url} alt={option.label} className="h-12 w-12 rounded-nested object-cover" />
                       ) : (
-                        <div className="h-12 w-12 rounded-md border border-border bg-background" />
+                        <div className="h-12 w-12 rounded-nested border border-border bg-background" />
                       )}
                       <div className="min-w-0 flex-1">
                         <p className="truncate text-sm font-medium text-foreground">{option.label}</p>
@@ -258,7 +259,7 @@ export function MediaFieldPicker({
                   );
                 })
               ) : (
-                <div className="rounded-md border border-dashed border-input px-3 py-4 text-sm text-muted-foreground">
+                <div className="rounded-nested border border-dashed border-input px-3 py-4 text-sm text-muted-foreground">
                   No media found.
                 </div>
               )}
@@ -269,15 +270,15 @@ export function MediaFieldPicker({
 
       {previewUrl ? (
         value.kind === "IMAGE" ? (
-          <div className="overflow-hidden rounded-md border bg-card">
+          <AppCard className="overflow-hidden rounded-nested">
             <img src={previewUrl} alt={value.label || title} className="h-40 w-full object-cover" />
-          </div>
+          </AppCard>
         ) : (
-          <div className="rounded-md border bg-card px-4 py-3 text-sm text-muted-foreground">
+          <AppCard className="rounded-nested px-4 py-3 text-sm text-muted-foreground">
             {previewUrl}
-          </div>
+          </AppCard>
         )
       ) : null}
-    </div>
+    </AppCard>
   );
 }